Merge version_4 into main #4
186
src/app/page.tsx
186
src/app/page.tsx
@@ -2,16 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import { BarChart, Zap, Target, Palette, Cpu, Code } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -41,118 +42,83 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Elevating Digital Identity"
|
||||
description="A&Z crafts high-performance, visually stunning websites tailored for modern businesses ready to scale in the digital era."
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vibrant-abstract-sphere-illuminates-dark-backdrop-generated-by-ai_188544-11877.jpg", imageAlt: "modern tech background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-touching-smart-technology-holographic-interface_53876-98409.jpg", imageAlt: "digital interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-network-communications-background-with-plexus-design_1048-18865.jpg", imageAlt: "modern tech background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-businessman-doing-sport-with-stats_23-2150040521.jpg", imageAlt: "digital interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-low-poly-with-connecting-lines-dots_1048-12439.jpg", imageAlt: "modern tech background" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg", imageAlt: "digital interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg", imageAlt: "digital interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blue-glasses-liquid-with-shadow-yellow-background_23-2147949153.jpg", imageAlt: "modern tech background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg", imageAlt: "digital interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg", imageAlt: "modern tech background" },
|
||||
]}
|
||||
<HeroLogoBillboard
|
||||
logoText="A&Z Agency"
|
||||
description="Crafting high-performance, visually stunning digital experiences for modern enterprises."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "View Portfolio", href: "#products" },
|
||||
]}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Happy young professional" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Smiling Business Woman" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-wearing-eyeglasses_1262-4761.jpg", alt: "Cheerful young businesswoman" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "Business Leader" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg", alt: "Senior Businessman" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Innovation" },
|
||||
{ type: "text", text: "Scalability" },
|
||||
{ type: "text", text: "Performance" },
|
||||
{ type: "text", text: "Design" },
|
||||
{ type: "text", text: "Growth" },
|
||||
]}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vibrant-abstract-sphere-illuminates-dark-backdrop-generated-by-ai_188544-11877.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
<AboutMetric
|
||||
title="Engineered for Excellence"
|
||||
metrics={[
|
||||
{ icon: Zap, label: "Performance", value: "99%" },
|
||||
{ icon: Target, label: "Conversion", value: "3.5x" },
|
||||
{ icon: BarChart, label: "Growth", value: "200%" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
title="Built for Growth"
|
||||
description={[
|
||||
"At A&Z, we bridge the gap between complex code and seamless user experiences.", "Our mission is to help businesses transition into powerful, high-conversion digital spaces that represent their true value.", "We focus on performance, scalability, and aesthetic precision in every line we deploy."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
useInvertedBackground={false}
|
||||
title="Core Capabilities"
|
||||
description="We deliver comprehensive digital solutions through data-driven development."
|
||||
features={[
|
||||
{
|
||||
title: "Custom Web Design", description: "Beautiful layouts tailored to your unique identity.", imageSrc: "http://img.b2bpic.net/free-photo/data-technology-green-background-with-computer-microchip-remixed-media_53876-108533.jpg"},
|
||||
title: "Custom Development", description: "Scalable code architectures.", bentoComponent: "reveal-icon", icon: Code
|
||||
},
|
||||
{
|
||||
title: "Responsive Performance", description: "Fast-loading, optimized code across all device types.", imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416730.jpg"},
|
||||
title: "User Interfaces", description: "Stunning visual experiences.", bentoComponent: "reveal-icon", icon: Palette
|
||||
},
|
||||
{
|
||||
title: "Growth Analytics", description: "Data-backed decision making for your digital presence.", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884869.jpg"},
|
||||
{
|
||||
title: "API Integration", description: "Seamlessly connect your tools to your web portal.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-keyboard_53876-30489.jpg"},
|
||||
{
|
||||
title: "Cloud Infrastructure", description: "Reliable and scalable hosting for any traffic.", imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg"},
|
||||
title: "Cloud Systems", description: "Global infrastructure scaling.", bentoComponent: "reveal-icon", icon: Cpu
|
||||
}
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Comprehensive digital development solutions designed for the modern landscape."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
<ProductCardThree
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Selected Projects"
|
||||
description="Proven results across multiple digital sectors."
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Enterprise Portal", price: "Starting from $5k", variant: "Web System", imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-landing-page_23-2148323856.jpg"},
|
||||
id: "p1", name: "Enterprise Portal", price: "$5,000", imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-landing-page_23-2148323856.jpg"},
|
||||
{
|
||||
id: "p2", name: "Global Retail Store", price: "Starting from $5k", variant: "E-Commerce", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-sale-app_23-2151952980.jpg"},
|
||||
id: "p2", name: "Retail Dashboard", price: "$7,500", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-sale-app_23-2151952980.jpg"},
|
||||
{
|
||||
id: "p3", name: "Brand Campaign App", price: "Starting from $5k", variant: "Mobile/Web", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-black-hands-holding-electronic-devices_107791-16647.jpg"},
|
||||
{
|
||||
id: "p4", name: "Tech Hub Site", price: "Starting from $5k", variant: "Landing", imageSrc: "http://img.b2bpic.net/free-photo/open-laptop-with-glowing-screen-notepad-table-night_169016-53665.jpg"},
|
||||
{
|
||||
id: "p5", name: "Startup Dashboard", price: "Starting from $5k", variant: "SaaS UI", imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-with-white-background_187299-39965.jpg"},
|
||||
id: "p3", name: "Brand App", price: "$4,000", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-black-hands-holding-electronic-devices_107791-16647.jpg"}
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="Showcasing our recent high-impact web development projects."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", title: "Incredible Results", quote: "A&Z transformed our vision into reality perfectly.", name: "Sarah Miller", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
|
||||
{
|
||||
id: "t2", title: "Top Tier Agency", quote: "The speed and design quality were beyond expectation.", name: "John Doe", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg"},
|
||||
{
|
||||
id: "t3", title: "Highly Recommend", quote: "Our sales increased significantly after the redesign.", name: "Alice Wang", role: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-asian-businessman-businesswoman-meeting-brainstorming-some-new-ideas-about-project_7861-2781.jpg"},
|
||||
{
|
||||
id: "t4", title: "Perfect Collaboration", quote: "Professional, fast, and highly creative team.", name: "Mark Evans", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/succesful-businesswomen-giving-high-five_53876-15136.jpg"},
|
||||
{
|
||||
id: "t5", title: "Game Changer", quote: "Best tech investment we have made this year.", name: "Clara Z.", role: "VP Tech", imageSrc: "http://img.b2bpic.net/free-photo/confident-successful-middle-aged-business-leader_1262-4872.jpg"},
|
||||
]}
|
||||
title="Client Success"
|
||||
description="Read what our partners say about our design and development services."
|
||||
description="Partnerships built on trust and results."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", role: "CEO", testimonial: "A&Z transformed our digital presence completely.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
|
||||
{ id: "t2", name: "John Doe", role: "Director", testimonial: "Exceptional quality and fast execution.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -160,65 +126,45 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Microsoft", "Google", "Apple", "Amazon", "Netflix", "Tesla", "NVIDIA"]}
|
||||
title="Trusted Partners"
|
||||
description="Collaborating with leading innovators worldwide."
|
||||
names={["Microsoft", "Google", "Apple", "Amazon", "Netflix", "Tesla"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Collaborating with world-class innovators."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do you start?", content: "We begin with a discovery phase to align on goals." },
|
||||
{ id: "q2", title: "What is the timeline?", content: "Projects typically range from 4 to 12 weeks." },
|
||||
{ id: "q3", title: "Do you support after launch?", content: "Yes, we offer ongoing maintenance and growth support." },
|
||||
{ id: "q4", title: "Do you work with startups?", content: "Absolutely, we specialize in helping early-stage ventures." },
|
||||
{ id: "q5", title: "Is the code proprietary?", content: "You own 100% of the code upon project completion." },
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about working with us."
|
||||
faqsAnimation="slide-up"
|
||||
description="Find answers to our most common project inquiries."
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do we start?", content: "Initial discovery call leads to a strategic roadmap." },
|
||||
{ id: "q2", title: "What is the turnaround?", content: "Typical projects range from 4-8 weeks depending on scope." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
<ContactCTA
|
||||
tag="Collaboration"
|
||||
title="Ready to innovate?"
|
||||
description="Get in touch with our team for a consultation."
|
||||
buttons={[{ text: "Start Now", href: "#contact" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready to launch your site?"
|
||||
description="Join our newsletter and start building your future today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterLogoReveal
|
||||
logoText="A&Z Agency"
|
||||
columns={[
|
||||
{
|
||||
title: "Agency", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Design", href: "#" },
|
||||
{ label: "Development", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user