294 lines
16 KiB
TypeScript
294 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Users, Globe, Award, Zap, MessageCircle, Sparkles, Crown } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Technology", id: "features" },
|
|
{ name: "Performance", id: "metrics" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Support", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="floatingGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItems}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
brandName="Xiaomi"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="xiaomi"
|
|
description="Crafting the future through innovation, connectivity, and cutting-edge smart technology. Empowering billions with seamless experiences across devices."
|
|
buttons={[
|
|
{ text: "Explore Products", href: "products" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-sleek-modern-xiaomi-smartphone-display-1773050197050-4f0ad6ce.png"
|
|
imageAlt="Xiaomi flagship smartphone showcase"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="browser"
|
|
ariaLabel="Xiaomi hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Xiaomi connects billions through" },
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-comprehensive-view-of-xiaomi-s-smart-h-1773050198483-348fd9ab.png", alt: "Xiaomi ecosystem"},
|
|
{ type: "text", content: "innovation and exceptional value" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Discover Our Vision", href: "features" },
|
|
{ text: "Join Our Community", href: "testimonials" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Our Smart Ecosystem"
|
|
description="Premium devices engineered for seamless integration and exceptional performance across your digital lifestyle"
|
|
tag="Innovation"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Xiaomi", name: "Xiaomi 14 Pro", price: "$999", rating: 5,
|
|
reviewCount: "12.5k", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-sleek-modern-xiaomi-smartphone-display-1773050197050-4f0ad6ce.png", imageAlt: "Xiaomi 14 Pro flagship phone"},
|
|
{
|
|
id: "2", brand: "Xiaomi", name: "Mi Watch Pro", price: "$399", rating: 5,
|
|
reviewCount: "8.2k", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/close-up-product-shot-of-an-advanced-mul-1773050198922-703eee1c.png", imageAlt: "Xiaomi smartwatch premium"},
|
|
{
|
|
id: "3", brand: "Xiaomi", name: "Mi Buds Pro", price: "$199", rating: 5,
|
|
reviewCount: "15.8k", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-visual-representation-of-advanced-batt-1773050197842-f1a4ed3d.png", imageAlt: "Xiaomi wireless earbuds"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
title="Technology Excellence"
|
|
description="Powered by industry-leading innovations that set new standards for performance and user experience"
|
|
features={[
|
|
{
|
|
id: "camera", label: "Imaging", title: "Advanced Multi-Camera System", items: [
|
|
"108MP main sensor", "AI-powered night photography", "8K video recording", "Computational photography"],
|
|
buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
{
|
|
id: "performance", label: "Power", title: "Next-Gen Processing", items: [
|
|
"Snapdragon 8 Gen 3", "12GB LPDDR5X RAM", "UFS 4.0 storage", "Peak performance gaming"],
|
|
buttons: [{ text: "Specs", href: "#" }],
|
|
},
|
|
{
|
|
id: "battery", label: "Battery", title: "Ultra-Long Battery Life", items: [
|
|
"5500mAh capacity", "120W HyperCharge", "All-day performance", "Adaptive power management"],
|
|
buttons: [{ text: "Details", href: "#" }],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Our Impact"
|
|
description="Serving millions worldwide with innovation-driven technology and customer-first solutions"
|
|
metrics={[
|
|
{ id: "1", icon: Users, title: "Users", value: "500M+" },
|
|
{ id: "2", icon: Globe, title: "Countries", value: "100+" },
|
|
{ id: "3", icon: Award, title: "Awards", value: "200+" },
|
|
{ id: "4", icon: Zap, title: "Innovation", value: "Top Tier" },
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Trusted by millions of innovators and tech enthusiasts worldwide"
|
|
cardTag="Customer Stories"
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-professional-headshot-of-a-satisfied-t-1773050198118-ade47beb.png", imageAlt: "Sarah Chen tech enthusiast"},
|
|
{
|
|
id: "2", name: "James Martinez", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-diverse-professional-in-business-casua-1773050197343-85d38fb1.png", imageAlt: "James Martinez professional"},
|
|
{
|
|
id: "3", name: "Emma Johnson", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-professional-portrait-of-a-tech-profes-1773050198082-0846d209.png", imageAlt: "Emma Johnson developer"},
|
|
{
|
|
id: "4", name: "Alex Kumar", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-professional-business-executive-or-pro-1773050197799-3a3212f5.png", imageAlt: "Alex Kumar executive"},
|
|
{
|
|
id: "5", name: "Lisa Wong", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-creative-professional-or-designer-port-1773050198415-227ea04a.png", imageAlt: "Lisa Wong designer"},
|
|
{
|
|
id: "6", name: "David Park", imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhgD5SMmEp5fP6QS6d3kGy8pc4/a-diverse-young-professional-portrait-wi-1773050197381-07c33a8b.png", imageAlt: "David Park innovator"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Global Technology Leaders"
|
|
description="Partnering with industry pioneers to deliver exceptional innovation and seamless integration"
|
|
tag="Partners"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Apple", "Google", "Microsoft", "Qualcomm", "Samsung", "Sony", "Intel", "NVIDIA"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Choose Your Perfect Plan"
|
|
description="Flexible pricing options designed for every user, from enthusiasts to professionals"
|
|
tag="Pricing"
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Starter", badgeIcon: Sparkles,
|
|
price: "Free", subtitle: "Perfect for exploring Xiaomi ecosystem", buttons: [
|
|
{ text: "Get Started", href: "#" },
|
|
{ text: "Learn More", href: "#" },
|
|
],
|
|
features: [
|
|
"Xiaomi account access", "Device connectivity", "Basic cloud storage (5GB)", "Community access", "Standard support"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Pro", badgeIcon: Zap,
|
|
price: "$4.99/mo", subtitle: "Advanced features for power users", buttons: [
|
|
{ text: "Subscribe Now", href: "#" },
|
|
{ text: "Try Free", href: "#" },
|
|
],
|
|
features: [
|
|
"100GB cloud storage", "Priority sync", "Family sharing (6 members)", "Advanced privacy controls", "Priority support", "Exclusive features"],
|
|
},
|
|
{
|
|
id: "ultimate", badge: "Ultimate", badgeIcon: Crown,
|
|
price: "$9.99/mo", subtitle: "Premium experience with all features", buttons: [
|
|
{ text: "Upgrade Now", href: "#" },
|
|
{ text: "Contact Sales", href: "#" },
|
|
],
|
|
features: [
|
|
"1TB cloud storage", "Real-time sync", "Unlimited device linking", "Advanced AI features", "24/7 premium support", "Early access to new features", "Exclusive rewards program"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Get in Touch"
|
|
ctaDescription="Have questions? Our dedicated support team is ready to help you with any inquiries about our products and services."
|
|
ctaIcon={MessageCircle}
|
|
ctaButton={{ text: "Contact Support", href: "mailto:support@xiaomi.com" }}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What products does Xiaomi offer?", content:
|
|
"Xiaomi offers a comprehensive ecosystem including smartphones, smartwatches, wireless earbuds, smart home devices, laptops, tablets, and IoT solutions designed to work seamlessly together."},
|
|
{
|
|
id: "2", title: "What is the warranty on Xiaomi products?", content:
|
|
"Most Xiaomi devices come with a 1-year international warranty covering manufacturing defects. Extended warranty options are available for purchase in select markets."},
|
|
{
|
|
id: "3", title: "How do I set up my Xiaomi account?", content:
|
|
"You can create a Xiaomi account through the Mi Home app or on our website. Simply provide an email address or phone number and follow the verification steps to get started."},
|
|
{
|
|
id: "4", title: "Does Xiaomi offer customer support?", content:
|
|
"Yes, we provide 24/7 customer support through multiple channels including email, phone, live chat, and our community forum. Premium support options are available for our Ultimate plan subscribers."},
|
|
{
|
|
id: "5", title: "Can I return my device?", content:
|
|
"Xiaomi offers a 30-day return policy for unopened products and a 14-day return window for used devices in original condition with packaging. Check your local market policies for specific details."},
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{ label: "Smartphones", href: "products" },
|
|
{ label: "Wearables", href: "products" },
|
|
{ label: "Smart Home", href: "products" },
|
|
{ label: "Accessories", href: "products" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Technology", href: "/technology" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Newsroom", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "contact" },
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Xiaomi Corporation. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |