Update src/app/page.tsx

2026-05-12 21:49:33 +00:00
parent d4d7c4e9d0
commit 5fe66b9379
1 changed files with 55 additions and 56 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,14 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Instagram, Sun, Twitter } from "lucide-react";
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import { Instagram, Sun, Twitter, CheckCircle } from "lucide-react";

 export default function LandingPage() {
  return (
@@ -19,13 +19,13 @@ export default function LandingPage() {
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
-        contentWidth="smallMedium"
-        sizing="largeSmall"
-        background="grid"
-        cardStyle="gradient-mesh"
-        primaryButtonStyle="radial-glow"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="aurora"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
-        headingFontWeight="light"
+        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
@@ -34,6 +34,7 @@ export default function LandingPage() {
              { name: "Home", id: "hero" },
              { name: "About", id: "about" },
              { name: "Services", id: "features" },
+              { name: "Pricing", id: "pricing" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="ClearSky Solar"
@@ -41,90 +42,91 @@ export default function LandingPage() {
        </div>

        <div id="hero" data-section="hero">
-          <HeroSplitDoubleCarousel
-            background={{ variant: "gradient-bars" }}
+          <HeroSplitTestimonial
+            background={{ variant: "sparkles-gradient" }}
            title="Halifax's Trusted Solar Experts"
            description="Providing clean, reliable solar energy solutions to Nova Scotia homes. Harness the power of the sun and reduce your carbon footprint today."
-            leftCarouselItems={[
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdpfhWQglZNo6dRoN1TnHJSjGk/uploaded-1778622387033-uo3llwk0.jpg?_wi=1", imageAlt: "Solar house" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-holding-tablet-check-solar-roof_609648-2159.jpg", imageAlt: "Solar house" },
-            ]}
-            rightCarouselItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/electric-farm-with-panels-producing-clean-ecologic-energy_169016-17846.jpg", imageAlt: "Solar house" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/solar-panel-closeup-with-sun-flare_23-2152002181.jpg", imageAlt: "Solar house" },
-            ]}
            tag="Nova Scotia Solar"
-            buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
            tagIcon={Sun}
+            buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
+            testimonials={[
+                { name: "Sarah Miller", handle: "@smiller", testimonial: "ClearSky Solar made our transition seamless. Our bills have dropped significantly!", rating: 5 },
+                { name: "James Henderson", handle: "@jhenderson", testimonial: "Professional, clean installation, and amazing energy monitoring tools.", rating: 5 }
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdpfhWQglZNo6dRoN1TnHJSjGk/uploaded-1778622387033-uo3llwk0.jpg?_wi=1"
          />
        </div>

        <div id="about" data-section="about">
-          <TextSplitAbout
+          <SplitAbout
            useInvertedBackground={false}
            title="Why Choose ClearSky Solar?"
-            description={[
-              "We are Halifax's premier solar installation partner, committed to quality, efficiency, and exceptional service for Nova Scotia residents.",              "Our mission is to make renewable energy accessible and affordable for every home, providing long-term cost savings and environmental benefits."
+            description="We are Halifax's premier solar installation partner, committed to quality, efficiency, and exceptional service for Nova Scotia residents. Our mission is to make renewable energy accessible and affordable for every home, providing long-term cost savings and environmental benefits."
+            bulletPoints={[
+                { title: "Certified Experts", description: "Fully licensed solar installers across Nova Scotia.", icon: CheckCircle },
+                { title: "Affordable Solutions", description: "Flexible financing plans to suit your budget.", icon: CheckCircle },
+                { title: "Local Support", description: "Reliable maintenance from a local Halifax team.", icon: CheckCircle }
            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-holding-tablet-check-solar-roof_609648-2159.jpg"
          />
        </div>

        <div id="features" data-section="features">
-          <FeatureCardTwelve
-            animationType="slide-up"
-            textboxLayout="default"
+          <FeatureCardTwentyThree
+            animationType="blur-reveal"
+            textboxLayout="split"
            useInvertedBackground={true}
-            features={[
-              { id: "1", label: "Installation", title: "Expert Rooftop Installations", items: ["Professional site analysis", "Custom system design", "Certified installation team"] },
-              { id: "2", label: "Storage", title: "Battery Backup Solutions", items: ["High-capacity storage units", "Seamless integration", "Off-grid reliability"] },
-              { id: "3", label: "Monitoring", title: "Smart Energy Tracking", items: ["Real-time power monitoring", "Mobile app control", "Efficiency analytics"] },
-            ]}
            title="Comprehensive Solar Services"
            description="Our expertise ensures your transition to solar energy is seamless, professional, and built to last."
+            features={[
+              { id: "1", title: "Expert Rooftop Installations", tags: ["Install", "Design"] },
+              { id: "2", title: "Battery Backup Solutions", tags: ["Storage", "Reliable"] },
+              { id: "3", title: "Smart Energy Tracking", tags: ["Monitoring", "Apps"] },
+            ]}
          />
        </div>

        <div id="pricing" data-section="pricing">
-          <PricingCardFive
-            animationType="slide-up"
-            textboxLayout="default"
+          <PricingCardTwo
+            animationType="blur-reveal"
+            textboxLayout="split"
            useInvertedBackground={false}
-            plans={[
-              { id: "start", tag: "Essentials", price: "$12,000", period: "installation", description: "Perfect for starter energy needs.", button: { text: "Select", href: "#contact" }, featuresTitle: "Included", features: ["Core panel setup", "Standard inverter", "10-year warranty"] },
-              { id: "pro", tag: "Most Popular", price: "$18,500", period: "installation", description: "The ideal complete home system.", button: { text: "Select", href: "#contact" }, featuresTitle: "Included", features: ["Full home system", "Battery readiness", "25-year warranty", "Priority support"] },
-            ]}
            title="Transparent Pricing Plans"
            description="Choose a solar solution that fits your energy needs and budget perfectly."
+            plans={[
+              { id: "start", badge: "Essentials", price: "$12,000", subtitle: "Perfect for starter energy needs.", buttons: [{ text: "Select", href: "#contact" }], features: ["Core panel setup", "Standard inverter", "10-year warranty"] },
+              { id: "pro", badge: "Most Popular", price: "$18,500", subtitle: "The ideal complete home system.", buttons: [{ text: "Select", href: "#contact" }], features: ["Full home system", "Battery readiness", "25-year warranty"] },
+            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
-          <TestimonialCardTwo
-            animationType="slide-up"
-            textboxLayout="default"
+          <TestimonialCardOne
+            animationType="blur-reveal"
+            textboxLayout="split"
            useInvertedBackground={true}
-            testimonials={[
-              { id: "1", name: "Sarah Miller", role: "Homeowner", testimonial: "ClearSky Solar made our transition seamless. Our bills have dropped significantly!" },
-              { id: "2", name: "James Henderson", role: "Homeowner", testimonial: "Professional, clean installation, and amazing energy monitoring tools." },
-            ]}
            title="Hear from Halifax Homeowners"
            description="Join our growing list of satisfied energy-independent clients across Nova Scotia."
+            gridVariant="bento-grid"
+            testimonials={[
+              { id: "1", name: "Sarah Miller", role: "Homeowner", company: "Halifax", rating: 5 },
+              { id: "2", name: "James Henderson", role: "Homeowner", company: "Dartmouth", rating: 5 },
+            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
-            textboxLayout="default"
+            textboxLayout="split"
            useInvertedBackground={false}
            faqs={[
              { id: "1", title: "Does solar work in winter?", content: "Absolutely! Nova Scotia experiences long daylight hours in summer that offset winter production effectively." },
              { id: "2", title: "What's the expected lifespan?", content: "Our systems are engineered for 25+ years of reliable, clean energy generation." },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2148920650.jpg"
-            mediaAnimation="slide-up"
+            faqsAnimation="slide-up"
            title="Common Solar Questions"
            description="Find answers to help you start your journey toward energy independence."
-            faqsAnimation="slide-up"
          />
        </div>

@@ -132,13 +134,10 @@ export default function LandingPage() {
          <ContactSplit
            tag="Contact Us"
            useInvertedBackground={true}
-            background={{ variant: "plain" }}
+            background={{ variant: "sparkles-gradient" }}
            title="Get Your Solar Quote"
            description="Start saving on your energy bills. Contact us for a free site assessment today."
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdpfhWQglZNo6dRoN1TnHJSjGk/uploaded-1778622387033-uo3llwk0.jpg?_wi=2"
-            mediaAnimation="slide-up"
-            inputPlaceholder="Enter your Halifax address"
-            buttonText="Request Quote"
          />
        </div>

@@ -152,4 +151,4 @@ export default function LandingPage() {
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}