Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4d76b11005 | |||
| 8d5234b1ac | |||
| 23d54cf9d3 |
363
src/app/page.tsx
363
src/app/page.tsx
@@ -2,15 +2,13 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import { Cpu, Zap, Camera } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,22 +28,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Overview",
|
||||
id: "overview",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Specs",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Overview", id: "overview" },
|
||||
{ name: "Specs", id: "specs" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Details", id: "details" },
|
||||
]}
|
||||
brandName="OnePlus 15"
|
||||
/>
|
||||
@@ -53,77 +39,53 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="OnePlus 15. The Next Evolution."
|
||||
description="Experience power beyond limits with the most advanced processor, stunning display, and professional-grade camera system."
|
||||
kpis={[
|
||||
{
|
||||
value: "Snapdragon 8",
|
||||
label: "Processor",
|
||||
},
|
||||
{
|
||||
value: "144Hz",
|
||||
label: "Refresh Rate",
|
||||
},
|
||||
{
|
||||
value: "5000mAh",
|
||||
label: "Battery",
|
||||
},
|
||||
{ value: "Snapdragon 8", label: "Processor" },
|
||||
{ value: "144Hz", label: "Refresh Rate" },
|
||||
{ value: "5000mAh", label: "Battery" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074266.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="specs" data-section="specs">
|
||||
<TimelinePhoneView
|
||||
title="Technical Specifications"
|
||||
description="Precision engineering in every component."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
items={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072188.jpg",
|
||||
alt: "Tech user portrait",
|
||||
},
|
||||
trigger: "Processor Power", content: "Equipped with the latest Snapdragon 8 Elite chipset for unmatched performance."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074259.jpg",
|
||||
alt: "Tech user portrait",
|
||||
},
|
||||
trigger: "Display Technology", content: "144Hz Fluid AMOLED display with extreme brightness and color accuracy."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072191.jpg",
|
||||
alt: "Tech user portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074279.jpg",
|
||||
alt: "Tech user portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139320.jpg",
|
||||
alt: "Tech user portrait",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 50,000+ early adopters"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Ultra-Fast Charging",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Pro-Grade Camera",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "144Hz Fluid Display",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Snapdragon 8 Elite",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "AI-Enhanced Software",
|
||||
},
|
||||
trigger: "Battery System", content: "5000mAh capacity with SuperVOOC fast charging capabilities."}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
title="What is in the Box"
|
||||
description="Everything you need to get started right away."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Cpu, title: "OnePlus 15 Device", description: "The main unit with pre-applied screen protector." },
|
||||
{ icon: Zap, title: "100W Fast Charger", description: "High-speed power adapter for rapid charging." },
|
||||
{ icon: Camera, title: "Pro-Grade Cables", description: "High-durability data and charging cable." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="details" data-section="details">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
@@ -131,254 +93,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Ultra-Clear Camera",
|
||||
description: "Capture life in stunning detail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-afternoon-shoots-phone-field_78492-3731.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/kitchen-faucet-water-aerator-metal-texture_169016-69557.jpg",
|
||||
buttonText: "Explore",
|
||||
},
|
||||
title: "Advanced Camera System", description: "Professional-grade sensors for all your photography needs.", imageSrc: "http://img.b2bpic.net/free-photo/woman-afternoon-shoots-phone-field_78492-3731.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/kitchen-faucet-water-aerator-metal-texture_169016-69557.jpg", buttonText: "Learn More"},
|
||||
{
|
||||
title: "Pro Display",
|
||||
description: "Fluid, crisp, and incredibly bright.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-frame-water-droplets-grey-feather-surface_23-2148114606.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4932.jpg",
|
||||
buttonText: "Discover",
|
||||
},
|
||||
{
|
||||
title: "Rapid Charging",
|
||||
description: "Go from zero to full in minutes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-technological-pieces-background_23-2148882665.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-cyber-particles_1048-14023.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
title: "Enhanced Design", description: "Ergonomic grip with premium materials.", imageSrc: "http://img.b2bpic.net/free-photo/full-frame-water-droplets-grey-feather-surface_23-2148114606.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4932.jpg", buttonText: "Learn More"},
|
||||
]}
|
||||
title="Unrivaled Capabilities"
|
||||
description="Engineered for excellence in every detail."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="performance" data-section="performance">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "20%",
|
||||
description: "Faster CPU speeds",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "30%",
|
||||
description: "Better energy efficiency",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "40%",
|
||||
description: "Graphics improvement",
|
||||
},
|
||||
]}
|
||||
title="Built for Performance"
|
||||
description="Setting new benchmarks in the industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Black Obsidian",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-with-short-hair-white-turtleneck-wearing-beret-red-sunglasses-doing-selfie-using-smartphone-smiling-cheerfully-standing-orange-wall_141793-62268.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Midnight Blue",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4863.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Sterling Silver",
|
||||
price: "$949",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-5033.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Matte Forest",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-asian-woman-taking-selfie_23-2149122949.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Horizon Orange",
|
||||
price: "$999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-excited-blond-girl-hat-using-voice-command-recorder-smartphone-yellow-background_574295-4456.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Arctic White",
|
||||
price: "$949",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ramadan-phone-14-with-crescent-left-side-white-background_187299-35109.jpg",
|
||||
},
|
||||
]}
|
||||
title="Choose Your Style"
|
||||
description="Available in a range of premium finishes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Tech Reviewer",
|
||||
testimonial: "The best OnePlus experience yet.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael B.",
|
||||
role: "Creative Director",
|
||||
testimonial: "The camera is absolutely stunning.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/image-corporate-woman-working-office-sitting-front-laptop-preparing-business_1258-194628.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex R.",
|
||||
role: "Developer",
|
||||
testimonial: "Unmatched performance for daily tasks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chloe M.",
|
||||
role: "Photographer",
|
||||
testimonial: "It's replaced my secondary camera.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-technology-leisure-concept-fashionable-young-man-with-beard-listening-songs-earphones-using-online-music-app-his-laptop-computer_273609-1957.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "James K.",
|
||||
role: "Gamer",
|
||||
testimonial: "Graphics performance is top-tier.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-artist-looking-vase-model-draw-canvas-using-hobby-artistic-skills-create-professional-authentic-sketch-creative-masterpiece-drawing-with-inspiration-imagination_482257-49973.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by Critics and Users"
|
||||
description="Hear what the world is saying about the new OnePlus."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
price: "$899",
|
||||
name: "Standard Edition",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"12GB RAM",
|
||||
"256GB Storage",
|
||||
"Standard Camera",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
price: "$1099",
|
||||
name: "Pro Edition",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"16GB RAM",
|
||||
"512GB Storage",
|
||||
"Pro Camera System",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ultra",
|
||||
price: "$1299",
|
||||
name: "Ultra Edition",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"24GB RAM",
|
||||
"1TB Storage",
|
||||
"Ultra Camera Lens",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Select Your Configuration"
|
||||
description="Choose the model that fits your needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Does it support fast charging?",
|
||||
content: "Yes, it supports SuperVOOC fast charging.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is it water resistant?",
|
||||
content: "Yes, it comes with an IP68 rating.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Does it have a telephoto lens?",
|
||||
content: "Yes, it includes a professional telephoto lens.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about OnePlus 15."
|
||||
faqsAnimation="slide-up"
|
||||
title="Product Details"
|
||||
description="Deep dive into what makes the OnePlus 15 unique."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="OnePlus 15"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #1f7cff;
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user