Skip to content

Commit 8e898c6

Browse files
viniirbrviniirbr
authored
Feat/new sponsorship (#281)
* feat: add sponsorship page images * feat: put images * feat: responsivity * feat: rotate pictures effect * Refactor images list code and add alt message
1 parent cb2e5e3 commit 8e898c6

File tree

6 files changed

+179
-0
lines changed

6 files changed

+179
-0
lines changed

‎pages/alpha/sponsorship/index.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import type { NextPage } from "next";
2+
3+
import Layout from "../../../components/Layout/Layout";
4+
import Image from "next/image";
5+
import Link from "next/link";
6+
import { useEffect, useState } from "react";
7+
8+
interface Image {
9+
rotate: number;
10+
src: string;
11+
alt: string;
12+
}
13+
14+
const images: Image[] = [
15+
{
16+
src: "/images/sponsors/pic1.png",
17+
alt: "Audience watching a presentation",
18+
rotate: 6.56,
19+
},
20+
{
21+
src: "/images/sponsors/pic2.png",
22+
alt: "Audience watching a presentation with the name 'Codú' on the screen",
23+
rotate: -3.57,
24+
},
25+
{
26+
src: "/images/sponsors/pic3.png",
27+
alt: "Six people from Codú smiling at the camera",
28+
rotate: 4.58,
29+
},
30+
{
31+
src: "/images/sponsors/pic4.png",
32+
alt: "Audience watching a presentation",
33+
rotate: -4.35,
34+
},
35+
{
36+
src: "/images/sponsors/pic5.png",
37+
alt: "Audience smiling at the camera",
38+
rotate: 6.56,
39+
},
40+
];
41+
42+
const Sponsorship: NextPage = () => {
43+
const [scroll, setScroll] = useState(0);
44+
45+
useEffect(() => {
46+
function handleScroll() {
47+
setScroll(window.scrollY);
48+
}
49+
window.addEventListener("scroll", handleScroll);
50+
51+
return () => {
52+
window.removeEventListener("scroll", handleScroll);
53+
};
54+
}, []);
55+
56+
return (
57+
<Layout>
58+
<div>
59+
<header className="bg-white text-black text-center pt-10 pb-24 px-4 sm:pb-36 sm:text-left sm:px-10 md:pb-44 md:px-20 lg:px-36 lg:pt-14">
60+
<h1 className="font-extrabold text-3xl md:text-4xl md:mb-2 lg:text-5xl">
61+
Become a{" "}
62+
<b className="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-pink-600 z-20 font-extrabold">
63+
Sponsor
64+
</b>
65+
</h1>
66+
<h3 className="text-lg font-bold">
67+
Reach thousands of developers every mounth!
68+
</h3>
69+
</header>
70+
<section className="flex items-center relative bottom-12 justify-center overflow-hidden gap-8 sm:gap-20 sm:bottom-20 md:bottom-24 md:gap-36 lg:gap-44">
71+
{images.map((image, id) => (
72+
<div
73+
key={id}
74+
className={`w-32`}
75+
style={{
76+
transform: `${
77+
scroll < 200
78+
? `rotate(${(scroll / 200) * image.rotate}deg)`
79+
: `rotate(${image.rotate}deg)`
80+
}`,
81+
}}
82+
>
83+
<Image
84+
src={image.src}
85+
alt={image.alt}
86+
width={250}
87+
height={250}
88+
className="max-w-[150px] sm:max-w-[200px] md:max-w-none"
89+
/>
90+
</div>
91+
))}
92+
</section>
93+
<main className="bg-black px-4 sm:px-10 pb-20 flex flex-col lg:flex-row lg:items-center sm:pt-8 md:px-20 lg:pt-2 lg:pb-40 lg:px-36 lg:justify-between lg:gap-16">
94+
<div className="flex flex-col gap-4 max-w-2xl">
95+
<h2 className="text-xl sm:text-2xl font-bold">
96+
Trusted by brands both large and small
97+
</h2>
98+
<div className="flex flex-col gap-4 text-md sm:text-lg">
99+
<p>
100+
Codú aims to create one of the largest coding communities
101+
globally. Your funds go directly towards building the community
102+
and a flourishing ecosystem.
103+
</p>
104+
<p>
105+
We offer opportunities to sponsor <b>hackathons</b>, monthly{" "}
106+
<b>events</b>, <b>giveaways</b> and <b>online ad space</b>.
107+
</p>
108+
<p>
109+
<a href="mailto:partnerships@codu.co" className="underline">
110+
Contact us
111+
</a>{" "}
112+
today to find out more.
113+
</p>
114+
</div>
115+
</div>
116+
<div className="flex items-center flex-wrap gap-10 justify-between pt-10 flex-col sm:items-center sm:flex-row sm:justify-center">
117+
<div className="max-w-[200px]">
118+
<Image
119+
src="/images/sponsors/harveynash.png"
120+
alt=""
121+
width={300}
122+
height={300}
123+
className="w-full"
124+
/>
125+
</div>
126+
<div className="max-w-[200px]">
127+
<Image
128+
src="/images/sponsors/learnupon.png"
129+
alt=""
130+
width={300}
131+
height={300}
132+
className="w-full"
133+
/>
134+
</div>
135+
<div className="max-w-[200px]">
136+
<Image
137+
src="/images/sponsors/offerzen.png"
138+
alt=""
139+
width={300}
140+
height={300}
141+
/>
142+
</div>
143+
<div className="max-w-[200px]">
144+
<Image
145+
src="/images/sponsors/version1.png"
146+
alt=""
147+
width={300}
148+
height={300}
149+
/>
150+
</div>
151+
<div className="max-w-[200px]">
152+
<Image
153+
src="/images/sponsors/wework.png"
154+
alt=""
155+
width={300}
156+
height={300}
157+
/>
158+
</div>
159+
</div>
160+
</main>
161+
<section className="sm:px-10 md:px-20 lg:px-36">
162+
<div className="bg-white py-4 text-center w-full flex flex-col items-center gap-4 sm:rounded-lg lg:justify-between lg:py-8">
163+
<h2 className="text-black font-extrabold text-lg lg:text-2xl">
164+
Let us help you amplify your brand.
165+
</h2>
166+
<Link
167+
className="flex-inline items-center ml-4 bg-gradient-to-r from-orange-400 to-pink-600 rounded-md shadow-sm py-2 px-4 inline-flex justify-center font-medium text-white hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300"
168+
href=""
169+
>
170+
Find out more
171+
</Link>
172+
</div>
173+
</section>
174+
</div>
175+
</Layout>
176+
);
177+
};
178+
179+
export default Sponsorship;

‎public/images/sponsors/pic1.png‎

128 KB
Loading

‎public/images/sponsors/pic2.png‎

126 KB
Loading

‎public/images/sponsors/pic3.png‎

142 KB
Loading

‎public/images/sponsors/pic4.png‎

121 KB
Loading

‎public/images/sponsors/pic5.png‎

128 KB
Loading

0 commit comments

Comments
 (0)