Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
392
src/app/page.tsx
392
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { Award, Building2, Clock, Heart, Shield, Users } from "lucide-react";
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { Sparkles, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,377 +30,115 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Halle Berry"
|
||||
navItems={[
|
||||
{
|
||||
name: "Accounts",
|
||||
id: "product",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Benefits",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Bio", id: "about" },
|
||||
{ name: "Work", id: "features" },
|
||||
{ name: "Awards", id: "metrics" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Chase"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Chase"
|
||||
description="Smart, secure, and personal banking solutions designed for your future. Manage your wealth and reach your financial goals with confidence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Open Account",
|
||||
href: "#product",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/busy-hospital-reception-waiting-area-with-diverse-patients-having-medical-appointment-checkup-visit-waiting-clinic-lobby-attend-healthcare-consultation-medicine-support_482257-48629.jpg",
|
||||
imageAlt: "Professional bank interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250213.jpg",
|
||||
imageAlt: "Digital banking interface",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/important-investor-making-notes-calculations-briefing-meeting_482257-122861.jpg",
|
||||
imageAlt: "Financial consulting",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-suit-using-mobile-phone-waiting-business-partner-city-center_1258-194041.jpg",
|
||||
imageAlt: "Secure ATM service",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-customer-paying-with-nfc-device_23-2150690001.jpg",
|
||||
imageAlt: "Credit card services",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teleworker-home-office-gathering-information-from-internet-seminar_482257-119301.jpg",
|
||||
imageAlt: "Savings growth",
|
||||
},
|
||||
<HeroBillboardGallery
|
||||
title="Halle Berry"
|
||||
description="Academy Award-winning actress and trailblazing icon of cinema."
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-smiling_23-2148281313.jpg", imageAlt: "Halle Berry 1" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-woman_23-2148281315.jpg", imageAlt: "Halle Berry 2" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/elegant-woman-looking-away_23-2148281318.jpg", imageAlt: "Halle Berry 3" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Trust"
|
||||
metrics={[
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Security Years",
|
||||
value: "200+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Customers Served",
|
||||
value: "60M+",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
label: "Global Branches",
|
||||
value: "4,700+",
|
||||
},
|
||||
<TextSplitAbout
|
||||
title="An Icon of Grace & Strength"
|
||||
description={[
|
||||
"Halle Berry is an American actress who achieved fame in the 1990s.", "She won the Academy Award for Best Actress for her performance in Monster's Ball."
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Career Highlights"
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Advanced Security",
|
||||
tags: [
|
||||
"Secure",
|
||||
"Private",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/security-concept-with-lock-icons-wooden-cubes-pink-table-flat-lay_176474-9507.jpg",
|
||||
imageAlt: "Secure banking",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Mobile Deposits",
|
||||
tags: [
|
||||
"Fast",
|
||||
"Easy",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-photo-male-hand-stretching-smartphone-pos-terminal-concept-contactless-payment_1258-314846.jpg",
|
||||
imageAlt: "Mobile banking",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "24/7 Support",
|
||||
tags: [
|
||||
"Available",
|
||||
"Reliable",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-student-joins-remote-video-call-online-university-course_482257-122561.jpg",
|
||||
imageAlt: "Banking support",
|
||||
},
|
||||
{ title: "Monster's Ball", description: "Academy Award-winning performance.", imageSrc: "https://img.b2bpic.net/free-photo/film-reel-clapperboard_23-2148301777.jpg" },
|
||||
{ title: "X-Men", description: "Iconic role as Storm.", imageSrc: "https://img.b2bpic.net/free-photo/abstract-superhero-concept_23-2148301780.jpg" }
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Experience financial peace of mind with our cutting-edge banking tools and personalized support services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardThree
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Personal Checking",
|
||||
price: "Low Fees",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-businesswoman-using-digital-tablet-credit-card-while-checking-her-online-bank-account_637285-3570.jpg",
|
||||
imageAlt: "Checking account",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Savings Accounts",
|
||||
price: "High Interest",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/piggy-bank-with-coins-laptop_23-2148780594.jpg",
|
||||
imageAlt: "Savings account",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Credit Cards",
|
||||
price: "Rewards Program",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-phone-with-camera-dark-background_187299-46682.jpg",
|
||||
imageAlt: "Credit cards",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Mortgages",
|
||||
price: "Low Rates",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-objects-realtor-table_23-2147764212.jpg",
|
||||
imageAlt: "Mortgages",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Auto Loans",
|
||||
price: "Fast Approval",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/saving-money-car-trade-car-cash_1150-18254.jpg",
|
||||
imageAlt: "Auto loans",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Investments",
|
||||
price: "Professional Advice",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-office-desk-with-growth-chart-laptop_23-2148780605.jpg",
|
||||
imageAlt: "Investment plans",
|
||||
},
|
||||
]}
|
||||
title="Banking Products"
|
||||
description="Comprehensive banking services for every stage of your financial life."
|
||||
gridVariant="bento-grid"
|
||||
title="Exclusive Collection"
|
||||
description="Curated items inspired by cinematic elegance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Subscription Access"
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$0/mo",
|
||||
subtitle: "Perfect for everyday use",
|
||||
features: [
|
||||
"No minimum balance",
|
||||
"Online banking",
|
||||
"Standard support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Apply Now",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Premium",
|
||||
price: "$25/mo",
|
||||
subtitle: "Enhanced banking perks",
|
||||
features: [
|
||||
"Interest bearing",
|
||||
"Free wire transfers",
|
||||
"Priority support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "gold",
|
||||
badge: "Private",
|
||||
price: "$100/mo",
|
||||
subtitle: "Full wealth management",
|
||||
features: [
|
||||
"Dedicated advisor",
|
||||
"Global travel perks",
|
||||
"Advanced security",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Us",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "fan", badge: "Fan", price: "$9/mo", subtitle: "Daily news updates", features: ["Exclusive content", "Behind the scenes"], buttons: [{ text: "Join" }] },
|
||||
{ id: "vip", badge: "VIP", price: "$29/mo", subtitle: "Premium benefits", features: ["Direct Q&A", "Early access"], buttons: [{ text: "Subscribe" }] }
|
||||
]}
|
||||
title="Account Tiers"
|
||||
description="Choose the account level that fits your financial needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Impact Stats"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "$10B+",
|
||||
title: "Community Giving",
|
||||
description: "Invested in local growth",
|
||||
icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "95%",
|
||||
title: "Client Satisfaction",
|
||||
description: "Highly rated service",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "150+",
|
||||
title: "Years in Business",
|
||||
description: "Proven financial strength",
|
||||
icon: Clock,
|
||||
},
|
||||
{ id: "m1", value: "1", description: "Oscar Won" },
|
||||
{ id: "m2", value: "50+", description: "Film Credits" }
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Driving prosperity for our clients and communities across the nation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Chase has provided excellent financial guidance for my small business for over ten years. Highly reliable service."
|
||||
rating={5}
|
||||
author="Sarah Jennings, Business Owner"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-expert_1098-15050.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiley-man-checking-mobile_23-2148514885.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-woman-sitting-sofa-with-phone_23-2148316734.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-talking-phone-while-using-credit-card-home_637285-12515.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-giving-card-waiter-cafe_1262-1968.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="What People Say"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Fan Review", imageSrc: "https://img.b2bpic.net/free-photo/smiling-fan_23-2148281320.jpg" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Banking Support"
|
||||
title="Get In Touch"
|
||||
description="Have questions about your accounts? Our expert team is here to assist you whenever you need."
|
||||
<ContactSplitForm
|
||||
title="Join the Fan Club"
|
||||
description="Stay updated with latest news and announcements."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
mediaClassName="h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/scottish-parliament-seen-from-calton-hill_181624-42117.jpg"
|
||||
logoText="Chase"
|
||||
<FooterBase
|
||||
logoText="Halle Berry"
|
||||
columns={[
|
||||
{
|
||||
title: "About Us",
|
||||
items: [
|
||||
{
|
||||
label: "History",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Leadership",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Checking",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Credit Cards",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Links", items: [{ label: "Home", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user