Skip to content

Commit adeb1c4

Browse files
Balaganesh003Balaganesh003
committed
added the Community Partners • Marquee Effect #6 
1 parent 2d30529 commit adeb1c4

File tree

6 files changed

+130
-38
lines changed

6 files changed

+130
-38
lines changed

‎components/CommunityPartners.tsx‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,61 @@
1-
const CommunityPartners = () => {
2-
return <div>CommunityPartners</div>;
1+
import { Card } from './ui/card';
2+
import Image, { StaticImageData } from 'next/image';
3+
import fileCoinLogo from '@/public/assets/images/bronzeSponsors/filecoin.png';
4+
import polygonLogo from '@/public/assets/images/bronzeSponsors/polygon.png';
5+
import replitLogo from '@/public/assets/images/bronzeSponsors/replit.png';
6+
7+
const data = [
8+
fileCoinLogo,
9+
polygonLogo,
10+
replitLogo,
11+
fileCoinLogo,
12+
polygonLogo,
13+
replitLogo,
14+
fileCoinLogo,
15+
polygonLogo,
16+
replitLogo,
17+
];
18+
19+
interface CommunityPartnersProps {}
20+
21+
const CommunityPartners: React.FC<CommunityPartnersProps> = () => {
22+
return (
23+
<div id="communitypartner" className="w-screen max-w-6xl mx-auto px-5 pb-5">
24+
<h1 className="text-center text-3xl font-bold py-5">
25+
Community Partners
26+
</h1>
27+
<Card className="w-full h-[160px] overflow-hidden flex gap-[1rem] bg-secondary">
28+
<div className="flex h-[160px] flex-shrink-0 items-center justify-around whitespace-nowrap animate-fade-out1 gap-[1rem] ">
29+
{data.map((item, index) => (
30+
<ImageCard imgUrl={item} key={index} />
31+
))}
32+
</div>
33+
<div className="flex h-[160px] flex-shrink-0 items-center justify-around whitespace-nowrap animate-fade-out2 gap-[1rem]">
34+
{data.map((item, index) => (
35+
<ImageCard imgUrl={item} key={index} />
36+
))}
37+
</div>
38+
</Card>
39+
</div>
40+
);
341
};
442

543
export default CommunityPartners;
44+
45+
interface ImageCardProps {
46+
imgUrl: StaticImageData;
47+
}
48+
49+
const ImageCard: React.FC<ImageCardProps> = ({ imgUrl }) => {
50+
return (
51+
<Card className="border-0 bg-transparent">
52+
<Image
53+
src={imgUrl}
54+
alt="Image"
55+
className="rounded-md object-fit object-center h-[160px] w-[160px]"
56+
width={160}
57+
height={160}
58+
/>
59+
</Card>
60+
);
61+
};

‎components/ui/aspect-ratio.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
2+
3+
const AspectRatio = AspectRatioPrimitive.Root
4+
5+
export { AspectRatio }

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@radix-ui/react-accordion": "^1.1.2",
13+
"@radix-ui/react-aspect-ratio": "^1.0.3",
1314
"@radix-ui/react-dialog": "^1.0.4",
1415
"@radix-ui/react-icons": "^1.3.0",
1516
"@radix-ui/react-slot": "^1.0.2",

‎pages/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import FAQs from '@/components/FAQs';
1111
import PrizeSection from '@/components/PrizeSection';
1212
import Schedule from '@/components/Schedule';
1313
import Footer from '@/components/Footer';
14+
import CommunityPartners from '@/components/CommunityPartners';
1415

1516
export default function Home() {
1617
const particlesInit = useCallback(async (engine: Engine) => {
@@ -109,6 +110,7 @@ export default function Home() {
109110
<OurSponsors />
110111
<Schedule />
111112
<PrizeSection />
113+
<CommunityPartners />
112114
<FAQs />
113115
<Footer />
114116
</div>

‎tailwind.config.ts‎

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,96 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3-
darkMode: ["class"],
3+
darkMode: ['class'],
44
content: [
5-
"./pages/**/*.{ts,tsx}",
6-
"./components/**/*.{ts,tsx}",
7-
"./app/**/*.{ts,tsx}",
8-
"./src/**/*.{ts,tsx}",
5+
'./pages/**/*.{ts,tsx}',
6+
'./components/**/*.{ts,tsx}',
7+
'./app/**/*.{ts,tsx}',
8+
'./src/**/*.{ts,tsx}',
99
],
1010
theme: {
1111
container: {
1212
center: true,
13-
padding: "2rem",
13+
padding: '2rem',
1414
screens: {
15-
"2xl": "1400px",
15+
'2xl': '1400px',
1616
},
1717
},
1818
extend: {
1919
colors: {
20-
border: "hsl(var(--border))",
21-
input: "hsl(var(--input))",
22-
ring: "hsl(var(--ring))",
23-
background: "hsl(var(--background))",
24-
foreground: "hsl(var(--foreground))",
20+
border: 'hsl(var(--border))',
21+
input: 'hsl(var(--input))',
22+
ring: 'hsl(var(--ring))',
23+
background: 'hsl(var(--background))',
24+
foreground: 'hsl(var(--foreground))',
2525
primary: {
26-
DEFAULT: "hsl(var(--primary))",
27-
foreground: "hsl(var(--primary-foreground))",
26+
DEFAULT: 'hsl(var(--primary))',
27+
foreground: 'hsl(var(--primary-foreground))',
2828
},
2929
secondary: {
30-
DEFAULT: "hsl(var(--secondary))",
31-
foreground: "hsl(var(--secondary-foreground))",
30+
DEFAULT: 'hsl(var(--secondary))',
31+
foreground: 'hsl(var(--secondary-foreground))',
3232
},
3333
destructive: {
34-
DEFAULT: "hsl(var(--destructive))",
35-
foreground: "hsl(var(--destructive-foreground))",
34+
DEFAULT: 'hsl(var(--destructive))',
35+
foreground: 'hsl(var(--destructive-foreground))',
3636
},
3737
muted: {
38-
DEFAULT: "hsl(var(--muted))",
39-
foreground: "hsl(var(--muted-foreground))",
38+
DEFAULT: 'hsl(var(--muted))',
39+
foreground: 'hsl(var(--muted-foreground))',
4040
},
4141
accent: {
42-
DEFAULT: "hsl(var(--accent))",
43-
foreground: "hsl(var(--accent-foreground))",
42+
DEFAULT: 'hsl(var(--accent))',
43+
foreground: 'hsl(var(--accent-foreground))',
4444
},
4545
popover: {
46-
DEFAULT: "hsl(var(--popover))",
47-
foreground: "hsl(var(--popover-foreground))",
46+
DEFAULT: 'hsl(var(--popover))',
47+
foreground: 'hsl(var(--popover-foreground))',
4848
},
4949
card: {
50-
DEFAULT: "hsl(var(--card))",
51-
foreground: "hsl(var(--card-foreground))",
50+
DEFAULT: 'hsl(var(--card))',
51+
foreground: 'hsl(var(--card-foreground))',
5252
},
5353
},
5454
borderRadius: {
55-
lg: "var(--radius)",
56-
md: "calc(var(--radius) - 2px)",
57-
sm: "calc(var(--radius) - 4px)",
55+
lg: 'var(--radius)',
56+
md: 'calc(var(--radius) - 2px)',
57+
sm: 'calc(var(--radius) - 4px)',
5858
},
5959
keyframes: {
60-
"accordion-down": {
60+
'accordion-down': {
6161
from: { height: 0 },
62-
to: { height: "var(--radix-accordion-content-height)" },
62+
to: { height: 'var(--radix-accordion-content-height)' },
6363
},
64-
"accordion-up": {
65-
from: { height: "var(--radix-accordion-content-height)" },
64+
'accordion-up': {
65+
from: { height: 'var(--radix-accordion-content-height)' },
6666
to: { height: 0 },
6767
},
68+
'fade-out1': {
69+
'0%': { transform: 'translateX(0%)' },
70+
71+
'50%': { transform: 'translateX(-100%)' },
72+
'50.000001%': { transform: 'translateX(100%)' },
73+
74+
'100%': {
75+
transform: 'translateX(0%)',
76+
},
77+
},
78+
'fade-out2': {
79+
'0%': {
80+
transform: 'translateX(0%)',
81+
},
82+
'100%': {
83+
transform: 'translateX(-200%)',
84+
},
85+
},
6886
},
6987
animation: {
70-
"accordion-down": "accordion-down 0.2s ease-out",
71-
"accordion-up": "accordion-up 0.2s ease-out",
88+
'accordion-down': 'accordion-down 0.2s ease-out',
89+
'accordion-up': 'accordion-up 0.2s ease-out',
90+
'fade-out1': 'fade-out1 40s linear infinite',
91+
'fade-out2': 'fade-out2 40s linear infinite',
7292
},
7393
},
7494
},
75-
plugins: [require("tailwindcss-animate")],
95+
plugins: [require('tailwindcss-animate')],
7696
};

‎yarn.lock‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,14 @@
203203
"@radix-ui/react-primitive" "1.0.3"
204204
"@radix-ui/react-use-controllable-state" "1.0.1"
205205

206+
"@radix-ui/react-aspect-ratio@^1.0.3":
207+
version "1.0.3"
208+
resolved "https://registry.yarnpkg.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz#d1a15d6953203e6fd7f5b569fae77c88c1880125"
209+
integrity sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==
210+
dependencies:
211+
"@babel/runtime" "^7.13.10"
212+
"@radix-ui/react-primitive" "1.0.3"
213+
206214
"@radix-ui/[email protected]":
207215
version "1.0.3"
208216
resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"

0 commit comments

Comments
 (0)