feat:added the privacy page with clean ui

src/pages/Index.tsx

@@ -1,21 +1,18 @@
-import Navbar from '@/components/Navbar';
-import HeroSection from '@/components/HeroSection';
-import ServicesSection from '@/components/ServicesSection';
-import ProjectsSection from '@/components/ProjectsSection';
-import TeamSection from '@/components/TeamSection';
-import AboutSection from '@/components/AboutSection';
-import TestimonialsSection from '@/components/TestimonialsSection';
-import BlogSection from '@/components/BlogSection';
-import FAQSection from '@/components/FAQSection';
-import ContactSection from '@/components/ContactSection';
-import Footer from '@/components/Footer';
-import PageTransition from '@/components/PageTransition';
+import AboutSection from "@/components/AboutSection";
+import BlogSection from "@/components/BlogSection";
+import ContactSection from "@/components/ContactSection";
+import FAQSection from "@/components/FAQSection";
+import HeroSection from "@/components/HeroSection";
+import PageTransition from "@/components/PageTransition";
+import ProjectsSection from "@/components/ProjectsSection";
+import ServicesSection from "@/components/ServicesSection";
+import TeamSection from "@/components/TeamSection";
+import TestimonialsSection from "@/components/TestimonialsSection";
 
 const Index = () => {
   return (
     <PageTransition>
       <div className="min-h-screen bg-background overflow-x-hidden">
-        <Navbar />
         <HeroSection />
         <ServicesSection />
         <ProjectsSection />
@@ -25,7 +22,6 @@ const Index = () => {
         <BlogSection />
         <FAQSection />
         <ContactSection />
-        <Footer />
       </div>
     </PageTransition>
   );

src/pages/PrivacyPolicy.tsx

@@ -0,0 +1,157 @@
+import { cookieSections, privacySections } from "@/data/privacyData";
+import { ChevronRight, Cookie, Shield } from "lucide-react";
+import { useState } from "react";
+
+export const PrivacyPolicy: React.FC = () => {
+  const [activeSection, setActiveSection] = useState("info-collect");
+
+  const allSections = [...privacySections, ...cookieSections];
+
+  const handleScroll = (id: string) => {
+    setActiveSection(id);
+    document
+      .getElementById(id)
+      ?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  return (
+    <section className="mx-auto w-full container px-4 sm:px-6 lg:px-8 py-24">
+      {/* HEADER */}
+      <header className="max-w-3xl mb-12">
+        <div className="flex items-center gap-4 mb-4">
+          <div className="p-3 rounded-xl bg-primary/30">
+            <Shield className="w-6 h-6 " aria-hidden="true" />
+          </div>
+          <h1 className="text-3xl sm:text-4xl font-bold">Privacy Policy</h1>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-3">
+          Last Updated: April 19, 2026
+        </p>
+
+        <p className="text-base sm:text-lg text-muted-foreground leading-relaxed">
+          This page explains what data we collect, why we collect it, and how we
+          handle it.
+        </p>
+      </header>
+
+      <div className="flex flex-col lg:flex-row gap-8">
+        {/* SIDEBAR */}
+        <aside className="lg:w-1/4">
+          <nav
+            className="bg-accent/10 border border-primary/10 rounded-2xl p-4 space-y-2 lg:sticky lg:top-24"
+            aria-label="Privacy policy sections"
+          >
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2 px-2">
+              Contents
+            </p>
+
+            {allSections.map((section) => (
+              <button
+                key={section.id}
+                onClick={() => handleScroll(section.id)}
+                aria-current={activeSection === section.id ? "true" : undefined}
+                className={`w-full text-left flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent-neon))] ${
+                  activeSection === section.id
+                    ? "bg-[hsl(var(--accent-neon)/0.15)] text-primary"
+                    : "text-muted-foreground hover:bg-[hsl(var(--accent-neon)/0.08)]"
+                }`}
+              >
+                <span className="truncate">{section.title}</span>
+                <ChevronRight
+                  className="w-4 h-4 opacity-60"
+                  aria-hidden="true"
+                />
+              </button>
+            ))}
+          </nav>
+        </aside>
+
+        {/* MAIN */}
+        <main className="lg:w-3/4 space-y-8">
+          {/* PRIVACY */}
+          {privacySections.map((section) => (
+            <section
+              key={section.id}
+              id={section.id}
+              className="bg-accent/10 border border-primary/10 rounded-2xl p-6 sm:p-8 transition hover:neon-glow"
+            >
+              <div className="flex items-center gap-3 mb-4">
+                <div className="p-2 rounded-lg bg-[hsl(var(--accent-neon)/0.2)]">
+                  {section.icon}
+                </div>
+                <h2 className="text-lg sm:text-xl font-semibold">
+                  {section.title}
+                </h2>
+              </div>
+
+              {Array.isArray(section.content) ? (
+                <ul className="space-y-2 ml-5">
+                  {section.content.map((item, idx) => (
+                    <li key={idx} className="flex gap-2 text-muted-foreground">
+                      <span className="mt-2 w-1.5 h-1.5 bg-secondary rounded-full" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="ml-5 text-muted-foreground leading-relaxed">
+                  {section.content}
+                </p>
+              )}
+            </section>
+          ))}
+
+          {/* COOKIES */}
+          <section className="space-y-6">
+            <div className="flex items-center gap-3">
+              <div className="p-3 rounded-xl bg-primary/10">
+                <Cookie className="w-6 h-6 " />
+              </div>
+              <h2 className="text-2xl sm:text-3xl font-bold ">
+                Cookies Policy
+              </h2>
+            </div>
+
+            {cookieSections.map((section) => (
+              <section
+                key={section.id}
+                id={section.id}
+                className="bg-accent/10 border border-primary/10 rounded-2xl p-6 sm:p-8 transition hover:neon-glow"
+              >
+                <div className="flex items-center gap-2 mb-3">
+                  {section.icon}
+                  <h3 className="text-lg font-semibold">{section.title}</h3>
+                </div>
+
+                {Array.isArray(section.content) ? (
+                  <ul className="space-y-2 ml-5">
+                    {section.content.map((item, idx) => (
+                      <li
+                        key={idx}
+                        className="flex gap-2 text-muted-foreground"
+                      >
+                        <span className="mt-2 w-1.5 h-1.5 bg-[hsl(var(--accent-neon))] rounded-full" />
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="ml-5 text-muted-foreground">
+                    {section.content}
+                  </p>
+                )}
+              </section>
+            ))}
+          </section>
+
+          {/* FOOTER */}
+          <footer className="bg-accent/10 border border-primary/10 rounded-2xl p-5 text-sm text-muted-foreground">
+            You can disable cookies in your browser settings. Continued use of
+            this site means you accept this policy.
+          </footer>
+        </main>
+      </div>
+    </section>
+  );
+};