187 lines
9.6 KiB
TypeScript
187 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Zap, Settings, Star, GitBranch, Layers, Maximize2, Box, Target, Clock } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Units", id: "units" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Converting", href: "converter" }}
|
|
brandName="UnitConvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Convert Any Unit Instantly"
|
|
description="Fast, accurate, and easy-to-use unit converter supporting 8+ categories including length, weight, temperature, volume, speed, area, data storage, and time."
|
|
tag="Universal Converter"
|
|
tagIcon={Zap}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/coworkers-discussing-statistics_1098-21770.jpg", imageAlt: "Unit converter interface" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/time-minute-alarm-duration-hour-schedule-concept_53876-132557.jpg", imageAlt: "Real-time conversion feature" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/medical-health-analysis-word-chart_53876-121213.jpg", imageAlt: "Multiple unit categories" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/keyboard-screen-modern-indoor-sit-analysis_1421-265.jpg", imageAlt: "Responsive design" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop-with-measuring-device_23-2150914191.jpg", imageAlt: "Accurate conversions" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Start Converting", href: "converter" },
|
|
{ text: "Learn More", href: "how-it-works" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="converter" data-section="converter">
|
|
<MediaAbout
|
|
title="Powerful Conversion Engine"
|
|
description="Our unit converter provides real-time, accurate conversions with an intuitive interface. Simply select your unit category, choose your source and target units, enter a value, and get instant results. Perfect for students, professionals, and anyone needing quick unit conversions."
|
|
tag="Converter Tool"
|
|
tagIcon={Settings}
|
|
imageSrc="http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg"
|
|
imageAlt="Converter interface"
|
|
buttons={[{ text: "Try Now", href: "#" }]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Why Choose Our Converter"
|
|
description="Explore the key features that make our unit converter the best choice for all your conversion needs."
|
|
tag="Features"
|
|
tagIcon={Star}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Real-Time Conversion", description: "Get instant results as you type. No need to click convert—your conversions update automatically in real-time for maximum efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/time-minute-alarm-duration-hour-schedule-concept_53876-132557.jpg", imageAlt: "Real-time conversion"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "8+ Unit Categories", description: "Support for length, weight, temperature, volume, speed, area, data storage, and time. All the conversions you need in one place.", imageSrc: "http://img.b2bpic.net/free-photo/medical-health-analysis-word-chart_53876-121213.jpg", imageAlt: "Multiple unit categories"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Fully Responsive Design", description: "Works seamlessly on mobile, tablet, and desktop. Convert units anywhere, anytime with a consistent, optimized experience.", imageSrc: "http://img.b2bpic.net/free-photo/keyboard-screen-modern-indoor-sit-analysis_1421-265.jpg", imageAlt: "Responsive design"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "High Accuracy", description: "Precise calculations rounded to 4 decimal places. Trust our converter for accurate results every time you convert.", imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop-with-measuring-device_23-2150914191.jpg", imageAlt: "Accurate conversions"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<ProductCardFour
|
|
title="3 Simple Steps to Convert"
|
|
description="Converting units has never been easier. Follow these three simple steps to get started."
|
|
tag="How It Works"
|
|
tagIcon={GitBranch}
|
|
products={[
|
|
{
|
|
id: "step-1", name: "Select Category", price: "Step 1", variant: "Choose from 8+ unit categories", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg", imageAlt: "Step 1: Select Category"
|
|
},
|
|
{
|
|
id: "step-2", name: "Enter Value", price: "Step 2", variant: "Input the value you want to convert", imageSrc: "http://img.b2bpic.net/free-photo/laptop-desk_93675-128565.jpg", imageAlt: "Step 2: Enter Value"
|
|
},
|
|
{
|
|
id: "step-3", name: "Get Results", price: "Step 3", variant: "Instant conversion results displayed", imageSrc: "http://img.b2bpic.net/free-vector/gradient-infographic-element-collection_23-2148271859.jpg", imageAlt: "Step 3: Get Results"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="units" data-section="units">
|
|
<MetricCardOne
|
|
title="Supported Unit Categories"
|
|
description="Our comprehensive converter supports multiple unit types for all your conversion needs."
|
|
tag="Unit Categories"
|
|
tagIcon={Layers}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "8", title: "Categories", description: "Length, weight, temperature, volume, speed, area, data, time", icon: Maximize2
|
|
},
|
|
{
|
|
id: "2", value: "50+", title: "Units", description: "Comprehensive coverage across all supported categories", icon: Box
|
|
},
|
|
{
|
|
id: "3", value: "100%", title: "Accuracy", description: "Precise calculations with 4 decimal place precision", icon: Target
|
|
},
|
|
{
|
|
id: "4", value: "24/7", title: "Available", description: "Always accessible whenever you need to convert", icon: Clock
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="UnitConvert"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Converter", href: "converter" },
|
|
{ label: "Features", href: "features" },
|
|
{ label: "How It Works", href: "how-it-works" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 UnitConvert. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|