Sponsor Page

package.json

@@ -18,6 +18,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-lottie": "^1.2.3",
+    "saas": "^1.0.0",
     "tailwindcss": "3.3.2"
   }
 }

src/app/Swasti/SponsorCompany.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import image1 from "./Assets/1.png"
+import image2 from "./Assets/2.png"
+import image3 from "./Assets/3.png"
+import image4 from "./Assets/4.png"
+import image5 from "./Assets/5.png"
+import image6 from "./Assets/6.png"
+import "./style.css"
+import Image from 'next/image'
+const SponsorCompany = () => {
+  const images = [image1, image2, image3]
+  return (
+    <>
+    <section className='main-section'>
+
+    {
+      images.map((image, index) => {
+        return (
+          <div className='Big-dot'>
+            <div className='Mid-dot'>
+              <div className='Small-dot'>
+                <div className='container'>
+                  <div className="item">
+                    <Image src={image} alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })
+    }
+      </section>
+
+    </>
+  )
+}
+
+export default SponsorCompany

src/app/Swasti/SponsorPage.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+// import { useState, useEffect } from 'react';
+import { Component } from 'react';
+import SponsorCompany from './SponsorCompany'
+import Text from './Text'
+import "./trial.css"
+import Image from 'next/image';
+import photo from "./Assets/Group 143.svg"
+const SponsorPage = () => {
+  return (
+    <>
+      <section className='main-sponsor'>
+        <section className='first mt-5 pt-32'>
+          <section className='mb-40 '>
+            <div className='flex flex-col md:flex-row md:justify-between'>
+              <div className='md:mt-80 md:-ml-96 mb-20'>
+                <Text cat="SILVER" />
+              </div>
+              <div>
+                <Image src={photo} alt="" className=' hidden md:flex' />
+              </div>
+              <div className="md:mr-16">
+                <SponsorCompany />
+                <SponsorCompany />
+                <SponsorCompany />
+              </div>
+            </div>
+          </section>
+        </section>
+        <section className='md:hidden'>
+          <div className='flex flex-col md:flex-row md:justify-between'>
+            <div className='md:mt-80 md:-ml-4 mb-20 '>
+              <Text cat="BRONZE" />
+            </div>
+            <div className="md:-ml-96">
+              <SponsorCompany />
+              <SponsorCompany />
+              <SponsorCompany />
+            </div>
+          </div>
+        </section>
+        <section className='second mt-5 pt-32'>
+        <section className='hidden md:flex'>
+          <div className='flex flex-col md:flex-row md:justify-between'>
+            <div className="md:ml-16">
+              <SponsorCompany />
+              <SponsorCompany />
+              <SponsorCompany />
+            </div>
+            <div className=''>
+            <Image src={photo} alt="" className='rotate-180' />
+
+            </div>
+            <div className='md:mt-80 md:ml-4 mb-20'>
+              <Text cat="BRONZE" />
+            </div>
+          </div>
+        </section>
+        </section>
+      </section>
+    </>
+  )
+}
+export default SponsorPage;

src/app/Swasti/Text.css

@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto&display=swap');
+
+.text {
+    /* margin: 0;
+    padding: 0; */
+    /* position: absolute; */
+    /* transform: rotate(-90deg); */
+    color: #CA40CD;
+    font-size: 5rem;
+    /* font-family: 'Poppins', sans-serif; */
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+}

src/app/Swasti/Text.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import "./Text.css"
+const Text = ({cat}) => {
+  return (
+    <div className='text md:-rotate-90 flex justify-center font-light md:w-90 w-[177%]'>
+      {`${cat}`} SPONSOR
+    </div>
+  )
+}
+
+export default Text

src/app/Swasti/style.css

@@ -0,0 +1,62 @@
+body{
+ background-color: black;
+}
+.main-section{
+    display: flex;
+    flex-direction: row;
+    /* justify-content: center; */
+    align-items: center;
+ }
+.Big-dot{
+width: 16rem;
+height: 16rem;
+margin:1.25rem;
+flex-shrink: 0;
+display: flex;
+justify-content: center;
+align-items: center;
+border-radius: 16.031rem;
+border: 0.466rem dashed #06EBE5;
+}
+.Mid-dot{
+    width:12.4rem;
+    height: 12.4rem;
+    /* transform: rotate(); */
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 14.4rem;
+    border: 0.04rem dashed #06EBE5;
+}
+.Small-dot{
+    width: 13.16rem;
+    height: 13.16rem;
+    /* transform: rotate(); */
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 13.514rem;
+   border: .04rem dashed #06EBE5;
+}
+.container{
+    display: flex;
+    width: 10.6rem;
+    height: 10.75rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 21.966px;
+    flex-shrink: 0;
+    border-radius:18.75rem;
+    background: #FFF;
+}
+.item{
+width: 6.0625rem;
+height: 6.06rem;
+flex-shrink: 0;
+display: flex;
+justify-content: center;
+align-items: center;
+}

src/app/Swasti/trial.css

@@ -0,0 +1,18 @@
+.main-sponsor{
+    opacity: 0.7599999904632568;
+    background: url("./Assets/My\ project\ 1.png"), cover no-repeat;
+    background-image: url("./Assets/My\ project\ 1.png");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+.first{
+    background-image:url("./Assets/border.png");
+    /* background-position: center; */
+    /* background-size: cover; */
+    background-repeat: no-repeat;
+}
+.second{
+   background-image: url("./Assets/border2.png");
+   background-repeat: no-repeat;
+}

src/app/page.js

@@ -1,7 +1,7 @@
 "use client";
 import Player from "@/components/Player";
 import { useState } from "react";
-
+import SponsorPage from "./Swasti/SponsorPage";
 export default function Home() {
   const [counter, setCounter] = useState(0);
 
@@ -18,6 +18,7 @@ export default function Home() {
   };
 
   return (
+    <>
     <main className="flex min-h-screen min-w-screen flex-col items-center justify-center p-12 xl:p-0 md:text-2xl bg-blue-100">
       <div className="drop-shadow-xl flex-col flex gap-10 items-center ">
         <Player />
@@ -60,5 +61,7 @@ export default function Home() {
         </a>
       </div>
     </main>
+    <SponsorPage/>
+    </>
   );
-}
+}

src/components/Player.jsx

@@ -1,3 +1,4 @@
+
 "use client"
 
 import Lottie from "react-lottie";