From d662840cfe33ed453c96586d7a968cd7ec79d5b7 Mon Sep 17 00:00:00 2001
From: omkarspace <omkarspace@gmail.com>
Date: Fri, 1 Nov 2024 23:09:16 +0530
Subject: [PATCH] formatting

---
 src/App.jsx                        | 100 +++++++++++++-------------
 src/components/About_Us.jsx        |  47 +++++++-----
 src/components/Cards.jsx           |  22 +++---
 src/components/CustomCursor.jsx    |  16 ++---
 src/components/Eyes.jsx            |  54 ++++++++------
 src/components/Featured.jsx        |  82 +++++++++++----------
 src/components/Footer.jsx          |  56 ++++++++++++---
 src/components/Marquee.jsx         |  18 ++---
 src/components/Navbar.jsx          |  50 ++++++++-----
 src/components/Preloader/index.jsx | 112 ++++++++++++++++++-----------
 10 files changed, 339 insertions(+), 218 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 25fd85d..cd4837a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,21 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { AnimatePresence , motion} from 'framer-motion';
-import Navbar from './components/Navbar';
-import LandingPage from './pages/LandingPage';
-import Marquee from './components/Marquee';
-import About_Us from './components/About_Us';
-import Eyes from './components/Eyes';
-import Featured from './components/Featured';
-import Cards from './components/Cards';
-import Footer from './components/Footer';
-import Preloader from './components/Preloader';
-import LocomotiveScroll from 'locomotive-scroll';
-import 'locomotive-scroll/dist/locomotive-scroll.css';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import NotFoundPage from './components/NotFoundPage';
-import { logPageView } from './analytics';
+import React, { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import Navbar from "./components/Navbar";
+import LandingPage from "./pages/LandingPage";
+import Marquee from "./components/Marquee";
+import About_Us from "./components/About_Us";
+import Eyes from "./components/Eyes";
+import Featured from "./components/Featured";
+import Cards from "./components/Cards";
+import Footer from "./components/Footer";
+import Preloader from "./components/Preloader";
+import LocomotiveScroll from "locomotive-scroll";
+import "locomotive-scroll/dist/locomotive-scroll.css";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import NotFoundPage from "./components/NotFoundPage";
+import { logPageView } from "./analytics";
 import Contact from "./pages/Contact";
-import CustomCursor from './components/CustomCursor';
+import CustomCursor from "./components/CustomCursor";
 
 function App() {
   const locomotiveScroll = new LocomotiveScroll();
@@ -29,7 +29,7 @@ function App() {
   }, []);
 
   return (
-    <div className='scroll-container w-full min-h-screen cursor-none '>
+    <div className="scroll-container w-full min-h-screen cursor-none ">
       <AnimatePresence mode="wait">
         {isLoading ? (
           <motion.div
@@ -37,41 +37,41 @@ function App() {
             initial={{ opacity: 1 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 1 }}
-            transition={{ duration: 1}}
+            transition={{ duration: 1 }}
           >
             <Preloader />
           </motion.div>
-      ) : (
-        <>
-          {/* Add Custom Cursor here */}
-          <CustomCursor />
-          
-          <Router>
-            <Navbar />
-            <Routes>
-              {/* Home Route */}
-              <Route 
-                path="/" 
-                element={
-                  <>
-                    <LandingPage />
-                    <Marquee />
-                    <About_Us />
-                    <Eyes />
-                    <Featured />
-                    <Cards />
-                    <Footer />
-                  </>
-                } 
-              />
-              {/* Contact Route */}
-              <Route path="/contact" element={<Contact />} />
-              {/* Not Found Route */}
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
-          </Router>
-        </>
-      )}
+        ) : (
+          <>
+            {/* Add Custom Cursor here */}
+            <CustomCursor />
+
+            <Router>
+              <Navbar />
+              <Routes>
+                {/* Home Route */}
+                <Route
+                  path="/"
+                  element={
+                    <>
+                      <LandingPage />
+                      <Marquee />
+                      <About_Us />
+                      <Eyes />
+                      <Featured />
+                      <Cards />
+                      <Footer />
+                    </>
+                  }
+                />
+                {/* Contact Route */}
+                <Route path="/contact" element={<Contact />} />
+                {/* Not Found Route */}
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </Router>
+          </>
+        )}
       </AnimatePresence>
     </div>
   );
diff --git a/src/components/About_Us.jsx b/src/components/About_Us.jsx
index c53c907..b42a0bb 100644
--- a/src/components/About_Us.jsx
+++ b/src/components/About_Us.jsx
@@ -1,32 +1,43 @@
-import React from 'react'
+import React from "react";
 
 function About_Us() {
   return (
-    <div className='w-full p-8 md:p-20 bg-[#f3b9b9]  rounded-tl-3xl rounded-tr-3xl font-mono text-black'>
-      <div className=' hover-target text-xl  md:text-3xl leading-[7vw] md:leading-[4vw]  tracking-tight '>
-        Vector specializes in building custom websites and products, helping businesses achieve their online goals and stand out in the competitive digital landscape.
+    <div className="w-full p-8 md:p-20 bg-[#f3b9b9]  rounded-tl-3xl rounded-tr-3xl font-mono text-black">
+      <div className=" hover-target text-xl  md:text-3xl leading-[7vw] md:leading-[4vw]  tracking-tight ">
+        Vector specializes in building custom websites and products, helping
+        businesses achieve their online goals and stand out in the competitive
+        digital landscape.
       </div>
-      <div className='w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784]'>
-      <div className="flex w-full h-1/2 py-5">
+      <div className="w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784]">
+        <div className="flex w-full h-1/2 py-5">
           <div className="flex-[4_4_0%]  px-6">What you can expect:</div>
-          <div className="flex-[4_4_0%]  text-justify px-6 ">At Vector, we build tailored websites and projects for businesses and students, combining creativity with the latest technology to deliver visually stunning and highly functional results. Whether you're enhancing your online presence or working on a project, we're here to bring your vision to life.
-            <br></br>Expect personalized service, modern design, and scalable solutions that align with your goals, ensuring your project stands out and makes a lasting impact.</div>
-          <div className="flex-[2_2_0%] px-6">Our Socials:<br></br>LinkedIN<br></br>Instagram </div>
+          <div className="flex-[4_4_0%]  text-justify px-6 ">
+            At Vector, we build tailored websites and projects for businesses
+            and students, combining creativity with the latest technology to
+            deliver visually stunning and highly functional results. Whether
+            you're enhancing your online presence or working on a project, we're
+            here to bring your vision to life.
+            <br></br>Expect personalized service, modern design, and scalable
+            solutions that align with your goals, ensuring your project stands
+            out and makes a lasting impact.
+          </div>
+          <div className="flex-[2_2_0%] px-6">
+            Our Socials:<br></br>LinkedIN<br></br>Instagram{" "}
+          </div>
         </div>
-
       </div>
-      <div className='w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784] py-5'>
-        <div className='w-full md:w-1/2 '>
-          <h1 className='text-3xl md:text-5xl'> Our Approach:</h1>
-          <button className='flex uppercase gap-4 md:gap-10 items-center px-6 py-4 md:px-10 md:py-6 bg-zinc-900 mt-6 md:mt-10 rounded-full text-white'> 
-            Read More 
-            <div className='w-2 h-2 md:w-3 md:h-3 bg-zinc-100 rounded-full'></div>
+      <div className="w-full flex flex-col md:flex-row gap-5 border-t-[1px] mt-10 md:mt-20 border-[#964784] py-5">
+        <div className="w-full md:w-1/2 ">
+          <h1 className="text-3xl md:text-5xl"> Our Approach:</h1>
+          <button className="flex uppercase gap-4 md:gap-10 items-center px-6 py-4 md:px-10 md:py-6 bg-zinc-900 mt-6 md:mt-10 rounded-full text-white">
+            Read More
+            <div className="w-2 h-2 md:w-3 md:h-3 bg-zinc-100 rounded-full"></div>
           </button>
         </div>
-        <div className='w-full md:w-1/2 h-[40vh] md:h-[60vh] rounded-3xl bg-[#964784]'></div>
+        <div className="w-full md:w-1/2 h-[40vh] md:h-[60vh] rounded-3xl bg-[#964784]"></div>
       </div>
     </div>
   );
 }
 
-export default About_Us
+export default About_Us;
diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx
index b70ac96..e01f339 100644
--- a/src/components/Cards.jsx
+++ b/src/components/Cards.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 function Cards() {
   const [hoveredCard, setHoveredCard] = useState(null);
@@ -12,19 +12,25 @@ function Cards() {
   };
 
   return (
-    <div className='w-full min-h-screen bg-zinc-100 flex flex-col md:flex-row items-center gap-5 px-5 md:px-32 py-10'>
+    <div className="w-full min-h-screen bg-zinc-100 flex flex-col md:flex-row items-center gap-5 px-5 md:px-32 py-10">
       {/* Cards */}
       {[0, 1, 2].map((index) => (
-        <div 
+        <div
           key={index}
           className={`cardcontainer transition-all duration-300 h-[40vh] md:h-[50vh] 
-            ${hoveredCard === index ? 'md:w-1/2' : 'md:w-1/3'}`} 
-          onMouseEnter={() => handleMouseEnter(index)} 
+            ${hoveredCard === index ? "md:w-1/2" : "md:w-1/3"}`}
+          onMouseEnter={() => handleMouseEnter(index)}
           onMouseLeave={handleMouseLeave}
         >
-          <div className='card relative w-full h-full rounded-xl bg-[#004D43] flex items-center justify-center'>
-            <img className='w-24 md:w-32' src='https://ochi.design/wp-content/uploads/2022/04/logo001.svg' alt='Logo' />
-            <button className='absolute px-3 py-1 md:px-5 md:py-1 rounded-xl border-2 left-5 md:left-10 bottom-5 md:bottom-10'>&copy; 2019</button>
+          <div className="card relative w-full h-full rounded-xl bg-[#004D43] flex items-center justify-center">
+            <img
+              className="w-24 md:w-32"
+              src="https://ochi.design/wp-content/uploads/2022/04/logo001.svg"
+              alt="Logo"
+            />
+            <button className="absolute px-3 py-1 md:px-5 md:py-1 rounded-xl border-2 left-5 md:left-10 bottom-5 md:bottom-10">
+              &copy; 2019
+            </button>
           </div>
         </div>
       ))}
diff --git a/src/components/CustomCursor.jsx b/src/components/CustomCursor.jsx
index d05fc2c..79542ec 100644
--- a/src/components/CustomCursor.jsx
+++ b/src/components/CustomCursor.jsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
-import { gsap } from 'gsap';
+import React, { useEffect, useRef } from "react";
+import { gsap } from "gsap";
 
 const CustomCursor = () => {
   const cursorRef = useRef(null);
@@ -21,23 +21,23 @@ const CustomCursor = () => {
       gsap.to(cursor, {
         left: cursorPosition.left,
         top: cursorPosition.top,
-        height: '12px',
-        width: '12px',
+        height: "12px",
+        width: "12px",
         duration: 0.2,
       });
       gsap.to(tail, {
         left: cursorPosition.left,
         top: cursorPosition.top,
-        height: '5px',
-        width: '5px',
+        height: "5px",
+        width: "5px",
         duration: 0.5,
       });
     };
 
-    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener("mousemove", onMouseMove);
 
     return () => {
-      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener("mousemove", onMouseMove);
     };
   }, []);
 
diff --git a/src/components/Eyes.jsx b/src/components/Eyes.jsx
index 6e915e1..d5186b4 100644
--- a/src/components/Eyes.jsx
+++ b/src/components/Eyes.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 function Eyes() {
   const [leftEyeRotate, setLeftEyeRotate] = useState(0);
@@ -10,12 +10,14 @@ function Eyes() {
       let mouseY = e.clientY;
 
       // Get the center coordinates of the left eye
-      let leftEye = document.getElementById('left-eye').getBoundingClientRect();
+      let leftEye = document.getElementById("left-eye").getBoundingClientRect();
       let leftEyeCenterX = leftEye.left + leftEye.width / 2;
       let leftEyeCenterY = leftEye.top + leftEye.height / 2;
 
       // Get the center coordinates of the right eye
-      let rightEye = document.getElementById('right-eye').getBoundingClientRect();
+      let rightEye = document
+        .getElementById("right-eye")
+        .getBoundingClientRect();
       let rightEyeCenterX = rightEye.left + rightEye.width / 2;
       let rightEyeCenterY = rightEye.top + rightEye.height / 2;
 
@@ -32,42 +34,54 @@ function Eyes() {
       setRightEyeRotate(rightAngle - 180);
     };
 
-    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener("mousemove", handleMouseMove);
 
     return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener("mousemove", handleMouseMove);
     };
   }, []);
 
   return (
-    <div className='eyes w-full h-screen overflow-hidden'>
-      <div data-scroll data-scroll-speed='-.7' className='relative w-full h-full bg-cover bg-center bg- bg-[url("/bgeyess.png")]'>
-        <div className='absolute flex gap-10 top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] h-60'>
-
+    <div className="eyes w-full h-screen overflow-hidden">
+      <div
+        data-scroll
+        data-scroll-speed="-.7"
+        className='relative w-full h-full bg-cover bg-center bg- bg-[url("/bgeyess.png")]'
+      >
+        <div className="absolute flex gap-10 top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] h-60">
           {/* Left Eye */}
-          <div id='left-eye' className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]'>
-            <div className='relative w-2/3 h-2/3 rounded-full bg-zinc-900'>
+          <div
+            id="left-eye"
+            className="flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]"
+          >
+            <div className="relative w-2/3 h-2/3 rounded-full bg-zinc-900">
               <div
-                style={{ transform: `translate(-50%, -50%) rotate(${leftEyeRotate}deg)` }}
-                className='line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10'
+                style={{
+                  transform: `translate(-50%, -50%) rotate(${leftEyeRotate}deg)`,
+                }}
+                className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10"
               >
-                <div className='w-10 h-10 rounded-full bg-zinc-100'></div>
+                <div className="w-10 h-10 rounded-full bg-zinc-100"></div>
               </div>
             </div>
           </div>
 
           {/* Right Eye */}
-          <div id='right-eye' className='flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]'>
-            <div className='relative w-2/3 h-2/3 rounded-full bg-zinc-900'>
+          <div
+            id="right-eye"
+            className="flex items-center justify-center w-[15vw] h-[15vw] rounded-full bg-zinc-100 md:w-[12vw] md:h-[12vw] sm:w-[20vw] sm:h-[20vw]"
+          >
+            <div className="relative w-2/3 h-2/3 rounded-full bg-zinc-900">
               <div
-                style={{ transform: `translate(-50%, -50%) rotate(${rightEyeRotate}deg)` }}
-                className='line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10'
+                style={{
+                  transform: `translate(-50%, -50%) rotate(${rightEyeRotate}deg)`,
+                }}
+                className="line absolute top-1/2 left-1/2 -translate-x-[50%] -translate-y-[50%] w-full h-10"
               >
-                <div className='w-10 h-10 rounded-full bg-zinc-100'></div>
+                <div className="w-10 h-10 rounded-full bg-zinc-100"></div>
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </div>
diff --git a/src/components/Featured.jsx b/src/components/Featured.jsx
index 0c4a9a1..52add73 100644
--- a/src/components/Featured.jsx
+++ b/src/components/Featured.jsx
@@ -1,77 +1,83 @@
-import { motion } from 'framer-motion'
-import React, { useState } from 'react'
+import { motion } from "framer-motion";
+import React, { useState } from "react";
 
 function Featured() {
   const [hovered, setHovered] = useState(null); // To track which side is hovered
 
   return (
-    <div className='w-full py-10 md:py-20 bg-[#fff0f4] rounded-tl-3xl rounded-tr-3xl '>
+    <div className="w-full py-10 md:py-20 bg-[#fff0f4] rounded-tl-3xl rounded-tr-3xl ">
       {/* Header */}
-      <div className='w-full px-5 md:px-20 border-b-[1px] border-zinc-700 pb-10 md:pb-20'>
-        <h1 className='text-4xl md:text-7xl font-[""] tracking-tight'>Featured Projects</h1>
+      <div className="w-full px-5 md:px-20 border-b-[1px] border-zinc-700 pb-10 md:pb-20">
+        <h1 className='text-4xl md:text-7xl font-[""] tracking-tight'>
+          Featured Projects
+        </h1>
       </div>
 
       {/* Cards Section */}
-      <div className='px-5 md:px-20'>
-        <div className='cards w-full  flex flex-col md:flex-row gap-10 mt-10 md:mt-10 relative'>
-
+      <div className="px-5 md:px-20">
+        <div className="cards w-full  flex flex-col md:flex-row gap-10 mt-10 md:mt-10 relative">
           {/* Text in center of both cards */}
-          <motion.h1 
-            className='absolute text-[#FF7AA2] drop-shadow-md hover:drop-shadow-2xl left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-[9] leading-none tracking-tighter text-4xl md:text-6xl'
+          <motion.h1
+            className="absolute text-[#FF7AA2] drop-shadow-md hover:drop-shadow-2xl left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-[9] leading-none tracking-tighter text-4xl md:text-6xl"
             initial={{ opacity: 0 }} // Initially hidden
             animate={{ opacity: hovered ? 1 : 0 }} // Visible when hovered
-            transition={{ duration: 0.3, type: 'spring', stiffness: 300 }}
+            transition={{ duration: 0.3, type: "spring", stiffness: 300 }}
           >
-            {hovered === 'left' && 'FYDE'.split('').map((item, index) => (
-              <motion.span key={index}>{item}</motion.span>
-            ))}
-            {hovered === 'right' && 'SKYY'.split('').map((item, index) => (
-              <motion.span key={index}>{item}</motion.span>
-            ))}
+            {hovered === "left" &&
+              "FYDE"
+                .split("")
+                .map((item, index) => (
+                  <motion.span key={index}>{item}</motion.span>
+                ))}
+            {hovered === "right" &&
+              "SKYY"
+                .split("")
+                .map((item, index) => (
+                  <motion.span key={index}>{item}</motion.span>
+                ))}
           </motion.h1>
 
           {/* Left card */}
-          <motion.div 
-            className='cardcontainer relative w-full md:w-1/2 h-[40vh] md:h-[60vh] shadow-lg' // Added shadow
-            onHoverStart={() => setHovered('left')} 
+          <motion.div
+            className="cardcontainer relative w-full md:w-1/2 h-[40vh] md:h-[60vh] shadow-lg" // Added shadow
+            onHoverStart={() => setHovered("left")}
             onHoverEnd={() => setHovered(null)}
           >
             <motion.div
-              className='card w-full h-full rounded-xl overflow-hidden'
+              className="card w-full h-full rounded-xl overflow-hidden"
               whileHover={{ scale: 0.9 }} // Squeeze and zoom effect on hover
-              transition={{ duration: 0.5, ease: 'easeInOut' }} // Smooth transition
+              transition={{ duration: 0.5, ease: "easeInOut" }} // Smooth transition
             >
-              <motion.img 
-                className='w-full h-full object-cover'  
-                src='/a1.png' 
-                alt='Project FYDE'  
+              <motion.img
+                className="w-full h-full object-cover"
+                src="/a1.png"
+                alt="Project FYDE"
                 whileHover={{ scale: 1.05 }} // Zoom in on image hover
-                transition={{ duration: 0.5, ease: 'easeInOut' }} // Smooth transition for zoom
+                transition={{ duration: 0.5, ease: "easeInOut" }} // Smooth transition for zoom
               />
             </motion.div>
           </motion.div>
 
           {/* Right card */}
-          <motion.div 
-            className='cardcontainer relative w-full md:w-1/2 h-[40vh] md:h-[60vh] shadow-lg' // Added shadow
-            onHoverStart={() => setHovered('right')} 
+          <motion.div
+            className="cardcontainer relative w-full md:w-1/2 h-[40vh] md:h-[60vh] shadow-lg" // Added shadow
+            onHoverStart={() => setHovered("right")}
             onHoverEnd={() => setHovered(null)}
           >
             <motion.div
-              className='card w-full h-full rounded-xl overflow-hidden'
+              className="card w-full h-full rounded-xl overflow-hidden"
               whileHover={{ scale: 0.9 }} // Squeeze and zoom effect on hover
-              transition={{ duration: 0.5, ease: 'easeInOut' }} // Smooth transition
+              transition={{ duration: 0.5, ease: "easeInOut" }} // Smooth transition
             >
-              <motion.img 
-                className='w-full h-full object-cover'  
-                src='/a2.png' 
-                alt='Project SKYY'  
+              <motion.img
+                className="w-full h-full object-cover"
+                src="/a2.png"
+                alt="Project SKYY"
                 whileHover={{ scale: 1.05 }} // Zoom in on image hover
-                transition={{ duration: 0.5, ease: 'easeInOut' }} // Smooth transition for zoom
+                transition={{ duration: 0.5, ease: "easeInOut" }} // Smooth transition for zoom
               />
             </motion.div>
           </motion.div>
-
         </div>
       </div>
     </div>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ec2fec6..a8ed36e 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { gsap } from 'gsap';
+import React, { useEffect } from "react";
+import { gsap } from "gsap";
 // Commenting ScrambleTextPlugin import since it's not resolved in your setup
 // import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';
 // gsap.registerPlugin(ScrambleTextPlugin);
@@ -9,7 +9,13 @@ function Footer() {
     // Heading Animation (Scramble Text Effect)
     gsap.fromTo(
       ".footer-heading h1",
-      { scrambleText: { text: "Get in touch", chars: "0123456789", revealDelay: 0.5 } },
+      {
+        scrambleText: {
+          text: "Get in touch",
+          chars: "0123456789",
+          revealDelay: 0.5,
+        },
+      },
       { duration: 3, ease: "power2.inOut" }
     );
 
@@ -23,7 +29,14 @@ function Footer() {
     gsap.fromTo(
       ".footer-link",
       { opacity: 0, y: 30 },
-      { opacity: 1, y: 0, stagger: 0.2, duration: 1, ease: "power3.out", delay: 0.8 }
+      {
+        opacity: 1,
+        y: 0,
+        stagger: 0.2,
+        duration: 1,
+        ease: "power3.out",
+        delay: 0.8,
+      }
     );
   }, []);
 
@@ -31,28 +44,51 @@ function Footer() {
     <footer className="relative w-full h-screen bg-[#421a1d] text-white flex flex-col justify-center items-center px-4 sm:px-8 lg:px-32">
       {/* Main Heading */}
       <div className="footer-heading flex flex-col items-center justify-center text-center">
-        <span className="text-xs sm:text-sm tracking-widest mb-4">LET'S TALK</span>
-        <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-none">Get in touch</h1>
+        <span className="text-xs sm:text-sm tracking-widest mb-4">
+          LET'S TALK
+        </span>
+        <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-none">
+          Get in touch
+        </h1>
       </div>
 
       {/* Footer Links */}
       <div className="absolute bottom-16 left-0 w-full flex flex-col sm:flex-row justify-between text-xs sm:text-sm md:text-base px-4 sm:px-8 lg:px-32">
         {/* Left Section */}
         <div className="flex flex-col footer-link mb-6 sm:mb-0">
-          <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="mb-2">
+          <a
+            href="https://instagram.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mb-2"
+          >
             INSTAGRAM ↗
           </a>
-          <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="mb-2">
+          <a
+            href="https://linkedin.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mb-2"
+          >
             LINKEDIN ↗
           </a>
         </div>
 
         {/* Right Section */}
         <div className="flex flex-col footer-link">
-          <a href="https://dribbble.com" target="_blank" rel="noopener noreferrer" className="mb-2">
+          <a
+            href="https://dribbble.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mb-2"
+          >
             DRIBBBLE ↗
           </a>
-          <a href="https://behance.com" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://behance.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             BEHANCE ↗
           </a>
         </div>
diff --git a/src/components/Marquee.jsx b/src/components/Marquee.jsx
index 37d5aa5..9b019e0 100644
--- a/src/components/Marquee.jsx
+++ b/src/components/Marquee.jsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
-import React, { useEffect, useState } from 'react';
+import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
 
 function Marquee() {
   const [scrollDirection, setScrollDirection] = useState(1); // 1 for down, -1 for up
@@ -16,10 +16,10 @@ function Marquee() {
       lastScrollY = window.scrollY;
     };
 
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, []);
 
@@ -34,8 +34,8 @@ function Marquee() {
         {/* First instance of the text */}
         <motion.div
           initial={{ x: 0 }}
-          animate={{ x: scrollDirection === 1 ? '-100%' : '100%' }}
-          transition={{ ease: 'linear', repeat: Infinity, duration: 10 }}
+          animate={{ x: scrollDirection === 1 ? "-100%" : "100%" }}
+          transition={{ ease: "linear", repeat: Infinity, duration: 10 }}
           className="flex"
         >
           <h1 className='text-[20vw] tracking-wider leading-none font-["Bebas"] uppercase -pt-[1vw] mb-[2.5vw] font-semibold pr-20'>
@@ -45,12 +45,12 @@ function Marquee() {
             we are vector
           </h1>
         </motion.div>
-        
+
         {/* Second instance of the text to ensure continuous scrolling */}
         <motion.div
           initial={{ x: 0 }}
-          animate={{ x: scrollDirection === 1 ? '-100%' : '100%' }}
-          transition={{ ease: 'linear', repeat: Infinity, duration: 10 }}
+          animate={{ x: scrollDirection === 1 ? "-100%" : "100%" }}
+          transition={{ ease: "linear", repeat: Infinity, duration: 10 }}
           className="flex"
         >
           <h1 className='text-[20vw] tracking-wider leading-none font-["Bebas"] uppercase -pt-[1vw] mb-[2.5vw] font-semibold pr-20'>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 125241f..16c5144 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -14,7 +14,7 @@ function Navbar() {
       } else if (currentScrollY < lastScrollY - 10) {
         setShowNavbar(true);
       }
-      setLastScrollY(prevScrollY => currentScrollY);
+      setLastScrollY((prevScrollY) => currentScrollY);
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -36,7 +36,13 @@ function Navbar() {
     >
       {/* Logo */}
       <div className="logo">
-        <svg width="72" height="30" viewBox="0 0 72 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="72"
+          height="30"
+          viewBox="0 0 72 30"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           {/* SVG paths for the logo */}
         </svg>
       </div>
@@ -52,7 +58,12 @@ function Navbar() {
               viewBox="0 0 24 24"
               stroke="currentColor"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           ) : (
             <svg
@@ -62,7 +73,12 @@ function Navbar() {
               viewBox="0 0 24 24"
               stroke="currentColor"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16m-7 6h7"
+              />
             </svg>
           )}
         </button>
@@ -73,7 +89,7 @@ function Navbar() {
         {["Services", "Our Work", "About Us", "Insights"].map((item, index) => (
           <Link
             key={index}
-            to={`/${item.replace(/\s+/g, '').toLowerCase()}`}
+            to={`/${item.replace(/\s+/g, "").toLowerCase()}`}
             className={`relative text-lg font-medium tracking-wide text-zinc-900 hover:text-[#c9184a] transition-colors duration-300 after:content-[''] after:absolute after:bottom-[-2px] after:left-0 after:w-0 after:h-[2px] after:bg-gray-800 hover:after:w-full after:transition-all after:duration-300`}
           >
             {item}
@@ -97,17 +113,19 @@ function Navbar() {
         }`}
       >
         <ul className="flex flex-col items-center justify-center h-full py-20">
-          {["Services", "Our Work", "About Us", "Insights", "Contact"].map((item, index) => (
-            <li key={index} className="py-4">
-              <Link
-                to={`/${item.replace(/\s+/g, '').toLowerCase()}`}
-                className="text-3xl font-medium tracking-wide text-zinc-100 hover:text-[#c9184a] transition-colors duration-300"
-                onClick={() => setIsMobileMenuOpen(false)} // Close menu after clicking
-              >
-                {item}
-              </Link>
-            </li>
-          ))}
+          {["Services", "Our Work", "About Us", "Insights", "Contact"].map(
+            (item, index) => (
+              <li key={index} className="py-4">
+                <Link
+                  to={`/${item.replace(/\s+/g, "").toLowerCase()}`}
+                  className="text-3xl font-medium tracking-wide text-zinc-100 hover:text-[#c9184a] transition-colors duration-300"
+                  onClick={() => setIsMobileMenuOpen(false)} // Close menu after clicking
+                >
+                  {item}
+                </Link>
+              </li>
+            )
+          )}
         </ul>
       </div>
     </nav>
diff --git a/src/components/Preloader/index.jsx b/src/components/Preloader/index.jsx
index a35e735..a1a19b1 100644
--- a/src/components/Preloader/index.jsx
+++ b/src/components/Preloader/index.jsx
@@ -1,50 +1,80 @@
-'use client';
-import styles from './style.module.scss';
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import { opacity, slideUp } from './anim';
+"use client";
+import styles from "./style.module.scss";
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { opacity, slideUp } from "./anim";
 
-const words = ["Hello", "नमस्ते", "Bonjour", "Ciao", "Olà", "やあ", "Hallå",  "Hallo"]
+const words = [
+  "Hello",
+  "नमस्ते",
+  "Bonjour",
+  "Ciao",
+  "Olà",
+  "やあ",
+  "Hallå",
+  "Hallo",
+];
 
 export default function Index() {
-    const [index, setIndex] = useState(0);
-    const [dimension, setDimension] = useState({width: 0, height:0});
+  const [index, setIndex] = useState(0);
+  const [dimension, setDimension] = useState({ width: 0, height: 0 });
 
-    useEffect( () => {
-        setDimension({width: window.innerWidth, height: window.innerHeight})
-    }, [])
+  useEffect(() => {
+    setDimension({ width: window.innerWidth, height: window.innerHeight });
+  }, []);
 
-    useEffect( () => {
-        if(index == words.length - 1) return;
-        setTimeout( () => {
-            setIndex(index + 1)
-        }, index == 0 ? 1000 : 150)
-    }, [index])
+  useEffect(() => {
+    if (index == words.length - 1) return;
+    setTimeout(
+      () => {
+        setIndex(index + 1);
+      },
+      index == 0 ? 1000 : 150
+    );
+  }, [index]);
 
-    const initialPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width/2} ${dimension.height + 300} 0 ${dimension.height}  L0 0`
-    const targetPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${dimension.height} Q${dimension.width/2} ${dimension.height} 0 ${dimension.height}  L0 0`
+  const initialPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${
+    dimension.height
+  } Q${dimension.width / 2} ${dimension.height + 300} 0 ${
+    dimension.height
+  }  L0 0`;
+  const targetPath = `M0 0 L${dimension.width} 0 L${dimension.width} ${
+    dimension.height
+  } Q${dimension.width / 2} ${dimension.height} 0 ${dimension.height}  L0 0`;
 
-    const curve = {
-        initial: {
-            d: initialPath,
-            transition: {duration: 0.7, ease: [0.76, 0, 0.24, 1]}
-        },
-        exit: {
-            d: targetPath,
-            transition: {duration: 0.7, ease: [0.76, 0, 0.24, 1], delay: 0.3}
-        }
-    }
+  const curve = {
+    initial: {
+      d: initialPath,
+      transition: { duration: 0.7, ease: [0.76, 0, 0.24, 1] },
+    },
+    exit: {
+      d: targetPath,
+      transition: { duration: 0.7, ease: [0.76, 0, 0.24, 1], delay: 0.3 },
+    },
+  };
 
-    return (
-        <motion.div variants={slideUp} initial="initial" exit="exit" className={styles.introduction}>
-            {dimension.width > 0 && 
-            <>
-                <motion.p variants={opacity} initial="initial" animate="enter"><span></span>{words[index]}</motion.p>
-                <svg>
-                    <motion.path variants={curve} initial="initial" exit="exit"></motion.path>
-                </svg>
-            </>
-            }
-        </motion.div>
-    )
+  return (
+    <motion.div
+      variants={slideUp}
+      initial="initial"
+      exit="exit"
+      className={styles.introduction}
+    >
+      {dimension.width > 0 && (
+        <>
+          <motion.p variants={opacity} initial="initial" animate="enter">
+            <span></span>
+            {words[index]}
+          </motion.p>
+          <svg>
+            <motion.path
+              variants={curve}
+              initial="initial"
+              exit="exit"
+            ></motion.path>
+          </svg>
+        </>
+      )}
+    </motion.div>
+  );
 }