Update src/app/page.tsx

This commit is contained in:
2026-05-20 10:52:32 +00:00
parent 0fc61dca4d
commit bdf55caaa9

View File

@@ -11,7 +11,7 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Cloud, Compass, MapPin, Moon, Sun, Wind, Zap } from "lucide-react";
import { Cloud, Compass, MapPin, Moon, Sun, Wind, Zap, Thermometer, Anchor } from "lucide-react";
export default function LandingPage() {
return (
@@ -28,393 +28,162 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Features",
id: "features",
},
{
name: "Stats",
id: "metrics",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "FAQ",
id: "faq",
},
]}
brandName="SkyCast"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Features", id: "features" },
{ name: "Stats", id: "metrics" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
]}
brandName="SkyCast"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
title="Weather forecasting, redefined."
description="Get real-time insights with SkyCast. Your daily weather companion, powered by precision technology and a stunning golden UI experience."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-smartphone-hand-with-finger-screen_107791-15089.jpg?_wi=1",
imageAlt: "Dashboard Preview",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-suffering-from-cybersickness-from-using-tech-device-too-long_23-2151393755.jpg?_wi=1",
imageAlt: "Rain Forecast",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg?_wi=1",
imageAlt: "Humidity Data",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/weather-icons-meteorology-forecast-night_107791-17421.jpg",
imageAlt: "Sunset View",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-play-dough-clouds-sun_23-2149554814.jpg",
imageAlt: "Alerts Preview",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-sun-studio_23-2151021336.jpg",
imageAlt: "Dashboard Preview",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-taking-selfie-while-holding-umbrella_23-2148521255.jpg",
imageAlt: "Rain Forecast",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg",
imageAlt: "Humidity Data",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/smart-home-app-phone_23-2149036818.jpg",
imageAlt: "Sunset View",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/rainy-weather-icons-with-clouds-water-drops_107791-17924.jpg",
imageAlt: "Alerts Preview",
},
]}
buttons={[
{
text: "Download App",
href: "#",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/3d-illustration-closed-black-gift-box_107791-18203.jpg",
alt: "user-1",
},
{
src: "http://img.b2bpic.net/free-photo/filter-icon-front-side_187299-45145.jpg",
alt: "user-2",
},
{
src: "http://img.b2bpic.net/free-photo/smartphone-mockups-white-background_187299-46491.jpg",
alt: "user-3",
},
{
src: "http://img.b2bpic.net/free-photo/floating-screen-colorized-glass-phone-16-pro-max_187299-46131.jpg",
alt: "user-4",
},
{
src: "http://img.b2bpic.net/free-photo/world-photography-day-celebrated-by-middle-aged-man-taking-photos-with-camera-device_23-2151672452.jpg",
alt: "user-5",
},
]}
avatarText="Trusted by 50,000+ users worldwide"
marqueeItems={[
{
type: "text",
text: "Global Coverage",
},
{
type: "text",
text: "Hyper-local Precision",
},
{
type: "text",
text: "Real-time Updates",
},
{
type: "text",
text: "Advanced Analytics",
},
{
type: "text",
text: "Secure & Private",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{ variant: "gradient-bars" }}
title="Weather forecasting, redefined."
description="Get real-time insights with SkyCast. Your daily weather companion, powered by precision technology and a stunning golden UI experience."
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-smartphone-hand-with-finger-screen_107791-15089.jpg", imageAlt: "Dashboard Preview" },
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-suffering-from-cybersickness-from-using-tech-device-too-long_23-2151393755.jpg", imageAlt: "Rain Forecast" },
{ imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg", imageAlt: "Humidity Data" },
{ imageSrc: "http://img.b2bpic.net/free-photo/weather-icons-meteorology-forecast-night_107791-17421.jpg", imageAlt: "Sunset View" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-play-dough-clouds-sun_23-2149554814.jpg", imageAlt: "Alerts Preview" },
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-sun-studio_23-2151021336.jpg", imageAlt: "Dashboard Preview" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-taking-selfie-while-holding-umbrella_23-2148521255.jpg", imageAlt: "Rain Forecast" },
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg", imageAlt: "Humidity Data" },
{ imageSrc: "http://img.b2bpic.net/free-photo/smart-home-app-phone_23-2149036818.jpg", imageAlt: "Sunset View" },
{ imageSrc: "http://img.b2bpic.net/free-photo/rainy-weather-icons-with-clouds-water-drops_107791-17924.jpg", imageAlt: "Alerts Preview" },
]}
buttons={[{ text: "Download App", href: "#" }]}
avatars={[
{ src: "http://img.b2bpic.net/free-photo/3d-illustration-closed-black-gift-box_107791-18203.jpg", alt: "user-1" },
{ src: "http://img.b2bpic.net/free-photo/filter-icon-front-side_187299-45145.jpg", alt: "user-2" },
{ src: "http://img.b2bpic.net/free-photo/smartphone-mockups-white-background_187299-46491.jpg", alt: "user-3" },
{ src: "http://img.b2bpic.net/free-photo/floating-screen-colorized-glass-phone-16-pro-max_187299-46131.jpg", alt: "user-4" },
{ src: "http://img.b2bpic.net/free-photo/world-photography-day-celebrated-by-middle-aged-man-taking-photos-with-camera-device_23-2151672452.jpg", alt: "user-5" },
]}
avatarText="Trusted by 50,000+ users worldwide"
marqueeItems={[
{ type: "text", text: "Global Coverage" },
{ type: "text", text: "Hyper-local Precision" },
{ type: "text", text: "Real-time Updates" },
{ type: "text", text: "Advanced Analytics" },
{ type: "text", text: "Secure & Private" },
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Innovation in Every Forecast"
description={[
"SkyCast combines advanced satellite data with local atmospheric sensors to provide hyper-local weather predictions.",
"Our mission is to help you stay ahead of the weather, whether you're commuting or planning your weekend getaways.",
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Innovation in Every Forecast"
description={[
"SkyCast combines advanced satellite data with local atmospheric sensors to provide hyper-local weather predictions.", "Our mission is to help you stay ahead of the weather, whether you're commuting or planning your weekend getaways."]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Hyper-Local Forecasts",
description: "Get accurate updates down to your specific block.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-weather-app-icons-interface-elements_107791-17422.jpg",
imageAlt: "Forecast",
},
items: [
{
icon: MapPin,
text: "GPS accuracy",
},
{
icon: Zap,
text: "Instant updates",
},
{
icon: Cloud,
text: "Live sky mapping",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-smartphone-hand-with-finger-screen_107791-15089.jpg?_wi=2",
imageAlt: "weather forecast icon sun",
},
{
title: "Wind Analytics",
description: "Understand wind patterns like never before.",
media: {
imageSrc: "http://img.b2bpic.net/free-vector/rm373batch2-10_53876-125971.jpg",
imageAlt: "Wind",
},
items: [
{
icon: Wind,
text: "Real-time gusts",
},
{
icon: Compass,
text: "Direction tracking",
},
{
icon: Anchor,
text: "Marine safety",
},
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-suffering-from-cybersickness-from-using-tech-device-too-long_23-2151393755.jpg?_wi=2",
imageAlt: "weather forecast icon sun",
},
{
title: "Smart Temperature",
description: "Stay comfortable with optimized sensors.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/3d-futuristic-illustration-with-flowing-cyber-dots_1048-11939.jpg",
imageAlt: "Temp",
},
items: [
{
icon: Thermometer,
text: "Precise readings",
},
{
icon: Sun,
text: "UV insights",
},
{
icon: Moon,
text: "Night cooling",
},
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169853.jpg?_wi=2",
imageAlt: "weather forecast icon sun",
},
]}
title="Powerful Features"
description="Explore the tools that make SkyCast the leader in weather forecasting."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Hyper-Local Forecasts", description: "Get accurate updates down to your specific block.", media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-weather-app-icons-interface-elements_107791-17422.jpg", imageAlt: "Forecast" },
items: [{ icon: MapPin, text: "GPS accuracy" }, { icon: Zap, text: "Instant updates" }, { icon: Cloud, text: "Live sky mapping" }],
reverse: false
},
{
title: "Wind Analytics", description: "Understand wind patterns like never before.", media: { imageSrc: "http://img.b2bpic.net/free-vector/rm373batch2-10_53876-125971.jpg", imageAlt: "Wind" },
items: [{ icon: Wind, text: "Real-time gusts" }, { icon: Compass, text: "Direction tracking" }, { icon: Anchor, text: "Marine safety" }],
reverse: true
},
{
title: "Smart Temperature", description: "Stay comfortable with optimized sensors.", media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-futuristic-illustration-with-flowing-cyber-dots_1048-11939.jpg", imageAlt: "Temp" },
items: [{ icon: Thermometer, text: "Precise readings" }, { icon: Sun, text: "UV insights" }, { icon: Moon, text: "Night cooling" }],
reverse: false
}
]}
title="Powerful Features"
description="Explore the tools that make SkyCast the leader in weather forecasting."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "99.9%",
title: "Accuracy",
description: "Reliable data globally",
imageSrc: "http://img.b2bpic.net/free-photo/world-mental-health-day-awareness-illustration_23-2151859110.jpg",
},
{
id: "m2",
value: "1.2M",
title: "Daily Users",
description: "Global user network",
imageSrc: "http://img.b2bpic.net/free-photo/tired-yawning-businessman-working-late-night-office-blue-moon-light-coming-from-window_482257-32815.jpg",
},
{
id: "m3",
value: "24/7",
title: "Support",
description: "Always ready to forecast",
imageSrc: "http://img.b2bpic.net/free-photo/car-navigation-screen-dashboard-display-digital-auto-panel_169016-68647.jpg",
},
]}
title="Data Driven Insights"
description="Numbers behind the atmosphere."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "99.9%", title: "Accuracy", description: "Reliable data globally", imageSrc: "http://img.b2bpic.net/free-photo/world-mental-health-day-awareness-illustration_23-2151859110.jpg" },
{ id: "m2", value: "1.2M", title: "Daily Users", description: "Global user network", imageSrc: "http://img.b2bpic.net/free-photo/tired-yawning-businessman-working-late-night-office-blue-moon-light-coming-from-window_482257-32815.jpg" },
{ id: "m3", value: "24/7", title: "Support", description: "Always ready to forecast", imageSrc: "http://img.b2bpic.net/free-photo/car-navigation-screen-dashboard-display-digital-auto-panel_169016-68647.jpg" }
]}
title="Data Driven Insights"
description="Numbers behind the atmosphere."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Miller",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-lady-designer-sitting-indoors-night-holding-pencil_171337-15774.jpg",
},
{
id: "t2",
name: "James Chen",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924153.jpg",
},
{
id: "t3",
name: "Emily Davis",
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-professional-photographer-equipment_23-2149033391.jpg",
},
{
id: "t4",
name: "Mark Wilson",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg",
},
{
id: "t5",
name: "Elena Rodriguez",
imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167441.jpg",
},
]}
cardTitle="Loved by millions"
cardTag="Reviews"
cardAnimation="blur-reveal"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-lady-designer-sitting-indoors-night-holding-pencil_171337-15774.jpg" },
{ id: "t2", name: "James Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924153.jpg" },
{ id: "t3", name: "Emily Davis", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-professional-photographer-equipment_23-2149033391.jpg" },
{ id: "t4", name: "Mark Wilson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg" },
{ id: "t5", name: "Elena Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167441.jpg" }
]}
cardTitle="Loved by millions"
cardTag="Reviews"
cardAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Is the app free?",
content: "Yes, basic forecasting is free.",
},
{
id: "q2",
title: "How accurate is the map?",
content: "Highly accurate using satellite data.",
},
{
id: "q3",
title: "Does it work globally?",
content: "Yes, we support over 150 countries.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/student-desk-with-computer-books-notepads-table_169016-49023.jpg"
mediaAnimation="blur-reveal"
title="Frequently Asked Questions"
description="Answers to common concerns about our forecasting tech."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Is the app free?", content: "Yes, basic forecasting is free." },
{ id: "q2", title: "How accurate is the map?", content: "Highly accurate using satellite data." },
{ id: "q3", title: "Does it work globally?", content: "Yes, we support over 150 countries." }
]}
imageSrc="http://img.b2bpic.net/free-photo/student-desk-with-computer-books-notepads-table_169016-49023.jpg"
mediaAnimation="blur-reveal"
title="Frequently Asked Questions"
description="Answers to common concerns about our forecasting tech."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Get in touch"
title="Ready to forecast with us?"
description="Have questions or need enterprise data? Contact our team today."
buttons={[
{
text: "Email Us",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Get in touch"
title="Ready to forecast with us?"
description="Have questions or need enterprise data? Contact our team today."
buttons={[{ text: "Email Us", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Features",
href: "#features",
},
],
},
{
items: [
{
label: "Careers",
href: "#",
},
{
label: "Privacy",
href: "#",
},
],
},
{
items: [
{
label: "Support",
href: "#",
},
{
label: "Blog",
href: "#",
},
],
},
]}
logoText="SkyCast"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "About Us", href: "#about" }, { label: "Features", href: "#features" }] },
{ items: [{ label: "Careers", href: "#" }, { label: "Privacy", href: "#" }] },
{ items: [{ label: "Support", href: "#" }, { label: "Blog", href: "#" }] }
]}
logoText="SkyCast"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}