Merge version_3 into main #3
288
src/app/page.tsx
288
src/app/page.tsx
@@ -28,208 +28,110 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Xooq Digital"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Xooq Digital"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Xooq Digital"
|
||||
description="Building the future of digital experiences with precision, innovation, and design excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Services", href: "#features"},
|
||||
{
|
||||
text: "Get a Quote", href: "#contact"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pc-display-startup-office-desk-showing-programming-languages_482257-120128.jpg?_wi=1", imageAlt: "Digital creative space"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-technology-concept-close-up-portrait-young-beautiful-attractive-redhair-girl-happy-smilin_1258-126782.jpg?_wi=1", imageAlt: "Modern digital workspace"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/customer-feedback-concept-with-hand-holding-ball_23-2150030243.jpg", imageAlt: "Geometric tech abstract"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-it-workers-using-green-screen-computer_482257-123979.jpg", imageAlt: "Team brainstorming"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg", imageAlt: "UI interface prototype"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smart-factory-repairman-using-tablet-analyze-iot-sensors-data_482257-126203.jpg", imageAlt: "Digital network abstract"},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Xooq Digital"
|
||||
description="Yellow, Green, and Bold. Elevating brands with premium digital solutions."
|
||||
buttons={[
|
||||
{ text: "View Services", href: "#features" },
|
||||
{ text: "Let's Talk", href: "#contact" },
|
||||
]}
|
||||
slides={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Empowering brands through data-driven digital strategy and creative excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="About Us"
|
||||
title="Where Creative Meets Code"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Web Design", tags: [
|
||||
"Creative", "Modern"],
|
||||
imageAlt: "Web design", imageSrc: "http://img.b2bpic.net/free-photo/business-friends-embracing-looking-camera_1262-4706.jpg"},
|
||||
{
|
||||
id: "2", title: "SEO Optimization", tags: [
|
||||
"Search", "Growth"],
|
||||
imageAlt: "SEO optimization", imageSrc: "http://img.b2bpic.net/free-photo/pc-display-startup-office-desk-showing-programming-languages_482257-120128.jpg?_wi=2"},
|
||||
{
|
||||
id: "3", title: "Brand Strategy", tags: [
|
||||
"Identity", "Market"],
|
||||
imageAlt: "Brand strategy", imageSrc: "http://img.b2bpic.net/free-photo/people-technology-concept-close-up-portrait-young-beautiful-attractive-redhair-girl-happy-smilin_1258-126782.jpg?_wi=2"},
|
||||
]}
|
||||
title="Our Digital Services"
|
||||
description="End-to-end solutions for the digital age, tailored to your growth goals."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Core Services"
|
||||
description="Expert solutions tailored to elevate your business."
|
||||
features={[
|
||||
{ id: "1", title: "Graphic Design", tags: ["Brand", "Visuals"] },
|
||||
{ id: "2", title: "Video Editing", tags: ["Motion", "Production"] },
|
||||
{ id: "3", title: "Web Development", tags: ["Coding", "Launch"] },
|
||||
{ id: "4", title: "SEO", tags: ["Ranking", "Growth"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "150+", title: "Projects Completed", items: [
|
||||
"Delivered projects", "Client satisfaction"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "20%", title: "Avg Growth", items: [
|
||||
"Growth metrics", "Performance"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "50+", title: "Active Clients", items: [
|
||||
"Long-term partners", "Trust"],
|
||||
},
|
||||
]}
|
||||
title="The Impact We Deliver"
|
||||
description="Measurable results for our partners, driven by clear analytics."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Impact Driven"
|
||||
metrics={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"InnovateLab", "GrowthCo", "StartupXYZ", "TechVision", "GlobalMedia", "ApexSoft", "DigitalNext"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Partnering with global brands to drive meaningful change."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
names={[]}
|
||||
title="Our Partners"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Sarah J.", handle: "@sarahj", testimonial: "Xooq transformed our digital presence completely.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg"},
|
||||
{
|
||||
id: "t2", name: "Michael C.", handle: "@mikec", testimonial: "Their strategy is second to none in the industry.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg"},
|
||||
{
|
||||
id: "t3", name: "Emily R.", handle: "@emilyr", testimonial: "Professional, creative, and always on time.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg"},
|
||||
{
|
||||
id: "t4", name: "David K.", handle: "@davidk", testimonial: "Fantastic results and data-driven insights.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-having-conversation-with-his-partner-workplace_23-2147899787.jpg"},
|
||||
{
|
||||
id: "t5", name: "Lisa M.", handle: "@lisam", testimonial: "True partners in our growth journey.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-people-office-2_1262-1479.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Success Stories"
|
||||
description="See what our partners have to say about working with Xooq."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
testimonials={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "How do we start?", content: "Book a discovery call through our contact form."},
|
||||
{
|
||||
id: "q2", title: "What is the timeline?", content: "Timelines vary depending on project complexity."},
|
||||
{
|
||||
id: "q3", title: "Do you provide support?", content: "Yes, we provide ongoing maintenance services."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get quick answers to typical queries about our process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
faqs={[]}
|
||||
title="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Start Your Project"
|
||||
description="Ready to scale your business? Let's talk strategy."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/headphones-with-microphone-call-center-office-desk_482257-125977.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Connect with Xooq"
|
||||
description="Tell us about your project vision."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Work", href: "#work"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{
|
||||
label: "Design", href: "#"},
|
||||
{
|
||||
label: "SEO", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Xooq Digital"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[]}
|
||||
logoText="Xooq Digital"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #fafffb;
|
||||
--card: #f7fffa;
|
||||
--foreground: #001a0a;
|
||||
--primary-cta: #0a7039;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #dfff1c;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #a8d9be;
|
||||
--background-accent: #6bbf8e;
|
||||
--accent: #10b981;
|
||||
--background-accent: #0d5238;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user