Merge version_4 into main

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Work", id: "/#portfolio" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Faithful Story Studio"
+            />
+        </div>
+
+        <div id="about-us" data-section="about">
+            <TextSplitAbout
+                title="Meet Liju and Abigail"
+                description={[
+                    "We are Liju and Abigail, a husband-and-wife creative team driven by faith and a passion for visual storytelling. We specialize in capturing the most meaningful moments for families, couples, ministries, and businesses.",                    "Our process is centered on building authentic connections with our clients. We believe that when you are comfortable and at ease, your true story shines through. From the initial consultation to the final delivery, we approach every project with grace, technical excellence, and a heart to serve."
+                ]}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+                columns={[
+                    {
+                        items: [
+                            { label: "Home", href: "/" },
+                            { label: "About", href: "/about" },
+                            { label: "Services", href: "/services" },
+                            { label: "Work", href: "/#portfolio" },
+                        ],
+                    },
+                    {
+                        items: [
+                            { label: "Contact", href: "/contact" },
+                            { label: "FAQ", href: "/#faq" },
+                            { label: "Privacy", href: "#" },
+                        ],
+                    },
+                ]}
+                logoText="Faithful Story Studio"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Work", id: "/#portfolio" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Faithful Story Studio"
+            />
+        </div>
+
+        <div id="contact" data-section="contact">
+            <ContactSplit
+                tag="Get in Touch"
+                title="Let's Tell Your Story"
+                description="Please share your details below so we can learn more about your vision, preferred dates, and budget. We'll be in touch soon to discuss how we can help."
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+                columns={[
+                    {
+                        items: [
+                            { label: "Home", href: "/" },
+                            { label: "About", href: "/about" },
+                            { label: "Services", href: "/services" },
+                            { label: "Work", href: "/#portfolio" },
+                        ],
+                    },
+                    {
+                        items: [
+                            { label: "Contact", href: "/contact" },
+                            { label: "FAQ", href: "/#faq" },
+                            { label: "Privacy", href: "#" },
+                        ],
+                    },
+                ]}
+                logoText="Faithful Story Studio"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -3,15 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import { Camera, Heart, Video } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,22 +26,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Work",
-          id: "portfolio",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Work", id: "/#portfolio" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Faithful Story Studio"
     />
@@ -56,100 +39,16 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Capturing Your Story, Faithfully"
       description="Professional photography and videography for families, couples, events, and organizations who believe in the power of authentic visual storytelling. From intimate outdoor sessions to livestreamed celebrations, we deliver cinematic quality with heart."
       testimonials={[
-        {
-          name: "Sarah Miller",
-          handle: "@sarah_m",
-          testimonial: "An incredible experience capturing our family. Truly professional.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-portrait_23-2149403406.jpg",
-        },
-        {
-          name: "John Doe",
-          handle: "@johnd",
-          testimonial: "Excellent storytelling and technical excellence throughout the project.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-serious-girl-with-long-hair_1139-182.jpg",
-        },
-        {
-          name: "The Smiths",
-          handle: "@smiths",
-          testimonial: "They captured our celebration with such grace and detail.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-stylish-family-playing-autumn-field_1157-28079.jpg",
-        },
-        {
-          name: "Chloe & Sam",
-          handle: "@chloesam",
-          testimonial: "Our wedding photos are beyond what we imagined. Simply beautiful.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-posing-together_23-2149480040.jpg",
-        },
-        {
-          name: "Grace Ministry",
-          handle: "@gracemin",
-          testimonial: "Professional, reliable, and deeply aligned with our mission.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-smiled-wedding-couple-is-hugging-front-red-wall-outdoors-wedding-day-official-marriage_8353-11215.jpg",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View Our Work",
-          href: "#portfolio",
-        },
+        { name: "Sarah Miller", handle: "@sarah_m", testimonial: "An incredible experience capturing our family. Truly professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-portrait_23-2149403406.jpg" },
+        { name: "John Doe", handle: "@johnd", testimonial: "Excellent storytelling and technical excellence throughout the project.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-serious-girl-with-long-hair_1139-182.jpg" },
+        { name: "The Smiths", handle: "@smiths", testimonial: "They captured our celebration with such grace and detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cute-stylish-family-playing-autumn-field_1157-28079.jpg" },
       ]}
+      buttons={[{ text: "View Our Work", href: "/#portfolio" }]}
       imageSrc="http://img.b2bpic.net/free-photo/creepy-girl-with-bat_23-2147680494.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-woman-taking-pics-mirror_23-2149735264.jpg",
-          alt: "Portrait 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/black-white-portrait-beautiful-woman-posing-indoors-chair_23-2149630208.jpg",
-          alt: "Portrait 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/black-white-portrait-beautiful-woman-posing-indoors-chair_23-2149630210.jpg",
-          alt: "Portrait 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-sitting-floor_246466-14.jpg",
-          alt: "Portrait 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-young-man-relaxing-couch_1153-5092.jpg",
-          alt: "Portrait 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ happy clients"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Authentic Storytelling",
-        },
-        {
-          type: "text",
-          text: "Cinematic Quality",
-        },
-        {
-          type: "text",
-          text: "Faith-Centered Vision",
-        },
-        {
-          type: "text",
-          text: "Professional Reliability",
-        },
-        {
-          type: "text",
-          text: "Heart-Driven Craft",
-        },
-      ]}
     />
   </div>
 
@@ -158,250 +57,30 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Our Studio Values"
       metrics={[
-        {
-          label: "Photography Sessions",
-          value: "500+",
-          icon: Camera,
-        },
-        {
-          label: "Events Covered",
-          value: "150+",
-          icon: Video,
-        },
-        {
-          label: "Stories Captured",
-          value: "100%",
-          icon: Heart,
-        },
+        { label: "Photography Sessions", value: "500+", icon: Camera },
+        { label: "Events Covered", value: "150+", icon: Video },
+        { label: "Stories Captured", value: "100%", icon: Heart },
       ]}
       metricsAnimation="slide-up"
     />
   </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwentyOne
-      useInvertedBackground={false}
-      title="Our Professional Services"
-      description="From outdoor photography to live-streaming events, we bring your vision to life."
-      accordionItems={[
-        {
-          id: "outdoor",
-          title: "Outdoor Photography",
-          content: "Meaningful and authentic outdoor portrait and lifestyle photography sessions.",
-        },
-        {
-          id: "events",
-          title: "Event Coverage",
-          content: "Cinematic and heartfelt event coverage for weddings, celebrations, and ministry events.",
-        },
-        {
-          id: "live",
-          title: "Live Streaming",
-          content: "Professional live streaming services to connect your community in real-time.",
-        },
-        {
-          id: "branded",
-          title: "Branded Content",
-          content: "High-quality visual storytelling for faith-based nonprofits and organizations.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/cute-family-playing-autumn-field_1157-27679.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="portfolio" data-section="portfolio">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Family Portrait",
-          price: "Session",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-attractive-family-with-little-baby-son-posing-beautiful-autumn-pine-forest-sunny-day-handsome-man-his-pretty-brunette-wife_1328-3873.jpg",
-        },
-        {
-          id: "p2",
-          name: "Wedding Ceremony",
-          price: "Coverage",
-          imageSrc: "http://img.b2bpic.net/free-photo/groom-holds-his-bride-his-arms-somewhere-nature_1153-5986.jpg",
-        },
-        {
-          id: "p3",
-          name: "Branded Story",
-          price: "Content",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-studio-working-his-passion-model_23-2148424445.jpg",
-        },
-        {
-          id: "p4",
-          name: "Live Event",
-          price: "Stream",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-cute-little-daughter-walking-forest-sunset_1303-24062.jpg",
-        },
-        {
-          id: "p5",
-          name: "Couple Session",
-          price: "Art",
-          imageSrc: "http://img.b2bpic.net/free-photo/garlands-greenery-pink-flowers-hang-from-balcony-stairs_1304-3760.jpg",
-        },
-        {
-          id: "p6",
-          name: "Nonprofit Story",
-          price: "Film",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-male-blogger-recording-station_1303-22004.jpg",
-        },
-      ]}
-      title="Our Recent Work"
-      description="A curated selection of our visual storytelling across various projects."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          title: "Amazing Work",
-          quote: "The team captured our story beautifully.",
-          name: "Sarah M.",
-          role: "Client",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-looking-side-park_839833-34334.jpg",
-        },
-        {
-          id: "t2",
-          title: "Truly Professional",
-          quote: "Technical excellence mixed with a genuine heart for our mission.",
-          name: "David W.",
-          role: "Organizer",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-caucasian-woman-posing-park_181624-55023.jpg",
-        },
-        {
-          id: "t3",
-          title: "Highly Recommend",
-          quote: "They made us feel comfortable and at ease during our shoot.",
-          name: "The Johnson Family",
-          role: "Clients",
-          imageSrc: "http://img.b2bpic.net/free-photo/family-with-little-son-autumn-park_1157-22267.jpg",
-        },
-        {
-          id: "t4",
-          title: "Stunning Results",
-          quote: "The videography was cinematic and very moving.",
-          name: "Mark P.",
-          role: "Couple",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-senior-couple-cuddling_23-2148333669.jpg",
-        },
-        {
-          id: "t5",
-          title: "Wonderful Team",
-          quote: "They were so accommodating and delivered on time.",
-          name: "Grace Ministries",
-          role: "Partner",
-          imageSrc: "http://img.b2bpic.net/free-photo/groom-black-tuxedo-hugs-tender-stunning-bride-while-they-stan_8353-8052.jpg",
-        },
-      ]}
-      title="Client Stories"
-      description="Authentic experiences from those we have served."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "What kind of events do you cover?",
-          content: "We cover weddings, ministry celebrations, corporate events, and live streams.",
-        },
-        {
-          id: "f2",
-          title: "Do you travel?",
-          content: "Yes, we travel for photography and videography assignments.",
-        },
-        {
-          id: "f3",
-          title: "How long until we receive content?",
-          content: "Depending on the project, turnaround is typically 2-4 weeks.",
-        },
-      ]}
-      sideTitle="Frequently Asked Questions"
-      faqsAnimation="blur-reveal"
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Grace Ministry",
-        "Community Outreach",
-        "Faith Network",
-        "Youth Alliance",
-        "Charity Foundations",
-        "Christian Education",
-        "Wedding Services",
-      ]}
-      title="Trusted By Faith Organizations"
-      description="Partnering with ministries and non-profits dedicated to making an impact."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Let's capture your story, faithfully."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "mailto:hello@studio.com",
-        },
-      ]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
         {
           items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Portfolio",
-              href: "#portfolio",
-            },
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Services", href: "/services" },
+            { label: "Work", href: "/#portfolio" },
           ],
         },
         {
           items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
+            { label: "Contact", href: "/contact" },
+            { label: "FAQ", href: "/#faq" },
+            { label: "Privacy", href: "#" },
           ],
         },
       ]}
@@ -411,4 +90,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Work", id: "/#portfolio" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Faithful Story Studio"
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+                columns={[
+                    {
+                        items: [
+                            { label: "Home", href: "/" },
+                            { label: "About", href: "/about" },
+                            { label: "Services", href: "/services" },
+                            { label: "Work", href: "/#portfolio" },
+                        ],
+                    },
+                    {
+                        items: [
+                            { label: "Contact", href: "/contact" },
+                            { label: "FAQ", href: "/#faq" },
+                            { label: "Privacy", href: "#" },
+                        ],
+                    },
+                ]}
+                logoText="Faithful Story Studio"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}