src/app/about/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
+import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Sparkles, Award, Star } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="mediumLarge"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Sweet Scoops"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Flavors", id: "flavors" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Visit Us", href: "/contact" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="Our Story"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          title="Crafted with passion, served with joy"
+          description="Sweet Scoops started as a dream to bring authentic, premium ice cream to our community. Founded in 2009, we've been committed to creating unforgettable frozen moments for thousands of satisfied customers. Using only natural ingredients and time-tested recipes, every scoop is a testament to our passion for quality and our dedication to customer happiness."
+          metrics={[
+            { value: "15+", title: "Years of Excellence" },
+            { value: "1000s", title: "Happy Customers" },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/coffee-cup-restaurant-s-table_74190-10275.jpg"
+          imageAlt="Sweet Scoops Ice Cream Shop"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardSixteen
+          title="Why Choose Sweet Scoops"
+          description="Experience the difference that quality and care make in every scoop"
+          tag="Our Advantage"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          negativeCard={{
+            items: [
+              "Generic mass-produced flavors",              "Artificial additives and fillers",              "Limited seasonal options",              "Inconsistent quality"
+            ],
+          }}
+          positiveCard={{
+            items: [
+              "Handcrafted premium recipes",              "100% natural ingredients",              "30+ unique flavors year-round",              "Consistent excellence guaranteed"
+            ],
+          }}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFive
+          title="What Our Customers Say"
+          description="Join thousands of satisfied ice cream lovers who trust Sweet Scoops"
+          tag="Customer Reviews"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          testimonials={[
+            {
+              id: "1",              name: "Sarah Johnson, Local Resident",              date: "Date: 15 November 2024",              title: "The best ice cream I've ever had!",              quote: "Sweet Scoops completely changed my ice cream expectations. The flavors are unique and delicious, and I can taste the quality in every bite. The staff is incredibly friendly too!",              tag: "Regular Customer",              avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg"
+            },
+            {
+              id: "2",              name: "Michael Chen, Food Blogger",              date: "Date: 10 November 2024",              title: "A hidden gem in our neighborhood",              quote: "I've been reviewing local restaurants for years, and Sweet Scoops stands out. The artisanal approach and attention to detail are remarkable. Highly recommended!",              tag: "Food Critic",              avatarSrc: "http://img.b2bpic.net/free-photo/hipster-man-talking-by-mobile-phone-cafe_329181-2041.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/hipster-man-talking-by-mobile-phone-cafe_329181-2041.jpg"
+            },
+            {
+              id: "3",              name: "Emily Rodriguez, Parent",              date: "Date: 5 November 2024",              title: "My kids ask to come back every week",              quote: "Finding quality ice cream that kids actually enjoy has been a challenge. Sweet Scoops nails it with their creative flavors and premium quality. We're now regular customers!",              tag: "Family Lover",              avatarSrc: "http://img.b2bpic.net/free-photo/excited-satisfied-redhead-girl-with-short-haircut-posing-against-white-wall_176420-30170.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/excited-satisfied-redhead-girl-with-short-haircut-posing-against-white-wall_176420-30170.jpg"
+            },
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Sweet Scoops"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Flavors", href: "/#flavors" },
+                { label: "About", href: "/about" },
+              ],
+            },
+            {
+              items: [
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "Twitter", href: "https://twitter.com" },
+              ],
+            },
+            {
+              items: [
+                { label: "Hours: Daily 12-9pm", href: "#" },
+                { label: "123 Main Street", href: "#" },
+                { label: "Contact: (555) 123-4567", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Mail } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="mediumLarge"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Sweet Scoops"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Flavors", id: "flavors" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Get In Touch", href: "/contact" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          title="Contact Sweet Scoops"
+          description="Have questions about our ice cream or want to reserve a party? We'd love to hear from you! Reach out and we'll get back to you as soon as possible."
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Your email address"
+          buttonText="Send Message"
+          termsText="We'll respond to your inquiry within 24 hours. Your information is safe with us."
+          onSubmit={(email) => console.log("Contact form submitted:", email)}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Sweet Scoops"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Flavors", href: "/#flavors" },
+                { label: "About", href: "/about" },
+              ],
+            },
+            {
+              items: [
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+                { label: "Twitter", href: "https://twitter.com" },
+              ],
+            },
+            {
+              items: [
+                { label: "Hours: Daily 12-9pm", href: "#" },
+                { label: "123 Main Street", href: "#" },
+                { label: "Contact: (555) 123-4567", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Contact Us", href: "/contact" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,54 +1,48 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Mulish } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import { ServiceWrapper } from "@/providers/serviceWrapper";
+import { Tag } from "@/components/common/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const geist = Geist({
+  variable: "--font-geist-sans",  subsets: ["latin"],
 });
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Sweet Scoops - Premium Handcrafted Ice Cream",  description: "Premium handcrafted ice cream made fresh daily with natural ingredients. Visit Sweet Scoops for unique flavors and delightful frozen desserts.",  keywords: "ice cream, gelato, handcrafted, premium ice cream, frozen desserts, natural ingredients",  openGraph: {
-    title: "Sweet Scoops - Premium Ice Cream",    description: "Discover premium handcrafted ice cream with 30+ unique flavors made fresh daily.",    siteName: "Sweet Scoops",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/close-up-refreshing-ice-cream-with-berries_23-2148513963.jpg",        alt: "colorful ice cream cone summer"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Sweet Scoops - Premium Ice Cream",    description: "Premium handcrafted ice cream with unique flavors made fresh daily.",    images: ["http://img.b2bpic.net/free-photo/close-up-refreshing-ice-cream-with-berries_23-2148513963.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Sweet Scoops - Premium Handcrafted Ice Cream",  description: "Discover premium handcrafted ice cream made fresh daily with the finest ingredients. Visit Sweet Scoops for a delightful frozen experience."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${mulish.variable} antialiased`}
-        >
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.documentElement.classList.add('dark')
+                } else {
+                  document.documentElement.classList.remove('dark')
+                }
+              } catch (e) {}
+            `,
+          }}
+        />
+      </head>
+      <body className={`${geist.variable} ${geistMono.variable} antialiased`} suppressHydrationWarning>
+        <ServiceWrapper>
           <Tag />
           {children}
-        
+        </ServiceWrapper>
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1416,7 +1410,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -30,10 +30,10 @@ export default function LandingPage() {
         <NavbarLayoutFloatingInline
           brandName="Sweet Scoops"
           navItems={[
+            { name: "Home", id: "/" },
             { name: "Flavors", id: "flavors" },
-            { name: "About", id: "about" },
-            { name: "Why Us", id: "features" },
-            { name: "Reviews", id: "testimonials" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
           button={{ text: "Visit Us", href: "#contact" }}
           animateOnLoad={true}
@@ -49,7 +49,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "Explore Flavors", href: "#flavors" },
-            { text: "Learn More", href: "#about" },
+            { text: "Learn More", href: "/about" },
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
@@ -237,9 +237,9 @@ export default function LandingPage() {
           columns={[
             {
               items: [
+                { label: "Home", href: "/" },
                 { label: "Flavors", href: "#flavors" },
-                { label: "About Us", href: "#about" },
-                { label: "Why Us", href: "#features" },
+                { label: "About", href: "/about" },
               ],
             },
             {
@@ -260,7 +260,7 @@ export default function LandingPage() {
               items: [
                 { label: "Privacy Policy", href: "#" },
                 { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" },
+                { label: "Contact Us", href: "/contact" },
               ],
             },
           ]}
@@ -268,4 +268,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}