footer and social links

src/App.jsx

@@ -6,6 +6,7 @@ import Projects from './sections/Projects'
 import Experiences from './sections/Experiences'
 import Testimonial from './sections/Testimonial'
 import Contact from './sections/Contact'
+import Footer from './sections/Footer'
 
 const App = () => {
   return (
@@ -18,12 +19,7 @@ const App = () => {
     <Experiences/>
     <Testimonial/>
     <Contact/>
-    <section className="min-h-screen"></section>
-    <section className="min-h-screen"></section>
-    <section className="min-h-screen"></section>
-    <section className="min-h-screen"></section>
-    <section className="min-h-screen"></section>
-    <section className="min-h-screen"></section>
+   <Footer/>
     {/* service_g8pia9k */}
     {/* template_lrhppet */}
     {/*experinec*/}

src/constants/index.js

@@ -160,7 +160,7 @@ export const myProjects = [
 export const mySocials = [
   {
     name: "WhatsApp",
-    href: "",
+    href: "https://wa.me/919527116922?text=Hii,%20I%20want%20to%20build%20a%20project",
     icon: "/assets/socials/whatsApp.svg",
   },
   {
@@ -170,7 +170,7 @@ export const mySocials = [
   },
   {
     name: "Instagram",
-    href: "https://www.instagram.com/ali.sanatidev/reels/",
+    href: "https://www.instagram.com/siddhesh.kabra/",
     icon: "/assets/socials/instagram.svg",
   },
 ];

src/sections/About.jsx

@@ -8,7 +8,7 @@ import {Frameworks} from "../components/Frameworks";
 const About = () => {
   const grid2Container = useRef();
   return (
-    <section className="c-space section-spacing">
+    <section className="c-space section-spacing" id="about">
       <h2 className="text-heading">About me</h2>
       <div className="grid grid-col-1 gap-4 md:grid-cols-6 md:auto-rows-[18rem] mt-12">
         {/* Grid 1 */}

src/sections/Contact.jsx

@@ -52,7 +52,7 @@ const Contact = () => {
     }
   };
   return (
-    <section className="relative flex items-center c-space section-spacing">
+    <section className="relative flex items-center c-space section-spacing" id="contact">
       <Particles
         className="absolute inset-0 -z-50"
         quantity={100}

src/sections/Experiences.jsx

@@ -2,7 +2,7 @@ import { Timeline } from "../components/Timeline";
 import { experiences } from "../constants";
 const Experiences = () => {
   return (
-    <div className="w-full">
+    <div className="w-full" id="work">
       <Timeline data={experiences} />
     </div>
   );

src/sections/Footer.jsx

@@ -0,0 +1,23 @@
+import { mySocials } from "../constants";
+const Footer = () => {
+  return (
+    <section className="flex flex-wrap items-center justify-between gap-5 pb-3 text-sm text-neutral-400 c-space">
+      <div className="mb-4 bg-gradient-to-r from-transparent via-neutral-700 to-transparent h-[1px] w-full" />
+      <div className="flex gap-2">
+        <p>Terms & Conditions</p>
+        <p>|</p>
+        <p>Privacy Policy</p>
+      </div>
+      <div className="flex gap-3">
+        {mySocials.map((social, index) => (
+          <a href={social.href} key={index}>
+            <img src={social.icon} className="w-5 h-5" alt={social.name} />
+          </a>
+        ))}
+      </div>
+      <p>© 2025 Ali. All rights reserved.</p>
+    </section>
+  );
+};
+
+export default Footer;

src/sections/Navbar.jsx

@@ -1,46 +1,47 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { motion } from "motion/react";
-const Navigation = () => {
+function Navigation() {
   return (
     <ul className="nav-ul">
       <li className="nav-li">
-        <a href="#home" className="nav-link">
+        <a className="nav-link" href="#home">
           Home
         </a>
       </li>
       <li className="nav-li">
-        <a href="#about" className="nav-link">
+        <a className="nav-link" href="#about">
           About
         </a>
       </li>
       <li className="nav-li">
-        <a href="#work" className="nav-link">
+        <a className="nav-link" href="#work">
           Work
         </a>
       </li>
       <li className="nav-li">
-        <a href="#contact" className="nav-link">
+        <a className="nav-link" href="#contact">
           Contact
         </a>
       </li>
     </ul>
   );
-};
+}
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
-
   return (
-    <div className="fixed inset-x-0 z-20 w-full backdrop-blur-lg bg-primary/40 ">
+    <div className="fixed inset-x-0 z-20 w-full backdrop-blur-lg bg-primary/40">
       <div className="mx-auto c-space max-w-7xl">
         <div className="flex items-center justify-between py-2 sm:py-0">
           <a
-            href=" / "
-            className="text-xl font-bold transition-colors text-neutral-400 hover:text-white ">
-            Siddhesh Kabra
+            href="/"
+            className="text-xl font-bold transition-colors text-neutral-400 hover:text-white"
+          >
+            Siddhesh 
           </a>
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="flex cursor-pointer text-neutral-400  hover:text-white focus:outline-none sm:hidden ">
+            className="flex cursor-pointer text-neutral-400 hover:text-white focus:outline-none sm:hidden"
+          >
             <img
               src={isOpen ? "assets/close.svg" : "assets/menu.svg"}
               className="w-6 h-6"
@@ -54,11 +55,12 @@ const Navbar = () => {
       </div>
       {isOpen && (
         <motion.div
-          className="block overflow-hidden text-center sm:hidden "
+          className="block overflow-hidden text-center sm:hidden"
           initial={{ opacity: 0, x: -10 }}
           animate={{ opacity: 1, x: 0 }}
           style={{ maxHeight: "100vh" }}
-          transition={{ duration: 1 }}>
+          transition={{ duration: 1 }}
+        >
           <nav className="pb-5">
             <Navigation />
           </nav>
@@ -68,4 +70,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;