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/CardButtonn.tsx

@@ -0,0 +1,62 @@
+import { motion } from "framer-motion";
+import { CSSProperties } from "react";
+import './app.css'
+const CardButton = () => {
+  const itemVariants = {
+    hidden: { opacity: 0, x: -100 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+
+  return (
+    <>
+
+          <div className="flex justify-evenly">
+          <motion.div
+            className=""
+            initial="hidden"
+            animate="visible"
+            variants={itemVariants}
+            style ={{margin:'5%'}}
+
+          >
+            <h1 className="text-2xl md:text-5xl font-bold mb-4 " >Phone :</h1>
+
+            <br />
+            <p className="res text-md lg:text-base"> M Gayathrie(Event Queries)</p>
+            <br />
+
+            <p className="res text-md lg:text-base ">. Shyam (Sponsorship Queries),</p>
+            <br />
+
+            <p className="res text-md lg:text-base">. V Akshya Preetha (Pro Shows Queries)</p>
+            <br />
+
+            <p className="res text-md lg:text-base">: BitSpace</p>
+
+          </motion.div>
+          <motion.div
+            className=" right-10 top-10 hidden md:block "
+            initial="hidden"
+            animate="visible"
+            variants={itemVariants}
+            style ={{margin:'5%'}}
+          >
+
+            <h1 className="text-2xl md:font-bold mb-4">Useful Links</h1>
+
+            <br />
+            <p className="text-sm md:text-xl p-4 hidden">Opening Soon</p>
+            <p className="text-sm md:text-xl p-4" >Events</p>
+            <p className="text-sm md:text-xl p-4">Credits</p>
+            <p className="text-sm md:text-xl p-4">Pro Harder</p> 
+          </motion.div>
+
+       </div> 
+
+    </>
+  );
+};
+//absolute left-20 top-20 w-full
+//absolute left-14 top-20
+//absolute right-14 top-20"
+export default CardButton;

src/components/ContentSwitch.tsx

@@ -0,0 +1,51 @@
+"use client"
+import ToggleButton from "./ToggleButton";
+import CardButton from "./CardButtonn";
+import { useState } from "react";
+import { CSSProperties } from "react";
+const ContentSwitcher = () => {
+  const [showCardButton, setShowCardButton] = useState(true);
+
+  const toggleContent = () => {
+    setShowCardButton(!showCardButton);
+    console.log("it works")
+  };
+  const style : CSSProperties = {
+    display : "flex",
+    flexDirection : "column",
+    alignItems : "center"
+  }
+  return (
+    <>
+    <h1 className="text-4xl font-semibold pb-4 ml-20 text-white relative">
+                Location
+                <span className="absolute bottom-0 left-0 bg-white bg-opacity-20 h-1 w-11/12 rounded-full border-white"></span>
+    </h1>
+    <br/>
+    <br />
+    <br />
+    <div style={style}>
+
+ <div className="w-2/3 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">
+
+    <div className="F" >
+
+
+          {showCardButton ? <ToggleButton /> : <CardButton />}
+      <div className="flex justify-center">
+      <button className=" left-10 w-8 h-8 rounded-full border border-gray-300 mr-4 transition duration-300 ease-in-out hover:bg-gray-100" onClick={toggleContent}>
+
+      </button>
+      <button className="w-8 h-8 rounded-full border border-gray-300 mr-4 transition duration-300 ease-in-out hover:bg-gray-100" onClick={toggleContent}>
+      </button>
+      </div>
+    </div>
+
+  </div>
+  </div>
+  <br/>
+    </>
+  );
+};
+
+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 CardButton from "../CardButtonn";
+import ContentSwitcher from "../ContentSwitch";
 
 const Main = () => {
   return (
@@ -110,6 +113,8 @@ const Main = () => {
             testament to the unfathomable wonders of the creative mind.
           </p>
         </section>
+        <ChooseCarousel/>
+      <ContentSwitcher/>
 
         <section className="w-full flex items-center justify-center border-y  border-cream">
           <section className="p-10 py-24">
@@ -174,6 +179,8 @@ const Main = () => {
           <h1>Website By Team :bitspace</h1>
         </section>
       </section>
+
+
     </main>
   );
 };

src/components/Marquee.tsx

@@ -0,0 +1,115 @@
+"use client"
+import React, { useState } from "react";
+import Marquee from "react-fast-marquee";
+import { motion } from "framer-motion";
+
+
+const Images = [
+  {
+    id: 1,
+    src :'https://raw.githubusercontent.com/jesvijonathan/Takshashila/master/static/sponsors/Group%20298%20(1).webp',
+    alt: "Image 1",
+  },
+  {
+    id: 2,
+    src:"https://raw.githubusercontent.com/jesvijonathan/Takshashila/master/static/sponsors/Group%20299%20(1)%201.webp",
+    alt: "Image 2",
+  },
+  {
+    id: 3,
+    src:"https://raw.githubusercontent.com/jesvijonathan/Takshashila/master/static/sponsors/Group%20299sss.webp",
+    alt: "Image 3",
+  },
+  {
+    id: 4,
+    src: "https://raw.githubusercontent.com/jesvijonathan/Takshashila/master/static/sponsors/Group%2029add9.webp",
+    alt: "Image 4",
+  },
+  {
+    id: 5,
+    src:"https://raw.githubusercontent.com/jesvijonathan/Takshashila/master/static/sponsors/Group%2029adfff9.webp",
+    alt:"Image 5",
+  },
+
+  // Add other image objects
+];
+
+
+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 font-semibold pb-4 ml-20 text-white relative">
+        Sponsors
+        <span className="absolute bottom-0 left-0 bg-white bg-opacity-20 h-1 w-11/12 rounded-full border-white"></span>
+
+      </h1>
+
+      <br />
+      <div
+        className="content"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          overflowX: "hidden",
+          width: "100%",
+        }}
+      >
+
+        <div style={{ width: "70%", maxWidth: "70vw" }}> {/* Set width to half of the viewport */}
+          <Marquee speed={700} pauseOnHover style={{ display: "flex", justifyContent: "center" }}>          
+            {Images.map((image) => (
+              <motion.div
+                key={image.id}
+                className="images"
+                variants={imageVariants}
+                initial="hidden"
+                animate="show"
+                style={{ margin: "0 10px" }} // for Adjusting margin between images
+              >
+
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  style={{
+                    width: "400px", // Set width of the image
+                    height: "250px", // Set height of the image
+                    borderRadius: "15px",
+                    opacity: isHovered ? 0.5 : 1,
+                    transition: "opacity 0.3s ease",
+                  }}
+                />
+              </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}

src/components/ToggleButton.tsx

@@ -0,0 +1,47 @@
+"use client"
+import { useState } from 'react';
+import { CSSProperties } from 'react';
+import './app.css'
+import { motion } from "framer-motion";
+import Accordion from './accordion';
+const ToggleButton = () =>{
+   const itemVariants = {
+    hidden: { opacity: 0, x: -100 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+    return (
+        <>
+
+
+            {/* <div className="flex justify-center items-center h-screen"> */}
+        <div className="defaultStyle" style={{}}>             
+                 <div className="" style={{margin:'2%'}}>
+                        <Accordion />
+                </div> 
+
+
+            <motion.div
+            className=""
+            initial="hidden"
+            animate="visible"
+            variants={itemVariants}
+            style={{margin : '5%'}}
+          >
+            <h1 className="text-4xl font-bold mb-4">Chennai Institute Of Technology</h1>
+            <br />
+            <br />
+            <p className="hidden lg:block">SH-113, Sarathy Nagar,</p>
+            <p>Pudupedu Kundrathur,</p>
+            <p>Sriperumbudur Main Road,</p>
+            <p>Chennai, Tamil Nadu</p>
+            <p>PIN: 600069</p>
+          </motion.div>
+        </div>
+
+        </>
+    );
+};
+//"absolute left-20 top-20 w-full
+//absolute right-14 top-20
+
+export default ToggleButton;