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

2026-06-07 20:43:21 +00:00
parent d3746aabd0
commit bf3d03e110
1 changed files with 126 additions and 0 deletions
--- a/src/app/how-it-works/page.tsx
+++ b/src/app/how-it-works/page.tsx
@@ -0,0 +1,126 @@
+"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"
+            imageAlt="Private jet flying smoothly"
+            mediaAnimation="slide-up"
+          />
+        </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",                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: "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="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>
+  );
+}