Add src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Phone, Mail, MapPin, Calendar } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeLargeTitles"
+        background="grid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Services", id: "/services" },
+                { name: "How It Works", id: "/how-it-works" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="Palante STS"
+            />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroOverlayTestimonial
+              title="Let's Start the Conversation"
+              description="We're here to listen, support, and guide your family through life's biggest transitions—on your own timeline."
+              testimonials={[]}
+            />
+        </div>
+
+        <div id="reassurance-1" data-section="reassurance-1">
+            <ContactText
+              text="No Pressure, No Obligation"
+              animationType="reveal-blur"
+              background={{ variant: "sparkles-gradient" }}
+              useInvertedBackground={true}
+            />
+        </div>
+
+        <div id="contact-options" data-section="contact-options">
+            <FeatureCardTwentySeven
+              title="How to Reach Out"
+              description="Choose the method that feels most comfortable for you."
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              features={[
+                { id: "opt1", title: "Phone", descriptions: ["Call us at (555) 123-4567"], imageSrc: "" },
+                { id: "opt2", title: "Email", descriptions: ["hello@palantests.com"], imageSrc: "" },
+                { id: "opt3", title: "Service Area", descriptions: ["Proudly serving your community"], imageSrc: "" },
+                { id: "opt4", title: "Calendar", descriptions: ["Book your free consultation"], imageSrc: "" }
+              ]}
+            />
+        </div>
+
+        <div id="contact-form" data-section="contact-form">
+            <ContactCenter
+              title="Send Us a Message"
+              description="Have a question or need to discuss a specific situation? Fill out the form below."
+              background={{ variant: "plain" }}
+            />
+        </div>
+
+        <div id="reassurance-2" data-section="reassurance-2">
+            <ContactText
+              text="You Don't Have to Do This Alone"
+              animationType="background-highlight"
+              background={{ variant: "gradient-bars" }}
+              useInvertedBackground={true}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              logoText="Palante STS"
+              columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "How It Works", href: "/how-it-works" }, { label: "Contact", href: "/contact" }] }]} 
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}