Update src/app/page.tsx

Merge version_2 into main

src/app/how-it-works/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactText from '@/components/sections/contact/ContactText';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { Facebook, Instagram, Twitter } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "How It Works", id: "/how-it-works" },
+  { name: "About Us", id: "/about" },
+  { name: "Our Services", id: "/our-service" },
+  { name: "Challenges", id: "/#challenges" },
+  { name: "Insights", id: "/#insights" }
+];
+
+const footerSocialLinks = [
+  {
+    icon: Twitter,
+    href: "https://twitter.com/privatejetcards",    ariaLabel: "Follow us on X (formerly Twitter)"
+  },
+  {
+    icon: Instagram,
+    href: "https://instagram.com/privatejetcards",    ariaLabel: "Follow us on Instagram"
+  },
+  {
+    icon: Facebook,
+    href: "https://facebook.com/privatejetcardcomparisons",    ariaLabel: "Follow us on Facebook"
+  }
+];
+
+export default function HowItWorksPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="large"
+        background="fluid"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/airplane-runway_23-2152005475.jpg"
+            logoAlt="Private Jet Card Comparisons Logo"
+            brandName="Private Jet Card Comparisons"
+            button={{
+              text: "Start Comparing Programs Free",              href: "/#lead-capture"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardTestimonial
+            useInvertedBackground={false}
+            background={{
+              variant: "plain"}}
+            title="How It Works: Your Path to Smarter Private Aviation"
+            description="Our straightforward process ensures you find the perfect private jet solution without the guesswork or sales pressure."
+            tag="Simple. Transparent. Effective."
+            buttons={[
+              {
+                text: "Get My Free Comparison",                href: "/#lead-capture"},
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/airport-aircraft-airplane-aviation-transportation-travel_53876-23316.jpg?_wi=1"
+            imageAlt="Private jet flying smoothly"
+            mediaAnimation="slide-up"
+            testimonials={[
+              {
+                name: "Satisfied Client",                handle: "@client",                testimonial: "This service changed how I approach private jet travel. Truly indispensable!",                rating: 5,
+                imageSrc: "https://avatar.iran.liara.run/public/boy?username=client1",                imageAlt: "Client avatar"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="how-it-works-content" data-section="how-it-works-content">
+          <FeatureCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
+            features={[
+              {
+                title: "1. Define Your Needs",                description: "Answer a few simple questions about your typical flying habits, destinations, and preferences. It takes minutes.",                imageSrc: "http://img.b2bpic.net/free-photo/shoulder-shot-anonymous-woman-filling-out-application-form_1098-18914.jpg?_wi=1",                imageAlt: "Questionnaire icon"},
+              {
+                title: "2. Get Personalized Comparisons",                description: "Receive a detailed, side-by-side analysis of jet card and fractional programs perfectly matched to your criteria.",                imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=1",                imageAlt: "Comparison chart icon"},
+              {
+                title: "3. Fly Confidently",                description: "Make an informed decision, knowing you’ve secured the optimal program for your lifestyle and budget, stress-free.",                imageSrc: "http://img.b2bpic.net/free-vector/travel-element-collection-with-flat-design_23-2147831194.jpg?_wi=1",                imageAlt: "Private jet flying smoothly"},
+            ]}
+            title="Our Streamlined Process"
+            description="From initial inquiry to confident travel, we simplify every step."
+            tag="Transparent & Efficient"
+          />
+        </div>
+
+        <div id="lead-capture" data-section="lead-capture">
+          <ContactText
+            useInvertedBackground={true}
+            background={{
+              variant: "plain"}}
+            text="Stop Guessing. Start Flying Smarter. Get Your Free, Unbiased Jet Card Comparison Today."
+            buttons={[
+              {
+                text: "Get Your Personalized Comparison",                href: "/#lead-capture"},
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="http://img.b2bpic.net/free-photo/airplane-runway_23-2152005475.jpg"
+            logoAlt="Private Jet Card Comparisons Logo"
+            logoText="Private Jet Card Comparisons"
+            copyrightText="© 2024 Private Jet Card Comparisons. All rights reserved."
+            socialLinks={footerSocialLinks}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -13,11 +13,35 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import { Facebook, Instagram, Twitter } from "lucide-react";
 
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "How It Works", id: "/how-it-works" },
+  { name: "About Us", id: "/about" },
+  { name: "Our Services", id: "/our-service" },
+  { name: "Challenges", id: "#challenges" },
+  { name: "Insights", id: "#insights" }
+];
+
+const footerSocialLinks = [
+  {
+    icon: Twitter,
+    href: "https://twitter.com/privatejetcards",    ariaLabel: "Follow us on X (formerly Twitter)"
+  },
+  {
+    icon: Instagram,
+    href: "https://instagram.com/privatejetcards",    ariaLabel: "Follow us on Instagram"
+  },
+  {
+    icon: Facebook,
+    href: "https://facebook.com/privatejetcardcomparisons",    ariaLabel: "Follow us on Facebook"
+  }
+];
+
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
         contentWidth="mediumSmall"
         sizing="large"
@@ -30,18 +54,7 @@ export default function LandingPage() {
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
-      navItems={[
+      navItems={navItems}
-        {
-          name: "Home",          id: "#hero"},
-        {
-          name: "Challenges",          id: "#challenges"},
-        {
-          name: "How It Works",          id: "#how-it-works"},
-        {
-          name: "Insights",          id: "#insights"},
-        {
-          name: "About",          id: "#about-doug"},
-      ]}
       logoSrc="http://img.b2bpic.net/free-photo/airplane-runway_23-2152005475.jpg"
       logoAlt="Private Jet Card Comparisons Logo"
       brandName="Private Jet Card Comparisons"
@@ -80,7 +93,7 @@ export default function LandingPage() {
         {
           text: "Start Comparing Programs Free",          href: "#lead-capture"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/airport-aircraft-airplane-aviation-transportation-travel_53876-23316.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/airport-aircraft-airplane-aviation-transportation-travel_53876-23316.jpg?_wi=2"
       imageAlt="Subtle private jet silhouette over a runway at dawn"
       mediaAnimation="slide-up"
       avatars={[
@@ -108,6 +121,8 @@ export default function LandingPage() {
         {
           type: "text",          text: "Trusted Private Jet Advisors"},
       ]}
+      tagAnimation="slide-up"
+      buttonAnimation="slide-up"
     />
   </div>
 
@@ -122,6 +137,7 @@ export default function LandingPage() {
       tag="Your Trusted Guide"
       speed={40}
       showCard={false}
+      tagAnimation="slide-up"
     />
   </div>
 
@@ -142,6 +158,7 @@ export default function LandingPage() {
       title="Flying Private Shouldn't Mean Flying Blind."
       description="The private aviation market is designed to be opaque. Without independent guidance, you're exposed to hidden costs and biased recommendations."
       tag="Uncover the Truth"
+      tagAnimation="slide-up"
     />
   </div>
 
@@ -153,11 +170,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "1. Define Your Needs",          description: "Answer a few simple questions about your typical flying habits, destinations, and preferences. It takes minutes.",          imageSrc: "http://img.b2bpic.net/free-photo/shoulder-shot-anonymous-woman-filling-out-application-form_1098-18914.jpg",          imageAlt: "Questionnaire icon"},
+          title: "1. Define Your Needs",          description: "Answer a few simple questions about your typical flying habits, destinations, and preferences. It takes minutes.",          imageSrc: "http://img.b2bpic.net/free-photo/shoulder-shot-anonymous-woman-filling-out-application-form_1098-18914.jpg?_wi=2",          imageAlt: "Questionnaire icon"},
         {
-          title: "2. Get Personalized Comparisons",          description: "Receive a detailed, side-by-side analysis of jet card and fractional programs perfectly matched to your criteria.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",          imageAlt: "Comparison chart icon"},
+          title: "2. Get Personalized Comparisons",          description: "Receive a detailed, side-by-side analysis of jet card and fractional programs perfectly matched to your criteria.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=2",          imageAlt: "Comparison chart icon"},
         {
-          title: "3. Fly Confidently",          description: "Make an informed decision, knowing you’ve secured the optimal program for your lifestyle and budget, stress-free.",          imageSrc: "http://img.b2bpic.net/free-vector/travel-element-collection-with-flat-design_23-2147831194.jpg",          imageAlt: "Private jet flying smoothly"},
+          title: "3. Fly Confidently",          description: "Make an informed decision, knowing you’ve secured the optimal program for your lifestyle and budget, stress-free.",          imageSrc: "http://img.b2bpic.net/free-vector/travel-element-collection-with-flat-design_23-2147831194.jpg?_wi=2",          imageAlt: "Private jet flying smoothly"},
       ]}
       title="Your Path to Smarter Private Aviation"
       description="Our straightforward process ensures you find the perfect private jet solution without the guesswork or sales pressure."
@@ -166,6 +183,8 @@ export default function LandingPage() {
         {
           text: "Get My Free Comparison",          href: "#lead-capture"},
       ]}
+      tagAnimation="slide-up"
+      buttonAnimation="slide-up"
     />
   </div>
 
@@ -216,6 +235,8 @@ export default function LandingPage() {
         {
           id: "3",          category: "Industry Trends",          title: "Q3 Private Flight Activity: What the Numbers Mean",          excerpt: "Analyzing recent flight data to understand current demand, popular routes, and future projections for private aviation.",          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-traveling-london_23-2149259452.jpg",          imageAlt: "Flight activity dashboard",          authorName: "Doug Gollan",          authorAvatar: "http://img.b2bpic.net/free-photo/businessman-with-colleague_1098-14876.jpg",          date: "Oct 15, 2023"},
       ]}
+      tagAnimation="slide-up"
+      buttonAnimation="slide-up"
     />
   </div>
 
@@ -238,6 +259,7 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/fbi-agent-focused-investigation_1098-14749.jpg"
       imageAlt="Doug Gollan, Founder of Private Jet Card Comparisons"
       mediaAnimation="slide-up"
+      tagAnimation="slide-up"
     />
   </div>
 
@@ -245,12 +267,13 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={true}
       background={{
-        variant: "plain"}}
+        variant: "sparkles-gradient"}}
       text="Stop Guessing. Start Flying Smarter. Get Your Free, Unbiased Jet Card Comparison Today."
       buttons={[
         {
-          text: "Get Your Personalized Comparison",          href: "#"},
+          text: "Get Your Personalized Comparison",          href: "#lead-capture"},
       ]}
+      animationType="reveal-blur"
     />
   </div>
 
@@ -260,17 +283,7 @@ export default function LandingPage() {
       logoAlt="Private Jet Card Comparisons Logo"
       logoText="Private Jet Card Comparisons"
       copyrightText="© 2024 Private Jet Card Comparisons. All rights reserved."
-      socialLinks={[
+      socialLinks={footerSocialLinks}
-        {
-          icon: Twitter,
-          href: "https://twitter.com/privatejetcards",          ariaLabel: "Follow us on X (formerly Twitter)"},
-        {
-          icon: Instagram,
-          href: "https://instagram.com/privatejetcards",          ariaLabel: "Follow us on Instagram"},
-        {
-          icon: Facebook,
-          href: "https://facebook.com/privatejetcardcomparisons",          ariaLabel: "Follow us on Facebook"},
-      ]}
     />
   </div>
       </ReactLenis>