Merge version_4 into main

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import TextAbout from "@/components/sections/about/TextAbout";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { CheckCircle, Heart, Users } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Paws & Care"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Pets", id: "featured-pets" },
+            { name: "Adopt", id: "adopt" },
+            { name: "Support", id: "support" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "/contact" },
+            { name: "Our Pets", id: "/our-pets" },
+          ]}
+          button={{ text: "Adopt Now", href: "#featured-pets" }}
+        />
+      </div>
+
+      <div id="about-hero" data-section="about-hero">
+        <TextAbout
+          tag="Our Story"
+          tagIcon={Heart}
+          title="Paws & Care: Changing Lives, One Pet at a Time"
+          useInvertedBackground={false}
+          buttons={[{ text: "Learn More", href: "#mission" }]}
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <TextAbout
+          tag="Our Mission"
+          tagIcon={CheckCircle}
+          title="We're dedicated to rescuing, caring for, and finding forever homes for abandoned and neglected animals. Every pet deserves love, safety, and a chance at a better life."
+          useInvertedBackground={true}
+          buttons={[{ text: "Get Involved", href: "/contact" }]}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <FeatureCardTwentySeven
+          title="Meet Our Team"
+          description="Our passionate staff and volunteers are committed to providing the highest standard of care for every animal in our shelter."
+          tag="Our People"
+          tagIcon={Users}
+          features={[
+            {
+              id: "1",              title: "Sarah Williams",              description: "Executive Director with 15 years of experience in animal rescue and welfare.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg",              imageAlt: "Sarah Williams"
+            },
+            {
+              id: "2",              title: "Dr. Michael Park",              description: "Chief Veterinarian ensuring all animals receive top-quality medical care and treatment.",              imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-looking-his-cat-embracing-wife-indoor-portrait-happy-family-posing-with-pet_197531-12215.jpg",              imageAlt: "Dr. Michael Park"
+            },
+            {
+              id: "3",              title: "Emma Thompson",              description: "Adoption Coordinator helping families find their perfect pet companions.",              imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg",              imageAlt: "Emma Thompson"
+            },
+            {
+              id: "4",              title: "Volunteer Network",              description: "Over 200 dedicated volunteers providing care, companionship, and support daily.",              imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg",              imageAlt: "Our volunteers"
+            },
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={[
+            { id: "1", name: "Sarah", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Sarah" },
+            { id: "2", name: "Michael", imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-looking-his-cat-embracing-wife-indoor-portrait-happy-family-posing-with-pet_197531-12215.jpg", imageAlt: "Michael" },
+            { id: "3", name: "Emily", imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg", imageAlt: "Emily" },
+            { id: "4", name: "David", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg", imageAlt: "David" },
+            { id: "5", name: "Lisa", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Lisa" },
+          ]}
+          cardTitle="Join thousands of happy pet families who found their perfect companions at Paws & Care"
+          cardTag="Trusted by families everywhere"
+          cardTagIcon={Heart}
+          cardAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Make a Difference?"
+          tagIcon={Heart}
+          title="Support Our Mission"
+          description="Your support helps us continue our lifesaving work. Whether through adoption, volunteering, or donations, every action counts."
+          background={{ variant: "sparkles-gradient" }}
+          buttons={[
+            { text: "Adopt Today", href: "/our-pets" },
+            { text: "Get in Touch", href: "/contact" },
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Navigate",              items: [
+                { label: "Home", href: "/" },
+                { label: "Available Pets", href: "/our-pets" },
+                { label: "Adoption", href: "/#adopt" },
+                { label: "About Us", href: "/about" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Donate", href: "#" },
+                { label: "Volunteer", href: "#" },
+                { label: "Sponsorship", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Adoption Policy", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 Paws & Care Pet Shelter. All rights reserved."
+          bottomRightText="Saving Lives, Building Families"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Heart } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Paws & Care"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Pets", id: "featured-pets" },
+            { name: "Adopt", id: "adopt" },
+            { name: "Support", id: "support" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "/contact" },
+            { name: "Our Pets", id: "/our-pets" },
+            { name: "Privacy Policy", id: "/privacy-policy" },
+            { name: "Terms", id: "/terms" },
+          ]}
+          button={{ text: "Adopt Now", href: "#featured-pets" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <ContactCTA
+          tag="Get in Touch"
+          tagIcon={Heart}
+          title="Contact Paws & Care"
+          description="Have questions about adoption, volunteering, or our services? We'd love to hear from you. Reach out to our team anytime."
+          background={{ variant: "animated-grid" }}
+          buttons={[
+            { text: "Send Message", href: "#contact-form" },
+            { text: "Call Us", href: "tel:+1234567890" },
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info">
+        <ContactText
+          text="Have questions? Our friendly team is here to help. Reach out via phone, email, or visit us in person. We're committed to answering all your inquiries about pet adoption and our services."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Email Us", href: "mailto:info@pawscare.com" },
+            { text: "Call Now", href: "tel:+1234567890" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="hours" data-section="hours">
+        <ContactText
+          text="Visit our shelter during business hours. We're open Monday through Sunday, with extended hours on weekends. Our staff and volunteers are always ready to help you find your perfect companion."
+          animationType="reveal-blur"
+          buttons={[
+            { text: "View Hours", href: "#" },
+            { text: "Get Directions", href: "#" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Navigate",              items: [
+                { label: "Home", href: "/" },
+                { label: "Available Pets", href: "/our-pets" },
+                { label: "Adoption", href: "/#adopt" },
+                { label: "About Us", href: "/about" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Donate", href: "#" },
+                { label: "Volunteer", href: "#" },
+                { label: "Sponsorship", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "/privacy-policy" },
+                { label: "Terms of Service", href: "/terms" },
+                { label: "Adoption Policy", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 Paws & Care Pet Shelter. All rights reserved."
+          bottomRightText="Saving Lives, Building Families"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,47 +1,34 @@
 import type { Metadata } from "next";
-import { DM_Sans } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-import { Roboto } from "next/font/google";
-
+import "./styles/variables.css";
+import "./styles/base.css";
 
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: "Pet Adoption & Shelter | Paws & Care",  description: "Find your perfect pet companion at Paws & Care. Adopt rescue dogs, cats, and small animals. Learn about our adoption process, volunteer, and support our mission to save lives.",  keywords: "pet adoption, animal shelter, rescue dogs, rescue cats, pet rescue, adopt a pet, animal welfare",  robots: {
-    index: true,
-    follow: true,
-  },
-  openGraph: {
-    title: "Pet Adoption & Shelter | Paws & Care",    description: "Find your perfect pet companion. Browse adoptable pets and join our mission to save lives.",    type: "website",    siteName: "Paws & Care",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg",        alt: "Paws & Care Pet Shelter"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Pet Adoption & Shelter | Paws & Care",    description: "Find your perfect pet companion at Paws & Care Pet Shelter",    images: ["http://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg"],
-  },
-};
-
-const roboto = Roboto({
-  variable: "--font-roboto",
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "700", "900"],
-});
+  title: "Paws & Care",  description: "Pet shelter and adoption services"};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body className={`${roboto.variable} antialiased`}>
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <head>
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"
+        ></script>
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"
+        ></script>
+      </head>
+      <body className={inter.variable}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -283,7 +270,9 @@ export default function RootLayout({
   const getElementInfo = (element, assignId = false) => {
     const rect = element.getBoundingClientRect();
     const tagName = element.tagName.toLowerCase();
-            
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
     let className = undefined;
     try {
       if (element.className) {
@@ -311,7 +300,8 @@ export default function RootLayout({
     };
     
     if (tagName === 'img') {
-            info.imageData = {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
         src: originalSrc,
         alt: element.alt || undefined,
         naturalWidth: element.naturalWidth,
@@ -322,7 +312,8 @@ export default function RootLayout({
 
     if (tagName === 'video') {
       const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-            info.imageData = {
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
         src: resolvedSrc,
         alt: element.getAttribute('aria-label') || undefined,
         isBackground: false,
@@ -335,7 +326,8 @@ export default function RootLayout({
     if (backgroundImage && backgroundImage !== 'none') {
       const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
       if (urlMatch) {
-                if (tagName !== 'img') {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
           info.imageData = {
             src: originalBgSrc,
             isBackground: true
@@ -347,7 +339,8 @@ export default function RootLayout({
       }
     }
     
-        info.elementType = elementType;
+    const elementType = getElementType(element);
+    info.elementType = elementType;
     
     if (elementType === 'Button') {
       const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -440,11 +433,13 @@ export default function RootLayout({
   };
 
   const isTextElement = (element) => {
-        return elementType === 'Text';
+    const elementType = getElementType(element);
+    return elementType === 'Text';
   };
 
   const isButtonElement = (element) => {
-        return elementType === 'Button';
+    const elementType = getElementType(element);
+    return elementType === 'Button';
   };
 
   const updateButtonText = (element, newText) => {
@@ -519,7 +514,8 @@ export default function RootLayout({
     };
     
     const handleInput = () => {
-            let currentText = element.textContent;
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
       
       // Ensure there's always at least a space to keep the element editable
       if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -632,7 +628,8 @@ export default function RootLayout({
     }, '*');
     
     if (save && originalContent !== element.textContent) {
-            let finalText = element.textContent;
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
       
       // Trim the final text and convert space-only to empty string for saving
       if (finalText === ' ' || finalText.trim() === '') {
@@ -761,7 +758,7 @@ export default function RootLayout({
     lastMouseX = e.clientX;
     lastMouseY = e.clientY;
 
-    || e.target;
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
 
     if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
       return;
@@ -793,7 +790,8 @@ export default function RootLayout({
       hoverOverlay = createHoverOverlay(target);
     }
     
-        showElementTypeLabel(target, elementType);
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
     
     window.parent.postMessage({
       type: 'webild-element-hover',
@@ -835,7 +833,7 @@ export default function RootLayout({
   e.preventDefault();
   e.stopPropagation();
 
-  || e.target;  
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
   if (!isValidElement(target)) return;
     
     if (selectedElement && selectedElement !== target) {
@@ -880,7 +878,8 @@ export default function RootLayout({
       hoveredElement = null;
     }
     
-        selectedElement.dataset.webildSelector = elementInfo.selector;
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
     showElementTypeLabel(target, elementInfo.elementType);
     
     window.parent.postMessage({
@@ -963,7 +962,8 @@ export default function RootLayout({
       isScrolling = false;
 
       if (lastMouseX > 0 && lastMouseY > 0) {
-                if (target && isValidElement(target) && target !== selectedElement) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
           hoveredElement = target;
 
           const computedStyle = window.getComputedStyle(target);
@@ -977,7 +977,8 @@ export default function RootLayout({
           hoveredElement.classList.add(hoverClass);
           hoverOverlay = createHoverOverlay(target);
 
-                    showElementTypeLabel(target, elementType);
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
 
           window.parent.postMessage({
             type: 'webild-element-hover',
@@ -1000,7 +1001,8 @@ export default function RootLayout({
 
   const saveChangeToStorage = (change) => {
     try {
-            const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
 
       const filteredChanges = existingChanges.filter(c => {
         return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -1020,7 +1022,8 @@ export default function RootLayout({
 
   const clearLocalChanges = () => {
     try {
-            localStorage.removeItem(storageKey);
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
       window.parent.postMessage({
         type: 'webild-local-changes-cleared',
         data: {}
@@ -1069,7 +1072,8 @@ export default function RootLayout({
 
     if (e.data.type === 'webild-cancel-changes') {
       try {
-                const savedChanges = localStorage.getItem(storageKey);
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
         if (savedChanges) {
           const changes = JSON.parse(savedChanges);
           changes.forEach(change => {
@@ -1091,7 +1095,8 @@ export default function RootLayout({
                 if (isBackground) {
                   element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                 } else {
-                                    if (revertTag === 'video' && oldMediaType === 'image') {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
                     swapMediaElement(element, 'img', change.oldValue);
                   } else if (revertTag === 'img' && oldMediaType === 'video') {
                     swapMediaElement(element, 'video', change.oldValue);
@@ -1139,7 +1144,8 @@ export default function RootLayout({
               const el = textElements[i];
               if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
                 element = el;
-                                if (newSelector) {
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
                   element.dataset.webildSelector = newSelector;
                 }
                 break;
@@ -1230,8 +1236,10 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
-                    if (newMediaType === 'video' && allowMediaTypeSwap) {
-                        if (selectedElement === element) selectedElement = swapped;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             element.src = newSrc;
@@ -1239,9 +1247,11 @@ export default function RootLayout({
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'video') {
           oldValue = element.src || element.currentSrc || '';
-                    const sources = element.querySelectorAll('source');
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
           if (newMediaType === 'image' && allowMediaTypeSwap) {
-                        if (selectedElement === element) selectedElement = swapped;
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
             element = swapped;
           } else {
             if (sources.length > 0) {
@@ -1263,7 +1273,8 @@ export default function RootLayout({
         }
 
         if (replaced) {
-          
+          const elementInfo = getElementInfo(element);
+
           let cleanOldValue = oldValue;
           if (oldValue.includes('url(')) {
             const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -1334,7 +1345,13 @@ export default function RootLayout({
     }
   }, true);
   
-    
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
   notifyPageChange();
   
   window.webildCleanup = () => {
@@ -1379,7 +1396,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/our-pets/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Heart, Sparkles, CheckCircle } from "lucide-react";
+
+export default function OurPetsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Paws & Care"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Pets", id: "/our-pets" },
+            { name: "Adopt", id: "#adopt" },
+            { name: "Support", id: "#support" },
+            { name: "FAQ", id: "#faq" },
+            { name: "Contact", id: "/contact" },
+            { name: "Our Pets", id: "/our-pets" },
+          ]}
+          button={{ text: "Adopt Now", href: "#featured-pets" }}
+        />
+      </div>
+
+      <div id="featured-pets" data-section="featured-pets">
+        <ProductCardOne
+          title="All Our Available Pets"
+          description="Browse through our complete collection of wonderful animals waiting for their forever homes. Each pet has been carefully cared for and is ready to join your family."
+          tag="Available Now"
+          tagIcon={Sparkles}
+          products={[
+            {
+              id: "1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=2",              imageAlt: "Max the Golden Retriever"
+            },
+            {
+              id: "2",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=2",              imageAlt: "Luna the Tabby Cat"
+            },
+            {
+              id: "3",              name: "Charlie - German Shepherd Puppy",              price: "Adoption Fee: $120",              imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=2",              imageAlt: "Charlie the Puppy"
+            },
+            {
+              id: "4",              name: "Bella - Cocker Spaniel",              price: "Adoption Fee: $140",              imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=1",              imageAlt: "Bella the Cocker Spaniel"
+            },
+            {
+              id: "5",              name: "Oliver - Orange Tabby",              price: "Adoption Fee: $60",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=1",              imageAlt: "Oliver the Orange Tabby"
+            },
+            {
+              id: "6",              name: "Daisy - Beagle Mix",              price: "Adoption Fee: $110",              imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=1",              imageAlt: "Daisy the Beagle Mix"
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Learn About Adoption", href: "/#adopt" }]}
+        />
+      </div>
+
+      <div id="process" data-section="process">
+        <FeatureCardTwentySeven
+          title="Our Adoption Process"
+          description="We've made the adoption process simple and transparent to ensure a perfect match between you and your new pet."
+          tag="Simple Steps"
+          tagIcon={CheckCircle}
+          features={[
+            {
+              id: "1",              title: "Browse & Meet",              description: "Explore our available pets online or visit us in person. Spend time with the animals to find your perfect match.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=1",              imageAlt: "Browse pets"
+            },
+            {
+              id: "2",              title: "Complete Application",              description: "Fill out our adoption application. We ask a few questions to ensure a good fit between you and your new pet.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=2",              imageAlt: "Application process"
+            },
+            {
+              id: "3",              title: "Home Verification",              description: "Our team may schedule a quick home visit to ensure a safe environment for your new companion.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=3",              imageAlt: "Home visit"
+            },
+            {
+              id: "4",              title: "Welcome Home",              description: "Complete the paperwork and take your new family member home to start your wonderful journey together.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=4",              imageAlt: "Happy adoption"
+            },
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Adopt?"
+          tagIcon={Heart}
+          title="Find Your Perfect Companion"
+          description="Each of these wonderful animals is looking for a loving home. Start your adoption journey today and make a difference in a pet's life."
+          background={{ variant: "radial-gradient" }}
+          buttons={[
+            { text: "Start Adoption", href: "/contact" },
+            { text: "Learn More", href: "/about" },
+          ]}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Navigate",              items: [
+                { label: "Home", href: "/" },
+                { label: "Available Pets", href: "/our-pets" },
+                { label: "Adoption", href: "/#adopt" },
+                { label: "About Us", href: "/about" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Donate", href: "#" },
+                { label: "Volunteer", href: "#" },
+                { label: "Sponsorship", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Adoption Policy", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 Paws & Care Pet Shelter. All rights reserved."
+          bottomRightText="Saving Lives, Building Families"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,227 +1,37 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
-import TextAbout from "@/components/sections/about/TextAbout";
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
-import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { CheckCircle, Handshake, Heart, Share2, Sparkles, Users } from "lucide-react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 
-export default function LandingPage() {
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="small"
-      sizing="largeSmallSizeMediumTitles"
-      background="fluid"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
       cardStyle="solid"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="medium"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Paws & Care"
+        <NavbarLayoutFloatingInline
+          brandName="Webild"
           navItems={[
-            { name: "About", id: "about" },
-            { name: "Pets", id: "featured-pets" },
-            { name: "Adopt", id: "adopt" },
-            { name: "Support", id: "support" },
-            { name: "FAQ", id: "faq" },
+            { name: "Home", id: "/" },
+            { name: "Privacy Policy", id: "/privacy-policy" },
+            { name: "Terms", id: "/terms" },
           ]}
-          button={{ text: "Adopt Now", href: "#featured-pets" }}
+          button={{ text: "Get Started", href: "https://webild.io" }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
-          title="Give a Loving Pet a Forever Home"
-          description="Meet our adorable animals waiting for their perfect family. Every adoption saves lives and opens homes to joy, companionship, and unconditional love."
-          tag="Adopt Today"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
-          buttons={[
-            { text: "Browse Pets", href: "#featured-pets" },
-            { text: "Learn More", href: "#about" },
-          ]}
-          buttonAnimation="slide-up"
-          mediaItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "Happy pets at our shelter" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=1", imageAlt: "Golden Retriever in park" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=1", imageAlt: "Woman with tabby cat" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=1", imageAlt: "German Shepherd puppy" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "Family with dog" },
-          ]}
-        />
-      </div>
-
-      <div id="about" data-section="about">
-        <TextAbout
-          tag="Our Mission"
-          tagIcon={Heart}
-          title="Dedicated to Rescuing, Caring For, and Finding Forever Homes for Abandoned and Neglected Animals"
-          useInvertedBackground={false}
-          buttons={[{ text: "Support Our Mission", href: "#support" }]}
-        />
-      </div>
-
-      <div id="featured-pets" data-section="featured-pets">
-        <ProductCardOne
-          title="Meet Our Adorable Residents"
-          description="Each of these wonderful animals is waiting to join your family. Click to learn more about their personalities and adoption requirements."
-          tag="Available Now"
-          tagIcon={Sparkles}
-          products={[
-            {              id: "1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=2",              imageAlt: "Max the Golden Retriever"},
-            {              id: "2",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=2",              imageAlt: "Luna the Tabby Cat"},
-            {              id: "3",              name: "Charlie - Puppy",              price: "Adoption Fee: $120",              imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=2",              imageAlt: "Charlie the Puppy"},
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "View All Pets", href: "#" }]}
-        />
-      </div>
-
-      <div id="adopt" data-section="adopt">
-        <FeatureCardTwentySeven
-          title="How to Adopt"
-          description="Our adoption process is simple and transparent. We ensure every pet finds the right home where they'll be loved and cared for."
-          tag="Simple Steps"
-          tagIcon={CheckCircle}
-          features={[
-            {              id: "1",              title: "Browse & Meet",              description: "Explore our available pets online or visit us in person. Spend time with the animals to find your perfect match.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=1",              imageAlt: "Browse pets"},
-            {              id: "2",              title: "Application",              description: "Complete our adoption application. We ask a few questions to ensure a good fit between you and your new pet.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=2",              imageAlt: "Application process"},
-            {              id: "3",              title: "Home Visit",              description: "Our team may schedule a quick home visit to ensure a safe environment for your new companion.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=3",              imageAlt: "Home visit"},
-            {              id: "4",              title: "Welcome Home",              description: "Complete the adoption paperwork and take your new family member home to start your wonderful journey together.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=4",              imageAlt: "Happy adoption"},
-          ]}
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "Start Adoption", href: "#" }]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSixteen
-          title="Success Stories"
-          description="Hear from families whose lives have been transformed by our rescue animals. Every adoption is a love story waiting to happen."
-          tag="Happy Homes"
-          tagIcon={Heart}
-          testimonials={[
-            {              id: "1",              name: "Sarah Johnson",              role: "Pet Parent",              company: "New York",              rating: 5,              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg",              imageAlt: "Sarah with her dog"},
-            {              id: "2",              name: "Michael Chen",              role: "Cat Lover",              company: "California",              rating: 5,              imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-looking-his-cat-embracing-wife-indoor-portrait-happy-family-posing-with-pet_197531-12215.jpg",              imageAlt: "Michael with his cat"},
-            {              id: "3",              name: "Emily Rodriguez",              role: "Dog Rescuer",              company: "Texas",              rating: 5,              imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg",              imageAlt: "Emily with her rescue dog"},
-            {              id: "4",              name: "David & Lisa Kim",              role: "Family",              company: "Seattle",              rating: 5,              imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg",              imageAlt: "David and Lisa with their pet"},
-          ]}
-          kpiItems={[
-            { value: "500+", label: "Pets Adopted This Year" },
-            { value: "2,000+", label: "Happy Families" },
-            { value: "15+", label: "Years Saving Lives" },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="support" data-section="support">
-        <MetricCardThree
-          title="How You Can Help"
-          description="There are many ways to support our mission of caring for animals in need. Join our community of heroes."
-          tag="Make a Difference"
-          tagIcon={Handshake}
-          metrics={[
-            { id: "1", icon: Heart, title: "Donate", value: "Every $5 Helps" },
-            { id: "2", icon: Users, title: "Volunteer", value: "Give Your Time" },
-            { id: "3", icon: Share2, title: "Share", value: "Spread the Word" },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Donate Now", href: "#" },
-            { text: "Volunteer", href: "#" },
-          ]}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Find answers to common questions about adoption, our facilities, and how to support our mission."
-          faqs={[
-            {              id: "1",              title: "What is your adoption process?",              content: "Our adoption process includes browsing available pets, completing an application, a potential home visit, and finalizing paperwork. The entire process typically takes 3-7 business days."},
-            {              id: "2",              title: "What are the adoption fees?",              content: "Adoption fees vary based on the animal's age and health status, typically ranging from $50-$200. Fees help cover vaccinations, spaying/neutering, and initial medical care."},
-            {              id: "3",              title: "Can I volunteer at the shelter?",              content: "Yes! We welcome volunteers. Visit our facility or contact us to learn about available volunteer positions in animal care, adoption support, and administrative roles."},
-            {              id: "4",              title: "Do you accept donations?",              content: "Absolutely. We accept monetary donations, pet supplies, and in-kind contributions. Every donation directly helps us care for our animals and find them loving homes."},
-            {              id: "5",              title: "What animals do you have available?",              content: "We rescue and care for dogs, cats, and small animals including rabbits and guinea pigs. Our available animals are listed on our website with full profiles and photos."},
-            {              id: "6",              title: "Are your animals vaccinated and neutered?",              content: "Yes, all adopted animals are vaccinated, spayed/neutered, and microchipped. We provide complete medical records with each adoption."},
-          ]}
-          textPosition="left"
-          useInvertedBackground={false}
-          animationType="smooth"
-          faqsAnimation="slide-up"
-          buttons={[{ text: "Contact Us", href: "#" }]}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Ready to Help?"
-          tagIcon={Heart}
-          title="Transform a Life Today"
-          description="Whether you're looking to adopt, volunteer, or donate, your involvement makes a real difference in the lives of animals in need. Join our community of animal lovers and help us continue our mission."
-          background={{ variant: "radial-gradient" }}
-          buttons={[
-            { text: "Adopt a Pet", href: "#featured-pets" },
-            { text: "Get Involved", href: "#support" },
-          ]}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[
-            {
-              title: "Navigate",              items: [
-                { label: "Home", href: "#" },
-                { label: "Available Pets", href: "#featured-pets" },
-                { label: "Adoption", href: "#adopt" },
-                { label: "About Us", href: "#about" },
-              ],
-            },
-            {
-              title: "Support",              items: [
-                { label: "Donate", href: "#" },
-                { label: "Volunteer", href: "#" },
-                { label: "Sponsorship", href: "#" },
-                { label: "Contact Us", href: "#" },
-              ],
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Adoption Policy", href: "#" },
-              ],
-            },
-          ]}
-          bottomLeftText="© 2025 Paws & Care Pet Shelter. All rights reserved."
-          bottomRightText="Saving Lives, Building Families"
-        />
+        <h1>Welcome to Webild</h1>
+        <p>Your modern web solution</p>
       </div>
     </ThemeProvider>
   );

src/app/privacy-policy/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import LegalSection from "@/components/legal/LegalSection";
+
+export default function PrivacyPolicyPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Webild"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Privacy Policy", id: "/privacy-policy" },
+            { name: "Terms", id: "/terms" },
+          ]}
+          button={{ text: "Get Started", href: "https://webild.io" }}
+        />
+      </div>
+
+      <div id="legal" data-section="legal">
+        <LegalSection
+          layout="page"
+          title="Privacy Policy"
+          subtitle="Last updated: January 15, 2025"
+          sections={[
+            {
+              heading: "1. Information We Collect",              content: [
+                {
+                  type: "paragraph",                  text: "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us with inquiries. This may include your name, email address, postal address, phone number, and payment information."},
+                {
+                  type: "list",                  items: [
+                    "Account registration data",                    "Payment and billing information",                    "Communication preferences",                    "Customer support interactions"],
+                },
+                {
+                  type: "paragraph",                  text: "We also automatically collect certain information when you visit our website, including device information, browser type, IP address, pages visited, and the time and date of your visit."},
+              ],
+            },
+            {
+              heading: "2. How We Use Your Information",              content: [
+                {
+                  type: "paragraph",                  text: "We use the information we collect for various purposes, including:"},
+                {
+                  type: "numbered-list",                  items: [
+                    "Processing transactions and sending related information",                    "Providing customer service and support",                    "Sending promotional communications (with your consent)",                    "Analyzing usage patterns to improve our services",                    "Detecting and preventing fraudulent activity",                    "Complying with legal obligations"],
+                },
+              ],
+            },
+            {
+              heading: "3. Data Security",              content: [
+                {
+                  type: "paragraph",                  text: "We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet is 100% secure, and we cannot guarantee absolute security."},
+              ],
+            },
+            {
+              heading: "4. Sharing Your Information",              content: [
+                {
+                  type: "paragraph",                  text: "We do not sell, trade, or rent your personal information to third parties. We may share your information with:"},
+                {
+                  type: "list",                  items: [
+                    "Service providers who assist in our operations",                    "Legal authorities when required by law",                    "Business partners with your consent"],
+                },
+              ],
+            },
+            {
+              heading: "5. Your Rights and Choices",              content: [
+                {
+                  type: "paragraph",                  text: "You have the right to access, update, or delete your personal information at any time. You can manage your communication preferences and opt out of promotional emails by clicking the unsubscribe link in any email we send you."},
+              ],
+            },
+            {
+              heading: "6. Contact Us",              content: [
+                {
+                  type: "paragraph",                  text: "If you have questions about this Privacy Policy or our privacy practices, please contact us at privacy@example.com or by mail at our office address."},
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #fffffae6;;
-  --primary-cta: #fde047;;
-  --secondary-cta: #1a1a1a;;
-  --accent: #737373;;
-  --background-accent: #737373;; */
+  /* --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000f06e6;;
+  --primary-cta: #0a7039;;
+  --secondary-cta: #f9f9f9;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;; */
 
-  --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #fffffae6;;
-  --primary-cta: #fde047;;
+  --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000f06e6;;
+  --primary-cta: #0a7039;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #1a1a1a;;
+  --secondary-cta: #f9f9f9;;
   --secondary-cta-text: #0c1325;;
-  --accent: #737373;;
-  --background-accent: #737373;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/terms/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import LegalSection from "@/components/legal/LegalSection";
+
+export default function TermsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Webild"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Privacy Policy", id: "/privacy-policy" },
+            { name: "Terms", id: "/terms" },
+          ]}
+          button={{ text: "Get Started", href: "https://webild.io" }}
+        />
+      </div>
+
+      <div id="legal" data-section="legal">
+        <LegalSection
+          layout="page"
+          title="Terms of Service"
+          subtitle="Last updated: January 15, 2025"
+          sections={[
+            {
+              heading: "1. Agreement to Terms",              content: [
+                {
+                  type: "paragraph",                  text: "By accessing and using this website and our services, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service."},
+              ],
+            },
+            {
+              heading: "2. Use License",              content: [
+                {
+                  type: "paragraph",                  text: "Permission is granted to temporarily download one copy of the materials (information or software) on our website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:"},
+                {
+                  type: "list",                  items: [
+                    "Modify or copy the materials",                    "Use the materials for any commercial purpose or for any public display",                    "Attempt to reverse engineer, disassemble, or decompile any software",                    "Remove any copyright or other proprietary notations from the materials",                    "Transfer the materials to another person or 'mirror' the materials on any other server"],
+                },
+              ],
+            },
+            {
+              heading: "3. Disclaimer",              content: [
+                {
+                  type: "paragraph",                  text: "The materials on our website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights."},
+              ],
+            },
+            {
+              heading: "4. Limitations",              content: [
+                {
+                  type: "paragraph",                  text: "In no event shall our company or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our website, even if we or our authorized representative has been notified orally or in writing of the possibility of such damage."},
+              ],
+            },
+            {
+              heading: "5. Accuracy of Materials",              content: [
+                {
+                  type: "paragraph",                  text: "The materials appearing on our website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on our website are accurate, complete, or current. We may make changes to the materials contained on our website at any time without notice."},
+              ],
+            },
+            {
+              heading: "6. Links",              content: [
+                {
+                  type: "paragraph",                  text: "We have not reviewed all of the sites linked to our website and are not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by us of the site. Use of any such linked website is at the user's own risk."},
+              ],
+            },
+            {
+              heading: "7. Modifications",              content: [
+                {
+                  type: "paragraph",                  text: "We may revise these terms of service for our website at any time without notice. By using this website, you are agreeing to be bound by the then current version of these terms of service."},
+              ],
+            },
+            {
+              heading: "8. Governing Law",              content: [
+                {
+                  type: "paragraph",                  text: "These terms and conditions are governed by and construed in accordance with the laws of the jurisdiction where our company is located, and you irrevocably submit to the exclusive jurisdiction of the courts located in that place."},
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}