Merge version_2 into main #2
277
src/app/page.tsx
277
src/app/page.tsx
@@ -3,16 +3,15 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Zap, Shield, BarChart3, Cpu } from 'lucide-react';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -22,209 +21,81 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Nexus"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Nexus"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Architecting Future Solutions"
|
||||
description="Empowering businesses with cutting-edge software architecture and innovative digital infrastructure for a sustainable tomorrow."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-8746.jpg"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg", alt: "Smiling female staff at airport terminal"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg", alt: "Confident middle aged businesswoman looking at camera"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Smiling businessman standing at airport"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg", alt: "African-American young man wearing a jacket and checkered shirt looking at a camera in a studio."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-black-jacket_613910-2534.jpg", alt: "Portrait of handsome man in black jacket"},
|
||||
]}
|
||||
avatarText="Trusted by 500+ global enterprises"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroPersonalLinks
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
title="Architecting Future Solutions"
|
||||
linkCards={[
|
||||
{ title: "Scale", description: "High performance infrastructure", button: { text: "Learn More" } },
|
||||
{ title: "Security", description: "Fortified digital assets", button: { text: "Explore" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Innovating the digital edge, one line of code at a time."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="Innovating the digital edge"
|
||||
description="Building advanced software architectures for global enterprises."
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-8746.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Cloud Scaling", description: "Seamless cloud integration and scaling capabilities.", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-ai-technology-background_23-2151719565.jpg", buttonIcon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Security First", description: "Enterprise-grade protection for all data assets.", imageSrc: "http://img.b2bpic.net/free-photo/data-protection-shield-secured-permission-graphic-concept_53876-122466.jpg", buttonIcon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Real-time Metrics", description: "Instant data insights and performance tracking.", imageSrc: "http://img.b2bpic.net/free-photo/it-employee-coworker-talking-while-building-ai-diffusion-model-app_482257-124134.jpg", buttonIcon: BarChart3,
|
||||
},
|
||||
{
|
||||
title: "AI Automation", description: "Leverage machine learning for automated workflows.", imageSrc: "http://img.b2bpic.net/free-photo/spinning-retro-cd-blue-tech-surface_58702-17206.jpg", buttonIcon: Cpu,
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Capabilities"
|
||||
description="Our robust suite of technological solutions is designed to scale your operations effortlessly."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Comprehensive Capabilities"
|
||||
description="Cutting-edge tools for modern technology infrastructure."
|
||||
features={[
|
||||
{ title: "Scaling", description: "Seamless cloud integration.", buttonIcon: Zap },
|
||||
{ title: "Security", description: "Enterprise-grade protection.", buttonIcon: Shield },
|
||||
{ title: "Metrics", description: "Real-time data tracking.", buttonIcon: BarChart3 },
|
||||
{ title: "Automation", description: "Leverage AI workflows.", buttonIcon: Cpu },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "99.9%", title: "Uptime", description: "Industry leading reliability.", imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-132304.jpg"},
|
||||
{
|
||||
id: "m2", value: "500+", title: "Deployments", description: "Successful production rollouts.", imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904331.jpg"},
|
||||
{
|
||||
id: "m3", value: "120+", title: "Clients", description: "Global partnership network.", imageSrc: "http://img.b2bpic.net/free-photo/3d-flowing-particles-network-communications-design_1048-15848.jpg"},
|
||||
]}
|
||||
title="Proven Excellence"
|
||||
description="We measure our success by the tangible impact we deliver to our partners."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Ready to innovate?"
|
||||
description="Reach out to discuss your project requirements."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
buttonText="Submit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardOne
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Flux Server", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/mockup-pc-display-photovoltaics-factory-used-monitor-system-performance_482257-120524.jpg"},
|
||||
{
|
||||
id: "p2", name: "Data Streamer", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/close-up-pc-monitors-desk-used-monitoring-data-center-devices-energy_482257-118092.jpg"},
|
||||
{
|
||||
id: "p3", name: "Core Module", price: "$99", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-circuit-board-with-capacitors_23-2148284290.jpg"},
|
||||
{
|
||||
id: "p4", name: "Sonic Hub", price: "$499", imageSrc: "http://img.b2bpic.net/free-photo/top-view-dvd-music-set_1150-6659.jpg"},
|
||||
{
|
||||
id: "p5", name: "Smart Lens", price: "$899", imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309665.jpg"},
|
||||
{
|
||||
id: "p6", name: "Core Sensor", price: "$149", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-orange-hard-disk-components_23-2149413375.jpg"},
|
||||
]}
|
||||
title="Core Offerings"
|
||||
description="Precision-engineered tools built for the modern digital era."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Sarah Chen", handle: "@sarah", testimonial: "Excellent service and deep expertise.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-looking-camera_23-2148187139.jpg"},
|
||||
{
|
||||
id: "t2", name: "Mike Ross", handle: "@mross", testimonial: "The best architectural partner we've had.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-corporate-man_23-2148336854.jpg"},
|
||||
{
|
||||
id: "t3", name: "Elena Kim", handle: "@elenak", testimonial: "Transformed our entire software stack.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-avantgarde-head-piece_23-2149020796.jpg"},
|
||||
{
|
||||
id: "t4", name: "David Wu", handle: "@dwu", testimonial: "Professional, efficient, and innovative.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-people-collaborating-meeting_23-2148826955.jpg"},
|
||||
{
|
||||
id: "t5", name: "Jessica Lee", handle: "@jlee", testimonial: "Highly recommended for scaling complex systems.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Trusted Partners"
|
||||
description="Hear what our clients have to say about our impact."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "How do you scale?", content: "We use cloud-native architectures that automatically adapt to demand."},
|
||||
{
|
||||
id: "q2", title: "What's the process?", content: "Discovery, planning, architectural design, deployment, and optimization."},
|
||||
{
|
||||
id: "q3", title: "Do you support legacy?", content: "Yes, we specialize in modernizing legacy technical stacks securely."},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Get in touch"
|
||||
title="Ready to transform your tech stack?"
|
||||
description="Reach out today to discuss your next big digital initiative."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Nexus Tech."
|
||||
bottomRightText="Built for innovation."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Nexus"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #1a2a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #e6e6e6;
|
||||
--primary-cta-text: #0a150a;
|
||||
--secondary-cta: #0d1a0d;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #e1f6e1;
|
||||
--accent: #2d4a2d;
|
||||
--background-accent: #c1e1c1;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user