src/app/location/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import LegalSection from "@/components/legal/LegalSection";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { MapPin, Phone, Clock } from "lucide-react";
+
+export default function LocationPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Main Attraction Barber"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Team", id: "team" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+            { name: "Location", id: "location" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Visit Us Today"
+          description="Located in the heart of Sumter, South Carolina. Stop by and experience our premium barbering services."
+          tag="Our Location"
+          tagIcon={MapPin}
+          tagAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-welldressed-arabian-man-smoke-cigar-with-glass-whiskey-balcony-pub_627829-5920.jpg?_wi=2"
+          imageAlt="Main Attraction Barber storefront"
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          buttons={[
+            { text: "Get Directions", href: "https://maps.google.com" },
+            { text: "Book Appointment", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="location-info" data-section="location-info">
+        <LegalSection
+          layout="section"
+          title="Contact Information"
+          subtitle="Main Attraction Barber"
+          sections={[
+            {
+              heading: "Address",              content: [
+                {
+                  type: "paragraph",                  text: "101 N Main St, Sumter, SC"},
+              ],
+            },
+            {
+              heading: "Phone",              content: [
+                {
+                  type: "paragraph",                  text: "803-773-7700"},
+              ],
+            },
+            {
+              heading: "Hours of Operation",              content: [
+                {
+                  type: "list",                  items: [
+                    "Monday - Friday: 9:00 AM - 6:00 PM",                    "Saturday: 9:00 AM - 5:00 PM",                    "Sunday: Closed"],
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Main Attraction Barber"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,7 +9,7 @@ import TestimonialCardThirteen from "@/components/sections/testimonial/Testimoni
 import TeamCardOne from "@/components/sections/team/TeamCardOne";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { Scissors, Sparkles, Award, Star, Users, Briefcase } from "lucide-react";
+import { Scissors, Sparkles, Award, Star, Users, Briefcase, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -34,6 +34,7 @@ export default function LandingPage() {
             { name: "Team", id: "team" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Contact", id: "contact" },
+            { name: "Location", id: "location" },
           ]}
         />
       </div>