diff --git a/components/CommunityPartners.tsx b/components/CommunityPartners.tsx index 99c153d..bc6cc79 100644 --- a/components/CommunityPartners.tsx +++ b/components/CommunityPartners.tsx @@ -1,5 +1,61 @@ -const CommunityPartners = () => { - return
CommunityPartners
; +import { Card } from './ui/card'; +import Image, { StaticImageData } from 'next/image'; +import fileCoinLogo from '@/public/assets/images/bronzeSponsors/filecoin.png'; +import polygonLogo from '@/public/assets/images/bronzeSponsors/polygon.png'; +import replitLogo from '@/public/assets/images/bronzeSponsors/replit.png'; + +const data = [ + fileCoinLogo, + polygonLogo, + replitLogo, + fileCoinLogo, + polygonLogo, + replitLogo, + fileCoinLogo, + polygonLogo, + replitLogo, +]; + +interface CommunityPartnersProps {} + +const CommunityPartners: React.FC = () => { + return ( +
+

+ Community Partners +

+ +
+ {data.map((item, index) => ( + + ))} +
+
+ {data.map((item, index) => ( + + ))} +
+ +
+ ); }; export default CommunityPartners; + +interface ImageCardProps { + imgUrl: StaticImageData; +} + +const ImageCard: React.FC = ({ imgUrl }) => { + return ( + + Image + + ); +}; diff --git a/components/PrizeSection.tsx b/components/PrizeSection.tsx index 6ceaf93..37a775e 100644 --- a/components/PrizeSection.tsx +++ b/components/PrizeSection.tsx @@ -1,12 +1,49 @@ -const PrizeSection = () => { +import React from 'react'; +import Image, { StaticImageData } from 'next/image'; +import FirstPrize from 'public/assets/images/prizes/1stPrize.svg'; +import SecondPrize from 'public/assets/images/prizes/2ndPrize.svg'; +import ThirdPrize from 'public/assets/images/prizes/3rdPrize.svg'; +import { Card, CardHeader, CardTitle } from './ui/card'; + +const PrizeSection: React.FC = () => { return ( -
+

Prize

-
- 🏆 Prize Pool of 25K 🏆 +
+
+ +
+ + +
+ +
+
); }; export default PrizeSection; + +interface PrizeCardProps { + imageSrc: StaticImageData; + prizeAmount: string; +} + +const PrizeCard: React.FC = ({ imageSrc, prizeAmount }) => { + return ( + + Prize + + {prizeAmount} + + + ); +}; diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/package.json b/package.json index 92a552a..102e61a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.0.2", diff --git a/pages/index.tsx b/pages/index.tsx index ecef970..3bec174 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,6 +11,7 @@ import FAQs from '@/components/FAQs'; import PrizeSection from '@/components/PrizeSection'; import Schedule from '@/components/Schedule'; import Footer from '@/components/Footer'; +import CommunityPartners from '@/components/CommunityPartners'; export default function Home() { const particlesInit = useCallback(async (engine: Engine) => { @@ -109,6 +110,7 @@ export default function Home() { +
diff --git a/public/assets/images/prizes/1stPrize.svg b/public/assets/images/prizes/1stPrize.svg new file mode 100644 index 0000000..e7382ce --- /dev/null +++ b/public/assets/images/prizes/1stPrize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/prizes/2ndPrize.svg b/public/assets/images/prizes/2ndPrize.svg new file mode 100644 index 0000000..5f05ade --- /dev/null +++ b/public/assets/images/prizes/2ndPrize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/prizes/3rdPrize.svg b/public/assets/images/prizes/3rdPrize.svg new file mode 100644 index 0000000..753fefb --- /dev/null +++ b/public/assets/images/prizes/3rdPrize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index c05b2ff..36579f5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,76 +1,96 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ["class"], + darkMode: ['class'], content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', ], theme: { container: { center: true, - padding: "2rem", + padding: '2rem', screens: { - "2xl": "1400px", + '2xl': '1400px', }, }, extend: { colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', }, secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', }, destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', }, muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', }, accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', }, popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', }, card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', }, }, borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', }, keyframes: { - "accordion-down": { + 'accordion-down': { from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, + to: { height: 'var(--radix-accordion-content-height)' }, }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, to: { height: 0 }, }, + 'fade-out1': { + '0%': { transform: 'translateX(0%)' }, + + '50%': { transform: 'translateX(-100%)' }, + '50.000001%': { transform: 'translateX(100%)' }, + + '100%': { + transform: 'translateX(0%)', + }, + }, + 'fade-out2': { + '0%': { + transform: 'translateX(0%)', + }, + '100%': { + transform: 'translateX(-200%)', + }, + }, }, animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'fade-out1': 'fade-out1 40s linear infinite', + 'fade-out2': 'fade-out2 40s linear infinite', }, }, }, - plugins: [require("tailwindcss-animate")], + plugins: [require('tailwindcss-animate')], }; diff --git a/yarn.lock b/yarn.lock index 11d8ded..c965edc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -203,6 +203,14 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-controllable-state" "1.0.1" +"@radix-ui/react-aspect-ratio@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz#d1a15d6953203e6fd7f5b569fae77c88c1880125" + integrity sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-collapsible@1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"