Skip to content

Commit 6816272

Browse files
mittalvanshmittalvansh
committed
modify title sponsor card
1 parent dac4d24 commit 6816272

File tree

9 files changed

+119
-30
lines changed

9 files changed

+119
-30
lines changed

‎app/partners/page.jsx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import Navbar from "@/components/Navbar";
22
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3+
import TitleSponsorCard from "@/components/TitleSponsorCard";
34
import SponsorCard from "@/components/ui/cards";
45

5-
import logitech from "@/public/partnersPage/logitech.jpg";
66
import mlh from "@/public/partnersPage/mlh.webp";
77
import github from "@/public/partnersPage/github.jpg";
88
import postman from "@/public/partnersPage/postman.jpg";
99
import bobble from "@/public/partnersPage/bobble.webp";
1010
import godspeed from "@/public/partnersPage/godSpeed.jpg";
1111
import devfolio from "@/public/partnersPage/devfolio.webp";
1212
import virtualProtocol from "@/public/partnersPage/virtualProtocol.jpg";
13-
import nextgen from "@/public/partnersPage/nextgen.webp";
13+
import nextgen from "@/public/partnersPage/nextgen.jpg";
1414
import auth0 from "@/public/partnersPage/auth0.webp";
15-
import taipy from "@/public/partnersPage/taipy.webp";
15+
import taipy from "@/public/partnersPage/taipy.jpg";
1616
import godaddy from "@/public/partnersPage/godaddy.webp";
1717

1818
import balsamiq from "@/public/partnersPage/balsamiq.webp";
@@ -44,12 +44,6 @@ export const metadata = {
4444
};
4545

4646
const normalSponsorsData = [
47-
{
48-
sponsor: "Logitech",
49-
category: "Title Sponsor",
50-
sponsorimgsrc: logitech,
51-
site: "https://www.logitech.com",
52-
},
5347
{
5448
sponsor: "MLH",
5549
category: "Platform Partner",
@@ -157,7 +151,7 @@ const Partners = () => {
157151
<Navbar />
158152
<div
159153
className="bg-[#101010] flex flex-col items-center min-h-screen
160-
lg:px-20 px-4 py-40"
154+
px-6 md:px-16 lg:px-20 2xl:px-32 py-40"
161155
>
162156
<div className="flex flex-col items-center gap-4 mb-12">
163157
<p className="text-[#F5F0D8] text-[2rem] font-normal md:text-[5rem]">
@@ -168,8 +162,9 @@ const Partners = () => {
168162
className="w-full lg:max-w-[80%] text-[#C3C3C3] font-[Inter]
169163
text-center font-normal text-[1.25rem] md:text-[1.5rem]"
170164
>
171-
We are proud to collaborate with visionary organizations that share our passion for innovation and technology.
172-
These esteemed partners play a crucial role in making our hackathon a success
165+
We are proud to collaborate with visionary organizations that
166+
share our passion for innovation and technology. These esteemed
167+
partners play a crucial role in making our hackathon a success
173168
</p>
174169
</div>
175170
</div>
@@ -195,14 +190,24 @@ const Partners = () => {
195190
</TabsTrigger>
196191
</TabsList>
197192
<TabsContent value="Sponsors">
198-
<div className="flex flex-wrap justify-center gap-8 xl:gap-12 pt-8">
199-
{normalSponsorsData.map((sponsor, index) => {
200-
return <SponsorCard key={index} index={index} {...sponsor} />;
201-
})}
193+
<div className="w-full flex flex-col items-center gap-8 xl:gap-12">
194+
<TitleSponsorCard />
195+
196+
<div
197+
className="w-full xl:max-w-[95%] 2xl:max-w-[90%] grid grid-cols-1
198+
md:grid-cols-2 xl:grid-cols-3 gap-8 xl:gap-12"
199+
>
200+
{normalSponsorsData.map((sponsor, index) => {
201+
return <SponsorCard key={index} index={index} {...sponsor} />;
202+
})}
203+
</div>
202204
</div>
203205
</TabsContent>
204206
<TabsContent value="InKind Sponsors">
205-
<div className="flex flex-wrap justify-center gap-8 xl:gap-12 pt-8">
207+
<div
208+
className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3
209+
gap-8 xl:gap-12"
210+
>
206211
{inKindSponsorsData.map((sponsor, index) => {
207212
return <SponsorCard key={index} index={index} {...sponsor} />;
208213
})}

‎components/PrizeCard/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { Tilt } from "react-tilt";
55
const PrizeCard = ({ amount, category, default_bg, hover_bg }) => {
66
const defaultOptions = {
77
reverse: false,
8-
max: 8,
8+
max: 4,
99
perspective: 1000,
1010
scale: 1.02,
11-
speed: 1000,
11+
speed: 200,
1212
transition: true,
1313
axis: null,
1414
reset: true,

‎components/TSPrizeCard/index.jsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ const TSPrizeCard = ({
1515
}) => {
1616
const defaultOptions = {
1717
reverse: false,
18-
max: 10,
18+
max: 4,
1919
perspective: 1000,
2020
scale: 1.02,
21-
speed: 1000,
21+
speed: 200,
2222
transition: true,
2323
axis: null,
2424
reset: true,
@@ -71,9 +71,13 @@ const TSPrizeCard = ({
7171
onMouseLeave={(e) =>
7272
(e.currentTarget.style.background = "var(--default-gradient)")
7373
}
74-
>
75-
<div style={{width: "100%"}}>
76-
<Image src={logo} alt={alt} style={{objectFit: "contain", width: "100%"}} />
74+
>
75+
<div style={{ width: "100%" }}>
76+
<Image
77+
src={logo}
78+
alt={alt}
79+
style={{ objectFit: "contain", width: "100%" }}
80+
/>
7781
</div>
7882

7983
<div className="flex flex-col items-start gap-4">

‎components/TitleSponsorCard/index.jsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import logitech from "@/public/partnersPage/logitech.jpg";
5+
import { ArrowRightIcon } from "@radix-ui/react-icons";
6+
import { Tilt } from "react-tilt";
7+
8+
export default function TitleSponsorCard() {
9+
const defaultOptions = {
10+
reverse: false,
11+
max: 4,
12+
perspective: 1000,
13+
scale: 1.02,
14+
speed: 200,
15+
transition: true,
16+
axis: null,
17+
reset: true,
18+
easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
19+
};
20+
21+
const defaultGradient =
22+
"radial-gradient(100% at center, #363636 100%, #1A1A1A 27%)";
23+
const hoverGradient =
24+
"radial-gradient(371.89% 134.33% at 3.21% 1.26%,rgba(255, 255, 255, 0.07) 0%,rgba(217, 217, 217, 0.00) 100%)";
25+
26+
return (
27+
<a
28+
href="https://www.logitech.com"
29+
target="_blank"
30+
rel="noreferrer"
31+
className="w-full xl:max-w-[95%] 2xl:max-w-[90%] flex justify-center"
32+
>
33+
<Tilt options={defaultOptions}>
34+
<div
35+
className="flex flex-col md:flex-row shadow rounded-[8px]"
36+
style={{
37+
"--default-gradient": defaultGradient,
38+
"--hover-gradient": hoverGradient,
39+
}}
40+
onMouseEnter={(e) =>
41+
(e.currentTarget.style.background = "var(--hover-gradient)")
42+
}
43+
onMouseLeave={(e) =>
44+
(e.currentTarget.style.background = "var(--default-gradient)")
45+
}
46+
>
47+
<Image
48+
className="w-full md:w-[300px] lg:w-[350px] xl:w-[450px] rounded-t-[8px]
49+
md:rounded-r-none md:rounded-l-[8px]"
50+
src={logitech}
51+
alt="Logitech"
52+
placeholder="blur"
53+
/>
54+
<div
55+
className="flex flex-col justify-center items-start px-4
56+
xl:px-8 py-8 md:py-4 gap-2 rounded-b-[8px] md:rounded-l-none
57+
md:rounded-r-[8px] border-x border-b md:border-l-0 md:border-y
58+
md:border-r border-[#FFFAEF]"
59+
>
60+
<div className="w-full flex justify-between items-center">
61+
<p className="text-[1.25rem] md:text-[1.5rem]">Logitech</p>
62+
<div className="hover:bg-[#1B1B1B] mt-1 p-1">
63+
<ArrowRightIcon
64+
className="w-6 h-6 md:w-8 md:h-8 p-[2px] hover:-rotate-45
65+
transition-transform duration-300 ease-in-out"
66+
/>
67+
</div>
68+
</div>
69+
<p className="text-[#C3C3C3] text-[1.25rem] md:text-[1.5rem] font-[Inter]">
70+
Title Sponsor
71+
</p>
72+
<p className="text-[#EAECF0] font-normal font-[Inter] text-[1rem] md:text[1.125rem]">
73+
Join us to explore the innovative world of Logitech, interact with
74+
cutting edge peripherals through a dedicated booth and wait did we
75+
tell you about the amazing prizes ✨
76+
</p>
77+
</div>
78+
</div>
79+
</Tilt>
80+
</a>
81+
);
82+
}

‎components/ui/cards.jsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import { Tilt } from "react-tilt";
88
const SponsorCard = ({ index, sponsor, category, sponsorimgsrc, site }) => {
99
const defaultOptions = {
1010
reverse: false,
11-
max: 8,
11+
max: 4,
1212
perspective: 1000,
1313
scale: 1.02,
14-
speed: 1000,
14+
speed: 200,
1515
transition: true,
1616
axis: null,
1717
reset: true,
@@ -45,8 +45,7 @@ const SponsorCard = ({ index, sponsor, category, sponsorimgsrc, site }) => {
4545
<a href={site} target="_blank" rel="noreferrer">
4646
<Tilt options={defaultOptions}>
4747
<div
48-
className="w-[295px] min-w-[306px] xl:w-[350px]
49-
shadow text-white rounded-[8px]"
48+
className="w-full shadow text-white rounded-[8px]"
5049
style={{
5150
"--default-gradient": defaultGradient,
5251
"--hover-gradient": hoverGradient,
@@ -60,8 +59,7 @@ const SponsorCard = ({ index, sponsor, category, sponsorimgsrc, site }) => {
6059
>
6160
<Image
6261
src={sponsorimgsrc}
63-
className="rounded-t-[8px] w-[306px] h-[181px] xl:w-[350px]
64-
xl:h-[207px] outline-none"
62+
className="w-full h-[181px] xl:h-[207px] rounded-t-[8px] outline-none"
6563
placeholder="blur"
6664
/>
6765
<div

‎public/partnersPage/nextgen.jpg

45.6 KB
Loading

‎public/partnersPage/nextgen.webp

-4.17 KB
Binary file not shown.

‎public/partnersPage/taipy.jpg

56.7 KB
Loading

‎public/partnersPage/taipy.webp

-44.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)