Skip to content

Commit d114ae7

Browse files
codeunia-devcodeunia-dev
authored
Merge pull request #237 from codeunia-dev/feat/app/page.tsx
feat(home): add sponsors section with animated display
2 parents 4037bea + e7ffa47 commit d114ae7

File tree

3 files changed

+255
-1
lines changed

3 files changed

+255
-1
lines changed

‎app/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,21 @@ const LatestContentPreview = dynamic(() => import("@/components/home/LatestConte
5757
ssr: false
5858
});
5959

60+
// New: SponsorsSection on Home
61+
const SponsorsSection = dynamic(() => import("@/components/home/SponsorsSection").then(mod => ({ default: mod.SponsorsSection })), {
62+
loading: () => (
63+
<div className="py-16">
64+
<div className="container px-4 mx-auto">
65+
<div className="animate-pulse">
66+
<div className="h-8 bg-gray-200 rounded w-1/3 mx-auto mb-4"></div>
67+
<div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div>
68+
</div>
69+
</div>
70+
</div>
71+
),
72+
ssr: false
73+
});
74+
6075
const Footer = dynamic(() => import("@/components/footer"), {
6176
loading: () => (
6277
<footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
@@ -89,6 +104,11 @@ export default function Home() {
89104
<CommunitySpotlight />
90105
</Suspense>
91106

107+
{/* New: Sponsors Section on Home */}
108+
<Suspense fallback={<div className="py-16"><div className="container px-4 mx-auto"><div className="animate-pulse"><div className="h-8 bg-gray-200 rounded w-1/3 mx-auto mb-4"></div><div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div></div></div></div>}>
109+
<SponsorsSection />
110+
</Suspense>
111+
92112
<Suspense fallback={<div className="py-24"><div className="container px-4 mx-auto"><div className="animate-pulse"><div className="h-8 bg-gray-200 rounded w-1/3 mx-auto mb-4"></div><div className="h-4 bg-gray-200 rounded w-1/2 mx-auto"></div></div></div></div>}>
93113
<LatestContentPreview />
94114
</Suspense>

‎components/home/SponsorsSection.tsx‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
"use client";
2+
3+
import { motion } from "framer-motion";
4+
import { Handshake } from "lucide-react";
5+
import Image from "next/image";
6+
7+
const sponsors = [
8+
{
9+
name: "Webytes",
10+
title: "Community Engagement Partner",
11+
logo: "/images/sponsors/webytes.png",
12+
link: "https://www.webytes.club/"
13+
},
14+
{
15+
name: "GeeksforGeeks",
16+
title: "Knowledge & Learning Partner",
17+
logo: "/images/sponsors/geekforgeeks.png",
18+
link: "https://www.geeksforgeeks.org/"
19+
},
20+
{
21+
name: "GeeksforGeeks Student Chapter- Chandigarh University",
22+
title: "Community Engagement Partner",
23+
logo: "/images/sponsors/studentchaptercu.png",
24+
link: "https://www.linkedin.com/company/gfgstudentchaptercu/"
25+
},
26+
{
27+
name: "Alexa Developer Community- Chandigarh University",
28+
title: "Community Engagement Partner",
29+
logo: "/images/sponsors/alexadevcommunity.png",
30+
link: "https://www.linkedin.com/company/alexa-developer-community-cu/"
31+
},
32+
{
33+
name: "Innovxus",
34+
title: "Community Partner",
35+
logo: "/images/sponsors/Innovxus.png",
36+
link: "https://www.innovxus.com/"
37+
},
38+
{
39+
name: "Rotaract - Chandigarh University",
40+
title: "Community Engagement Partner",
41+
logo: "/images/sponsors/rotaract.png",
42+
link: "https://www.instagram.com/rotaract.cu/"
43+
},
44+
{
45+
name: "Unstop",
46+
title: "Technology Partner",
47+
logo: "/images/sponsors/unstop.png",
48+
link: "https://unstop.com/"
49+
},
50+
{
51+
name: "Code Crafters",
52+
title: "Upskilling Partner",
53+
logo: "/images/sponsors/codecrafter.png",
54+
link: "https://codecrafters.io/"
55+
},
56+
];
57+
58+
export function SponsorsSection() {
59+
return (
60+
<section className="py-20 relative overflow-hidden">
61+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.05),transparent_70%)]"></div>
62+
<div className="container px-4 mx-auto relative z-10">
63+
<div className="max-w-4xl mx-auto space-y-12">
64+
<motion.div
65+
className="text-center space-y-6"
66+
initial={{ opacity: 0, y: 20 }}
67+
whileInView={{ opacity: 1, y: 0 }}
68+
transition={{ duration: 0.6 }}
69+
viewport={{ once: true }}
70+
>
71+
<div className="flex flex-col items-center justify-center gap-4">
72+
<button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
73+
<span className="absolute inset-0 overflow-hidden rounded-full">
74+
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
75+
</span>
76+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
77+
<span>Our Sponsors</span>
78+
<span>
79+
<Handshake className="w-3 h-3" />
80+
</span>
81+
</div>
82+
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
83+
</button>
84+
</div>
85+
<h2 className="text-3xl md:text-4xl font-bold">
86+
Proudly Supported by{" "}
87+
<span className="gradient-text">Industry Leaders</span>
88+
</h2>
89+
<p className="text-xl text-muted-foreground">
90+
We&apos;re grateful for the support of these amazing companies who share our vision for accessible coding education.
91+
</p>
92+
</motion.div>
93+
94+
<div className="relative w-full overflow-hidden">
95+
<div
96+
className="flex animate-scroll gap-8 py-4"
97+
style={{ minWidth: `${sponsors.length * 2 * 332}px` }}
98+
>
99+
{sponsors.map((sponsor, idx) => (
100+
sponsor.link ? (
101+
<a
102+
key={`first-${idx}`}
103+
href={sponsor.link}
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
className="no-underline"
107+
>
108+
<motion.div
109+
className="flex-shrink-0 w-[300px] h-[200px] rounded-xl border border-primary/10 bg-background/50 backdrop-blur-sm p-2 flex flex-col items-center justify-center gap-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
110+
whileHover={{ y: -5 }}
111+
>
112+
<div className={"relative w-full h-48 flex items-center justify-center"}>
113+
<Image
114+
src={sponsor.logo}
115+
alt={sponsor.name}
116+
fill
117+
className={
118+
sponsor.name === "Unstop"
119+
? "object-contain p-4"
120+
: sponsor.name === "Code Crafters"
121+
? "object-contain w-32 h-16 mx-auto"
122+
: sponsor.name === "Innovxus"
123+
? "object-contain w-24 h-10 mx-auto flex items-center justify-center"
124+
: "object-cover"
125+
}
126+
/>
127+
</div>
128+
<div className="text-center">
129+
<h3 className="font-semibold text-lg">{sponsor.name}</h3>
130+
<p className="text-sm text-muted-foreground">{sponsor.title}</p>
131+
</div>
132+
</motion.div>
133+
</a>
134+
) : (
135+
<motion.div
136+
key={`first-${idx}`}
137+
className="flex-shrink-0 w-[300px] h-[200px] rounded-xl border border-primary/10 bg-background/50 backdrop-blur-sm p-2 flex flex-col items-center justify-center gap-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
138+
whileHover={{ y: -5 }}
139+
>
140+
<div className={"relative w-full h-48 flex items-center justify-center"}>
141+
<Image
142+
src={sponsor.logo}
143+
alt={sponsor.name}
144+
fill
145+
className={
146+
sponsor.name === "Unstop"
147+
? "object-contain p-4"
148+
: sponsor.name === "Code Crafters"
149+
? "object-contain w-32 h-16 mx-auto"
150+
: sponsor.name === "Innovxus"
151+
? "object-contain w-24 h-10 mx-auto flex items-center justify-center"
152+
: "object-cover"
153+
}
154+
/>
155+
</div>
156+
<div className="text-center">
157+
<h3 className="font-semibold text-lg">{sponsor.name}</h3>
158+
<p className="text-sm text-muted-foreground">{sponsor.title}</p>
159+
</div>
160+
</motion.div>
161+
)
162+
))}
163+
164+
{sponsors.map((sponsor, idx) => (
165+
sponsor.link ? (
166+
<a
167+
key={`second-${idx}`}
168+
href={sponsor.link}
169+
target="_blank"
170+
rel="noopener noreferrer"
171+
className="no-underline"
172+
>
173+
<motion.div
174+
className="flex-shrink-0 w-[300px] h-[200px] rounded-xl border border-primary/10 bg-background/50 backdrop-blur-sm p-2 flex flex-col items-center justify-center gap-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
175+
whileHover={{ y: -5 }}
176+
>
177+
<div className={"relative w-full h-48 flex items-center justify-center"}>
178+
<Image
179+
src={sponsor.logo}
180+
alt={sponsor.name}
181+
fill
182+
className={
183+
sponsor.name === "Unstop"
184+
? "object-contain p-4"
185+
: sponsor.name === "Code Crafters"
186+
? "object-contain w-32 h-16 mx-auto"
187+
: sponsor.name === "Innovxus"
188+
? "object-contain w-24 h-10 mx-auto flex items-center justify-center"
189+
: "object-cover"
190+
}
191+
/>
192+
</div>
193+
<div className="text-center">
194+
<h3 className="font-semibold text-lg">{sponsor.name}</h3>
195+
<p className="text-sm text-muted-foreground">{sponsor.title}</p>
196+
</div>
197+
</motion.div>
198+
</a>
199+
) : (
200+
<motion.div
201+
key={`second-${idx}`}
202+
className="flex-shrink-0 w-[300px] h-[200px] rounded-xl border border-primary/10 bg-background/50 backdrop-blur-sm p-2 flex flex-col items-center justify-center gap-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
203+
whileHover={{ y: -5 }}
204+
>
205+
<div className={"relative w-full h-48 flex items-center justify-center"}>
206+
<Image
207+
src={sponsor.logo}
208+
alt={sponsor.name}
209+
fill
210+
className={
211+
sponsor.name === "Unstop"
212+
? "object-contain p-4"
213+
: sponsor.name === "Code Crafters"
214+
? "object-contain w-32 h-16 mx-auto"
215+
: sponsor.name === "Innovxus"
216+
? "object-contain w-24 h-10 mx-auto flex items-center justify-center"
217+
: "object-cover"
218+
}
219+
/>
220+
</div>
221+
<div className="text-center">
222+
<h3 className="font-semibold text-lg">{sponsor.name}</h3>
223+
<p className="text-sm text-muted-foreground">{sponsor.title}</p>
224+
</div>
225+
</motion.div>
226+
)
227+
))}
228+
</div>
229+
</div>
230+
</div>
231+
</div>
232+
</section>
233+
);
234+
}

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)