@@ -3,22 +3,44 @@ import { useState } from 'react';
3
3
import { diamondLinks , goldLinks , silverLinks , sponsorInfo } from '@/../public/data/sponsorInfos' ;
4
4
import SponsorModal from '@/components/Sponsors/SponsorModal' ;
5
5
import PageTitle from '@/components/PageTitle' ;
6
+ import Carousel from '@/components/Carousel' ;
7
+ import { motion , AnimatePresence } from 'framer-motion' ;
6
8
7
9
export default function SponsorsPage ( ) {
8
- const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105' ;
9
- const logodiv = 'block gap-y-8 h-14' ;
10
10
const background = 'rgba(57, 119, 248, 0.6)' ;
11
11
12
12
const [ showModal , setShowModal ] = useState ( false ) ;
13
13
const [ information , setInformation ] = useState < sponsorInfo | null > ( null ) ;
14
+ const [ currentCategory , setCurrentCategory ] = useState < 'Diamond' | 'Gold' | 'Silver' > ( 'Diamond' ) ;
15
+
16
+ const sponsors = {
17
+ Diamond : diamondLinks ,
18
+ Gold : goldLinks ,
19
+ Silver : silverLinks
20
+ }
21
+
22
+ const handleClick = ( info : sponsorInfo ) => {
23
+ setInformation ( info ) ;
24
+ setShowModal ( true ) ;
25
+ } ;
26
+
27
+ const handleCategoryChange = ( category : 'Diamond' | 'Gold' | 'Silver' ) => {
28
+ setCurrentCategory ( category ) ;
29
+ } ;
30
+
31
+ const containerVariants = {
32
+ hidden : { opacity : 0 , y : 20 } ,
33
+ visible : { opacity : 1 , y : 0 , transition : { duration : 0.5 } } ,
34
+ exit : { opacity : 0 , y : 20 , transition : { duration : 0.3 } } ,
35
+ } ;
14
36
15
37
return (
16
38
< Layout >
17
- < PageTitle title = "SPONSORS " />
18
-
39
+ < PageTitle title = "Our Sponsors " />
40
+
19
41
< section className = "py-8" >
20
42
< div className = "flex justify-center items-center mb-20" >
21
- < div className = "w-100 flex flex-col gap-16" >
43
+ < div className = "w-full flex flex-col gap-16" >
22
44
{ showModal && (
23
45
< SponsorModal
24
46
sponsorInfo = { information }
@@ -29,63 +51,43 @@ export default function SponsorsPage() {
29
51
) }
30
52
< div
31
53
style = { { backgroundColor : `${ background } ` } }
32
- className = "flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
33
- >
34
- < h2 className = "text-4xl font-black" > Diamond Sponsors</ h2 >
35
- { diamondLinks . map ( ( item , index ) => {
36
- return (
37
- < div
38
- key = { index }
39
- className = { `${ logodiv } ` }
40
- onClick = { ( ) => {
41
- setInformation ( item ) ;
42
- setShowModal ( true ) ;
43
- } }
44
- >
45
- < img className = { `h-14 ${ logostyle } ` } src = { item . svg } alt = { item . alt } />
46
- </ div >
47
- ) ;
48
- } ) }
49
- </ div >
50
- < div
51
- style = { { backgroundColor : `${ background } ` } }
52
- className = "flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
54
+ className = "relative flex flex-col items-center rounded-[1rem] p-14 gap-16 justify-center"
53
55
>
54
- < h2 className = "text-4xl font-black" > Gold Sponsors</ h2 >
55
- { goldLinks . map ( ( item , index ) => {
56
- return (
57
- < div
58
- key = { index }
59
- className = ""
60
- onClick = { ( ) => {
61
- setInformation ( item ) ;
62
- setShowModal ( true ) ;
63
- } }
56
+
57
+ < div className = "absolute top-4 left-8 py-8 px-12 w-full flex justify-around" >
58
+ { [ 'Diamond' , 'Gold' , 'Silver' ] . map ( category => (
59
+ < h2
60
+ key = { category }
61
+ className = { `text-2xl mb-4 cursor-pointer transform transition-transform duration-300 ease-in-out ${
62
+ currentCategory === category ? 'text-green-500 scale-110' : 'text-white'
63
+ } hover:scale-105`}
64
+ onClick = { ( ) => handleCategoryChange ( category as 'Diamond' | 'Gold' | 'Silver' ) }
64
65
>
65
- < img className = { `h-6 ${ logostyle } ` } src = { item . svg } alt = { item . alt } />
66
- </ div >
67
- ) ;
68
- } ) }
69
- </ div >
70
- < div
71
- style = { { backgroundColor : `${ background } ` } }
72
- className = "flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
73
- >
74
- < h2 className = "text-4xl font-black" > Silver Sponsors</ h2 >
75
- { silverLinks . map ( ( item , index ) => {
76
- return (
77
- < div
78
- key = { index }
79
- className = "h-14"
80
- onClick = { ( ) => {
81
- setInformation ( item ) ;
82
- setShowModal ( true ) ;
83
- } }
66
+ // { category . toLowerCase ( ) }
67
+ </ h2 >
68
+ ) ) }
69
+ </ div >
70
+
71
+ < div className = "mt-16 w-full flex justify-center flex-wrap gap-24" >
72
+ < AnimatePresence mode = 'wait' >
73
+ < motion . div
74
+ key = { currentCategory }
75
+ variants = { containerVariants }
76
+ initial = "hidden"
77
+ animate = "visible"
78
+ exit = "exit"
79
+ className = "w-full flex justify-center"
84
80
>
85
- < img className = { `h-8 ${ logostyle } ` } src = { item . svg } alt = { item . alt } />
86
- </ div >
87
- ) ;
88
- } ) }
81
+ < Carousel
82
+ images = { sponsors [ currentCategory ] . map ( item => ( {
83
+ ...item ,
84
+ category : currentCategory ,
85
+ } ) ) }
86
+ onImageClick = { handleClick }
87
+ />
88
+ </ motion . div >
89
+ </ AnimatePresence >
90
+ </ div >
89
91
</ div >
90
92
</ div >
91
93
</ div >
0 commit comments