Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -10,7 +10,7 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Paw, Sparkles } from "lucide-react";
+import { Heart, Award, CheckCircle, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -20,7 +20,7 @@ export default function LandingPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumSizeLargeTitles"
-      background="grid"
+      background="circleGradient"
       cardStyle="soft-shadow"
       primaryButtonStyle="primary-glow"
       secondaryButtonStyle="radial-glow"
@@ -29,7 +29,7 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "Home", id: "/" },
+            { name: "Home", id: "home" },
             { name: "About", id: "about" },
             { name: "Products", id: "products" },
             { name: "Services", id: "services" },
@@ -45,13 +45,13 @@ export default function LandingPage() {
         <HeroBillboardRotatedCarousel
           title="Welcome to Pet City"
           description="Your one-stop shop for everything your furry friends need. Quality pet products, expert care, and a community of pet lovers."
-          background={{ variant: "grid" }}
+          background={{ variant: "sparkles-gradient" }}
           tag="Pet Care Excellence"
-          tagIcon={Paw}
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Shop Now", href: "products" },
-            { text: "Learn More", href: "about" }
+            { text: "Shop Now", href: "#products" },
+            { text: "Learn More", href: "#about" }
           ]}
           buttonAnimation="slide-up"
           carouselItems={[
@@ -86,7 +86,7 @@ export default function LandingPage() {
           description={[
             "Since 2015, Pet City has been dedicated to providing the highest quality pet care products and services to pet owners throughout the region.",            "We believe every pet deserves the best. Our carefully curated selection of pet food, toys, grooming supplies, and accessories ensures your furry friends receive only the finest. Our expert team is passionate about helping you make informed choices for your pet's health and happiness."
           ]}
-          buttons={[{ text: "Explore Our Services", href: "services" }]}
+          buttons={[{ text: "Explore Our Services", href: "#services" }]}
           showBorder={true}
           useInvertedBackground={false}
           ariaLabel="About Pet City section"
@@ -216,24 +216,24 @@ export default function LandingPage() {
           columns={[
             {
               title: "Products",              items: [
-                { label: "Dog Food", href: "products" },
-                { label: "Cat Supplies", href: "products" },
-                { label: "Toys & Accessories", href: "products" },
-                { label: "Pet Care", href: "products" }
+                { label: "Dog Food", href: "#products" },
+                { label: "Cat Supplies", href: "#products" },
+                { label: "Toys & Accessories", href: "#products" },
+                { label: "Pet Care", href: "#products" }
               ]
             },
             {
               title: "Services",              items: [
-                { label: "Grooming", href: "services" },
-                { label: "Training", href: "services" },
+                { label: "Grooming", href: "#services" },
+                { label: "Training", href: "#services" },
                 { label: "Boarding", href: "#" },
                 { label: "Veterinary", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "about" },
-                { label: "Contact", href: "contact" },
+                { label: "About Us", href: "#about" },
+                { label: "Contact", href: "#contact" },
                 { label: "Careers", href: "#" },
                 { label: "Blog", href: "#" }
               ]

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-poppins), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-poppins), sans-serif;
+  font-family: var(--font-public-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #fafffb;;
-  --card: #f7fffa;;
-  --foreground: #001a0a;;
+  /* --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000f06e6;;
   --primary-cta: #0a7039;;
-  --secondary-cta: #ffffff;;
-  --accent: #a8d9be;;
-  --background-accent: #6bbf8e;; */
+  --secondary-cta: #f9f9f9;;
+  --accent: #35c18b;;
+  --background-accent: #d4e8d9;; */
 
-  --background: #fafffb;;
-  --card: #f7fffa;;
-  --foreground: #001a0a;;
+  --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000f06e6;;
   --primary-cta: #0a7039;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f9f9f9;;
   --secondary-cta-text: #000f06e6;;
-  --accent: #a8d9be;;
-  --background-accent: #6bbf8e;;
+  --accent: #35c18b;;
+  --background-accent: #d4e8d9;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);