marque and map section

package.json

@@ -12,8 +12,11 @@
     "@tabler/icons-react": "^2.46.0",
     "clsx": "^2.1.0",
     "next": "^14.0.4",
+    "framer-motion": "^11.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-fast-marquee": "^1.6.3",
+    "react-icons": "^5.0.1",
     "swiper": "^11.0.5",
     "tailwind-merge": "^2.2.1"
   },
@@ -27,5 +30,9 @@
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
-  }
+  },
+  "main": "index.js",
+  "repository": "https://github.com/Kaarthik-07/frontend.git",
+  "author": "Kaarthik-07 <57kaarthikj@gmail.com>",
+  "license": "MIT"
 }

src/components/CardSection.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+
+const CardButton = () => {
+  const itemVariants = {
+    hidden: { opacity: 0, x: -100 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+
+  return (
+    <section className="flex justify-evenly ">
+      <motion.section
+        initial="hidden"
+        animate="visible"
+        variants={itemVariants}
+        className=""
+      >
+
+        <ul className="list-disc ml-6">
+        <li className="text-4xl font-bold  p-4 m-4 md:text-3xl lg:text-2xl list-none">Phone</li>
+            <li className="text-md m-2 lg:text-lg p-2"><a href="/">M Gayathrie (Event Queries)</a></li>
+            <li className="text-md m-2 lg:text-lg p-2"><a href="/">Shyam (Sponsorship Queries)</a></li>
+            <li className="text-md m-2 lg:text-lg p-2"><a href="/">V Akshya Preetha (Pro Shows Queries)</a></li>
+            <li className="text-md m-2 lg:text-lg p-2"><a href =" https://www.bitspace.org.in/">BitSpace</a></li>
+        </ul>
+      </motion.section>
+
+      <motion.section
+        initial="hidden"
+        animate="visible"
+        variants={itemVariants}
+        className=""
+      >
+        <h1 className="text-4xl font-bold p-4 mt-4 mr-12 sm:text-md hidden md:block lg:text-2xl pl-24">Useful Links</h1>
+        <ul className="list-none flex justify-center flex-col mt-2">
+            <li className="text-sm hidden md:block lg:text-lg pl-24 m-2"><a href="/">Opening Soon</a></li>
+            <li className="text-sm hidden md:block lg:text-lg pl-24 m-2"><a href="/">Events</a></li>
+            <li className="text-sm hidden md:block lg:text-lg pl-24 m-2"><a href="/">Credits</a></li>
+            <li className="text-sm hidden md:block lg:text-lg pl-24 m-2"><a href="/">Pro Harder</a></li>
+        </ul>
+      </motion.section>
+    </section>
+  );
+};
+
+export default CardButton;

src/components/ContentSwitch.tsx

@@ -0,0 +1,35 @@
+"use client";
+import ToggleButton from "./ToggleButton";
+import CardButton from "./CardSection";
+import { useState } from "react";
+
+const ContentSwitcher = () => {
+  const [b1, setB1] = useState(true);
+  const [b2, setB2] = useState(false);
+
+  return (
+    <>
+    <section >
+    <h1 className="text-4xl m-4 text-cream relative ml-12 md:ml-28 lg:ml-24" >
+        Location
+      </h1>
+      </section>
+      <section className="flex justify-center items-center p-6">
+        <section className="md:w-[80%] w-[80%] h-1/5 bg-transparent border-2 border-solid border-white border-opacity-20 backdrop-filter backdrop-blur-lg shadow-lg text-white rounded-md relative">
+          <section className="m-10">
+            {b1 && <ToggleButton />}
+            {b2 && <CardButton />}
+            <section className="flex justify-center m-4">
+              <button className="left-10 w-4 h-4 top-10 rounded-full border border-gray-300 mr-4 transition duration-300 ease-in-out hover:bg-gray-100 focus:bg-white focus:outline-none focus:ring focus:ring-gray-300" onClick={() => {setB1(true); setB2(false);}}>
+              </button>
+              <button className="w-4 h-4 rounded-full border border-gray-300 mr-4 transition duration-300 ease-in-out hover:bg-gray-100 focus:bg-white focus:outline-none focus:ring focus:ring-gray-300" onClick={() => {setB2(true); setB1(false);}}>
+              </button>
+            </section>
+          </section>
+        </section>
+      </section>
+    </>
+  );
+};
+
+export default ContentSwitcher;

src/components/Main/index.tsx

@@ -9,6 +9,9 @@ import {
   IconPhone,
 } from "@tabler/icons-react";
 import { Button } from "@/components";
+import ChooseCarousel from '../Marquee'
+import ContentSwitcher from "../ContentSwitch";
+import motion from 'framer-motion'
 
 const Main = () => {
   return (
@@ -110,6 +113,10 @@ const Main = () => {
             testament to the unfathomable wonders of the creative mind.
           </p>
         </section>
+        <section>
+        <ChooseCarousel/>
+        <ContentSwitcher/>
+        </section>
 
         <section className="w-full flex items-center justify-center border-y  border-cream">
           <section className="p-10 py-24">
@@ -174,6 +181,8 @@ const Main = () => {
           <h1>Website By Team :bitspace</h1>
         </section>
       </section>
+
+
     </main>
   );
 };

src/components/MapCard.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+
+const Accordion = () => {
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const mouseXSpring = useSpring(x);
+  const mouseYSpring = useSpring(y);
+
+  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["17.5deg", "-17.5deg"]);
+  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-17.5deg", "17.5deg"]);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = (e.target as HTMLDivElement).getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const xPct = mouseX / rect.width - 0.5;
+    const yPct = mouseY / rect.height - 0.5;
+    x.set(xPct);
+    y.set(yPct);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className="flex justify-center items-center"
+    >
+      <motion.div
+        style={{
+          rotateY,
+          rotateX,
+          transformStyle: "preserve-3d",
+        }}
+      >
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.0036733731995!2d80.04049737607724!3d12.971616514875924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52f4d07355bab5%3A0xbb6063169c4ed4d9!2sChennai%20Institute%20of%20Technology!5e0!3m2!1sen!2sin!4v1706870803390!5m2!1sen!2sin"
+          allowFullScreen
+          loading="lazy"
+          referrerPolicy="no-referrer-when-downgrade"
+          className="h-full w-full min-w-[200px] sm:w-96 md:w-96 lg:w-[350px] xl:w-[500px] 2xl:w-[600px] sm:h-96 md:h-96 lg:h-[350px] xl:h-[250px] 2xl:h-[400px]"
+        ></iframe>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Accordion;

src/components/Marquee.tsx

@@ -0,0 +1,154 @@
+"use client"
+import React, { useState } from "react";
+import Marquee from "react-fast-marquee";
+import {  motion } from "framer-motion";
+import Image from "next/image";
+
+
+const Images = [
+    {
+      id: 1,
+      src :'/coca-cola.webp',
+      alt: "Image 1",
+      width: 400, 
+      height: 250,
+    },
+  {
+    id: 2,
+    src:"/rapido.webp",
+    alt: "Image 2",
+    width: 400, 
+    height: 250,
+  },
+  {
+    id: 3,
+    src:"/hornbill.webp",
+    alt: "Image 3",
+    width: 400, 
+    height: 250,
+  },
+  {
+    id: 4,
+    src: "/little-talks.webp",
+    alt: "Image 4",
+    width: 400, 
+    height: 250,
+  },
+  {
+    id: 5,
+    src:"/rela-hospital.webp",
+    alt:"Image 5",
+    width: 400, 
+    height: 250,
+  },
+  {
+    id: 6,
+    src:"/ace-sports.webp",
+    alt:"Image 6",
+    width: 400, 
+    height: 250,
+  },
+
+  {
+    id: 7,
+    src:"/ags-cinema.webp",
+    alt:"Image 7",
+    width: 400, 
+    height: 250,
+  },
+
+  {
+    id: 8,
+    src:"/anderson-automotive.webp",
+    alt:"Image 8",
+    width: 400, 
+    height: 250,
+  },
+
+
+  {
+    id: 9,
+    src:"/cadbury.webp",
+    alt:"Image 9",
+    width: 400, 
+    height: 250,
+  },
+
+  {
+    id: 10,
+    src:"/gokul-autotech.webp",
+    alt:"Image 10",
+    width: 400, 
+    height: 250,
+  },
+
+
+
+];
+
+
+const ChooseCarousel = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const imageVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    show: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <>
+      <h1 className="text-4xl text-cream relative ml-12 md:ml-28 lg:ml-24" >
+        Sponsors
+      </h1>
+      <div
+        className="content flex justify-center overflow-x-hidden w-full"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+
+        <div className="w-9/12 max-w-70vw p-6"> 
+          <Marquee speed={500} pauseOnHover className="flex justify-center items-center">          
+            {Images.map((image) => (
+              <motion.div
+                key={image.id}
+                className="border-2  border-white border-opacity-20 shadow-lg text-white rounded-md relative my-0 mx-2"
+                variants={imageVariants}
+                initial="hidden"
+                animate="show"
+
+              >
+
+                <Image
+                  src={image.src}
+                  alt={image.alt}
+                  width={image.width} 
+                  height={image.height}
+                  className={`w-64 h-40 rounded-lg ${isHovered ? 'opacity-50' : 'opacity-100'} transition-opacity duration-300 ease-in-out bg-white`}
+                />
+              </motion.div>
+            ))}
+          </Marquee>
+
+        </div>
+      </div>
+    </>
+  );
+};
+
+
+export default ChooseCarousel;
+

src/components/NavBar.tsx

@@ -15,7 +15,7 @@ const NavBar = () => {
   };
 
   return (
-    <nav className="flex justify-between items-center h-16 fixed z-50 w-full p-8 pt-16 md:p-20">
+    <nav className="flex justify-between items-center h-16 fixed z-50 w-full p-8 pt-16 md:p-20 res">
       <a href="#hero">
         <Image
           width={48}