Balaganesh #5 added the prize section

components/CommunityPartners.tsx

@@ -1,5 +1,61 @@
-const CommunityPartners = () => {
-  return <div>CommunityPartners</div>;
+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<CommunityPartnersProps> = () => {
+  return (
+    <div id="communitypartner" className="w-screen max-w-6xl mx-auto px-5 pb-5">
+      <h1 className="text-center text-3xl font-bold py-5">
+        Community Partners
+      </h1>
+      <Card className="w-full h-[160px] overflow-hidden flex gap-[1rem] bg-secondary">
+        <div className="flex h-[160px] flex-shrink-0 items-center justify-around whitespace-nowrap  animate-fade-out1 gap-[1rem] ">
+          {data.map((item, index) => (
+            <ImageCard imgUrl={item} key={index} />
+          ))}
+        </div>
+        <div className="flex h-[160px] flex-shrink-0 items-center justify-around whitespace-nowrap  animate-fade-out2 gap-[1rem]">
+          {data.map((item, index) => (
+            <ImageCard imgUrl={item} key={index} />
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
 };
 
 export default CommunityPartners;
+
+interface ImageCardProps {
+  imgUrl: StaticImageData;
+}
+
+const ImageCard: React.FC<ImageCardProps> = ({ imgUrl }) => {
+  return (
+    <Card className="border-0 bg-transparent">
+      <Image
+        src={imgUrl}
+        alt="Image"
+        className="rounded-md object-fit object-center h-[160px] w-[160px]"
+        width={160}
+        height={160}
+      />
+    </Card>
+  );
+};

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 (
-    <div id="prize" className="w-screen py-10 max-w-6xl mx-auto px-5 ">
+    <div id="prize" className="w-screen py-10 max-w-6xl mx-auto px-5">
       <h1 className="text-center text-3xl font-bold py-5">Prize</h1>
-      <div className="bg-secondary text-2xl  animate-pulse  rounded-md w-full h-96 flex items-center justify-center font-bold md:text-4xl">
-        🏆 Prize Pool of 25K 🏆
+      <div className="bg-secondary text-2xl animate-pulse rounded-md w-full flex flex-col md:flex-row justify-center font-bold md:text-4xl items-center md:items-end gap-[1rem] md:gap-0">
+        <div className="md:hidden">
+          <PrizeCard imageSrc={FirstPrize} prizeAmount="₹ 20,000" />
+        </div>
+
+        <PrizeCard imageSrc={SecondPrize} prizeAmount="₹ 10,000" />
+        <div className="hidden md:block">
+          <PrizeCard imageSrc={FirstPrize} prizeAmount="₹ 20,000" />
+        </div>
+        <PrizeCard imageSrc={ThirdPrize} prizeAmount="₹ 5,000" />
       </div>
     </div>
   );
 };
 
 export default PrizeSection;
+
+interface PrizeCardProps {
+  imageSrc: StaticImageData;
+  prizeAmount: string;
+}
+
+const PrizeCard: React.FC<PrizeCardProps> = ({ imageSrc, prizeAmount }) => {
+  return (
+    <Card className="bg-transparent max-w-sm">
+      <Image
+        src={imageSrc}
+        alt="Prize"
+        className={`object-fit object-center ${
+          FirstPrize == imageSrc ? 'w-[100%]' : 'w-[75%]'
+        } mx-auto`}
+      />
+      <CardHeader>
+        <CardTitle className="text-center text-[3rem]">{prizeAmount}</CardTitle>
+      </CardHeader>
+    </Card>
+  );
+};

components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

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",

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() {
         <OurSponsors />
         <Schedule />
         <PrizeSection />
+        <CommunityPartners />
         <FAQs />
         <Footer />
       </div>

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')],
 };

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"