Skip to content

Commit c9255e0

Browse files
MaakkkuuMaakkkuu
committed
chore: add carousel and feature box for sponsor
1 parent d7a14fe commit c9255e0

5 files changed

Lines changed: 158 additions & 78 deletions

File tree

‎app/(home)/components/Sponsors.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,40 +18,40 @@ export function Sponsors() {
1818
logo: '/sponsor-logos/mugna-logo.png',
1919
logoMobile: '/sponsor-logos/mugna-logo.png',
2020
testimonial:
21-
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe, ex tempora distinctio laboriosam modi voluptatibus rem vitae quam, molestias impedit ducimus eos pariatur!',
21+
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
2222
url: 'https://mugna.tech',
2323
},
2424
{
2525
name: 'Codev',
2626
logo: '/sponsor-logos/codev-logo.png',
2727
logoMobile: '/sponsor-logos/codev-logo.png',
2828
testimonial:
29-
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe, ex tempora distinctio laboriosam modi voluptatibus rem vitae quam, molestias impedit ducimus eos pariatur!',
29+
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
3030
url: 'https://codev.com',
3131
},
3232
{
3333
name: 'Ingenuity Software',
34-
logo: '/sponsor-logos/ingenuity-logo.png',
35-
logoMobile: '/sponsor-logos/ingenuity-logo.png',
34+
logo: '/sponsor-logos/ingenuity-logo-mobile.png',
35+
logoMobile: '/sponsor-logos/ingenuity-logo-mobile.png',
3636
testimonial:
37-
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe, ex tempora distinctio laboriosam modi voluptatibus rem vitae quam, molestias impedit ducimus eos pariatur!',
37+
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
3838
url: 'https://ingenuity.ph',
3939
},
4040
{
4141
name: 'PythonPH',
4242
logo: '/sponsor-logos/pythonph-logo.png',
4343
logoMobile: '/sponsor-logos/pythonph-logo.png',
4444
testimonial:
45-
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe, ex tempora distinctio laboriosam modi voluptatibus rem vitae quam, molestias impedit ducimus eos pariatur!',
45+
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
4646
url: 'https://python.ph',
4747
},
4848
{
4949
name: 'Stace',
5050
logo: '/sponsor-logos/stace-logo.png',
5151
logoMobile: '/sponsor-logos/stace-logo.png',
5252
testimonial:
53-
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe, ex tempora distinctio laboriosam modi voluptatibus rem vitae quam, molestias impedit ducimus eos pariatur!',
54-
url: 'https://stace.com',
53+
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quas possimus. Vitae, officia quia. Doloribus saepe',
54+
url: 'https://www.stace.app',
5555
},
5656
];
5757

‎app/(home)/components/SponsorsDesktop.tsx‎

Lines changed: 148 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import React from 'react';
3+
import { useEffect, useState, useRef} from 'react';
44
import { cn } from '@/lib/utils';
55
import Autoplay from 'embla-carousel-autoplay';
66
import {
@@ -11,6 +11,7 @@ import {
1111
} from '@/components/ui/carousel';
1212
import Image from 'next/image';
1313
import Link from 'next/link';
14+
import { Button } from '@/components/ui/button';
1415

1516
interface SponsorshipProps {
1617
name: string;
@@ -21,57 +22,82 @@ interface SponsorshipProps {
2122
}
2223

2324
const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
24-
const [api, setApi] = React.useState<CarouselApi>();
25-
const [current, setCurrent] = React.useState(0);
26-
const [count, setCount] = React.useState(0);
25+
const [api, setApi] = useState<CarouselApi>();
26+
const [current, setCurrent] = useState(0);
27+
const [count, setCount] = useState(0);
2728

28-
React.useEffect(() => {
29+
// State to hold the featured sponsor
30+
const [featuredSponsor, setfeaturedSponsor] =
31+
useState<SponsorshipProps>(sponsors[0]);
32+
33+
useEffect(() => {
2934
if (!api) {
3035
return;
3136
}
32-
3337
setCount(api.scrollSnapList().length);
34-
setCurrent(api.selectedScrollSnap() + 1);
38+
39+
// Set the current index to the first item
40+
api.scrollTo(2);
3541

3642
api.on('select', () => {
37-
setCurrent(api.selectedScrollSnap() + 1);
43+
const currentIndex = api.selectedScrollSnap();
44+
const correctedCurrentIndex = (currentIndex + 3) % sponsors.length;
45+
setCurrent(correctedCurrentIndex);
46+
setfeaturedSponsor(sponsors[correctedCurrentIndex]);
3847
});
3948
}, [api]);
4049

41-
const plugin = React.useRef(
42-
Autoplay({ delay: 2000, stopOnInteraction: true })
50+
const plugin = useRef(
51+
Autoplay({ delay: 5000, stopOnInteraction: true })
4352
);
4453

45-
const onMouseLeave = () => {
46-
if (api) {
47-
plugin.current.play();
48-
}
54+
const autoPlayInteraction = () => {
55+
plugin.current.stop();
56+
// Wait for 5 seconds before resuming autoplay but when the user clicks it cancel the autoplay
57+
setTimeout(() => {
58+
if (api) {
59+
plugin.current.play();
60+
}
61+
}, 5000);
4962
};
5063

51-
const onMouseEnter = (index?: number) => {
52-
if (!api) {
53-
return;
54-
}
55-
56-
if (index != null) {
57-
api.scrollTo(index);
58-
}
64+
const carouselFeaturedAnimation = (
65+
sponsor: SponsorshipProps,
66+
index: number
67+
) => {
68+
setfeaturedSponsor(sponsor);
69+
api?.scrollTo(index + 2);
70+
updateButton(index);
71+
autoPlayInteraction();
72+
};
5973

60-
plugin.current.stop();
74+
const updateButton = (index: number) => {
75+
setCurrent(index);
76+
api?.scrollTo(index + 2);
77+
setfeaturedSponsor(sponsors[index]);
78+
autoPlayInteraction();
6179
};
6280

6381
return (
6482
<div className="xl:grid xl:grid-cols-2 lg:flex lg:flex-col lg:h-auto text-white gap-x-4">
6583
{/* Description Section */}
6684
<div className="space-y-16 xl:mb-28 lg:flex-1 lg:h-auto">
6785
<div className="space-y-6 max-w-[365px] mx-auto xl:mx-0">
68-
<h1 className="text-primary text-[80px] leading-none font-bold ">
69-
<span className="text-white">Our</span> Sponsor
86+
<h1 className="text-primary text-[80px] leading-none font-bold mt-12 mb-12 ">
87+
<span className="text-white">Our</span> Sponsors
7088
</h1>
7189
<p className="text-xl text-left">
7290
A big thank you to our generous sponsors whose support makes our
7391
work possible and helps us create lasting impact.
7492
</p>
93+
<Button
94+
variant={'sponsor-be-our-sponsor'}
95+
onClick={() => {
96+
window.location.href = '/404';
97+
}}
98+
>
99+
Be Our Sponsor
100+
</Button>
75101
</div>
76102

77103
<div className="max-w-[365px] mx-auto">
@@ -81,52 +107,104 @@ const SponsorsDesktop = ({ sponsors }: { sponsors: SponsorshipProps[] }) => {
81107
</div>
82108
</div>
83109

84-
<div className="flex-1 h-auto flex">
85-
<Carousel
86-
plugins={[plugin.current]}
87-
className="w-full flex h-full"
88-
onMouseEnter={plugin.current.stop}
89-
onMouseLeave={() => onMouseLeave()}
90-
setApi={setApi}
91-
>
92-
<CarouselContent>
93-
{sponsors.map((sponsor, index) => (
94-
<CarouselItem key={index}>
95-
<div
96-
key={index}
97-
className="relative group transition-all duration-500 col-span-3 row-span-4 ease-in-out"
110+
<div className="pb-36 mb-36">
111+
{/* Featured Section */}
112+
{featuredSponsor && (
113+
<div className="flex-1 h-3/4 mb-4">
114+
<Link
115+
href={featuredSponsor.url}
116+
target="_blank"
117+
className="border border-[#36FF90] rounded-lg xl:px-6 xl:py-4 lg:p-6 w-full h-full flex flex-col justify-center items-center"
98118
>
99-
{/* Gradient Overlay */}
100-
<div className="absolute inset-0 bg-gradient-to-t from-[#00833A] to-[rgba(62,179,114,0)] opacity-0 transition-opacity duration-500 rounded-lg group-hover:opacity-100"></div>
101-
102-
<Link
103-
href={sponsor.url}
104-
target="_blank"
105-
className="border border-[#36FF90] rounded-lg xl:px-6 xl:py-4 lg:p-6 w-full h-full flex justify-center items-center"
106-
>
107-
{/* Logo Container */}
108-
<div className="w-full h-full relative flex justify-center items-center transition-transform duration-500 ease-in-out hover:scale-105">
109-
<Image
110-
src={sponsor.logo}
111-
alt={sponsor.name}
112-
loading="lazy"
113-
fill
114-
className={cn(
115-
'object-contain',
116-
'w-full h-full',
117-
'md:scale-[0.80]',
118-
'lg:scale-100'
119-
)}
120-
onMouseEnter={() => onMouseEnter(index)}
121-
onMouseLeave={() => onMouseLeave()}
122-
/>
123-
</div>
124-
</Link>
125-
</div>
126-
</CarouselItem>
127-
))}
128-
</CarouselContent>
129-
</Carousel>
119+
<div className="w-full h-[200px] relative flex justify-center items-center transition-transform duration-500 ease-in-out hover:scale-105">
120+
<Image
121+
src={featuredSponsor.logo}
122+
alt={featuredSponsor.name}
123+
loading="lazy"
124+
fill
125+
className={cn(
126+
'object-contain',
127+
featuredSponsor.name === 'Ingenuity Software' ||
128+
featuredSponsor.name === 'PythonPH' ||
129+
featuredSponsor.name === 'Stace'
130+
? 'scale-150' // Increase the size for specific sponsors
131+
: '',
132+
'w-full',
133+
'h-full',
134+
'p-12'
135+
)}
136+
/>
137+
</div>
138+
<p className="text-xl mt-6">
139+
{featuredSponsor.testimonial}
140+
<br></br>
141+
<br></br>— {featuredSponsor.name}
142+
</p>
143+
</Link>
144+
</div>
145+
)}
146+
147+
{/* Carousel Section */}
148+
<div className="flex-1 h-auto flex">
149+
<Carousel
150+
className="w-full flex h-full"
151+
setApi={setApi}
152+
plugins={[plugin.current]}
153+
opts={{
154+
loop: true,
155+
}}
156+
>
157+
<CarouselContent>
158+
{sponsors.map((sponsor, index) => (
159+
<CarouselItem key={index} className="basis-1/3">
160+
<div
161+
key={index}
162+
className="relative group transition-all duration-500 col-span-3 row-span-4 ease-in-out
163+
"
164+
onClick={() => carouselFeaturedAnimation(sponsor, index)}
165+
>
166+
{/* Gradient Overlay */}
167+
<div className="absolute inset-0 bg-gradient-to-t from-[#00833A] to-[rgba(62,179,114,0)] opacity-0 transition-opacity duration-500 rounded-lg group-hover:opacity-100"></div>
168+
169+
<div className="border border-[#36FF90] rounded-lg xl:px-6 xl:py-4 lg:p-6 w-full h-full flex justify-center items-center">
170+
{/* Logo Container */}
171+
<div className="min-h-[160px] min-w-[160px] relative flex justify-center items-center transition-transform duration-500 ease-in-out hover:scale-105">
172+
<div className="">
173+
<Image
174+
src={sponsor.logo}
175+
alt={sponsor.name}
176+
loading="lazy"
177+
fill
178+
className={cn(
179+
'object-contain',
180+
'w-full',
181+
'h-full',
182+
'md:scale-[0.80]',
183+
'lg:scale-100'
184+
)}
185+
/>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</CarouselItem>
191+
))}
192+
</CarouselContent>
193+
</Carousel>
194+
</div>
195+
{/* Dots Navigation */}
196+
<div className="flex justify-center mt-4">
197+
{Array.from({ length: count }).map((_, index) => (
198+
<button
199+
key={index}
200+
onClick={() => updateButton(index)}
201+
className={cn(
202+
'w-3 h-3 rounded-full mx-1',
203+
current === index ? 'bg-primary' : 'bg-gray-400'
204+
)}
205+
></button>
206+
))}
207+
</div>
130208
</div>
131209
</div>
132210
);

‎components/ui/button.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ const buttonVariants = cva(
3838
'text-[14px] bg-dark-green text-[#36FF90] font-bold md:font-normal py-3 px-4 rounded-full opacity-90 w-36 mx-auto shadow-md hover:scale-105 hover:bg-[#1A3E2A] hover:text-[#36FF90] transition-all duration-300 ease-out',
3939
'hero-secondary':
4040
'border-[1px] border-dark-green text-[14px] text-dark-green font-bold md:font-normal py-3 px-4 rounded-full opacity-90 w-36 mx-auto shadow-md hover:scale-105 transition-all duration-300 ease-out',
41+
'sponsor-be-our-sponsor':
42+
'text-xl bg-primary text-black font-semibold py-3 rounded-full w-52 shadow-md hover:scale-105 transition-all duration-300 ease-out',
4143
},
4244
size: {
4345
default: '',

‎public/sponsor-logos/ingenuity-logo-mobile.png‎

44.9 KB
Loading

‎public/sponsor-logos/ingenuity-logo.png‎

21.6 KB
Loading

0 commit comments

Comments
 (0)