Merge version_1 into main #2
506
src/app/page.tsx
506
src/app/page.tsx
@@ -11,7 +11,7 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Award, Clock, Code, FileText, Server, Smartphone, Star, Users, Zap } from "lucide-react";
|
||||
import { Award, Clock, Code, FileText, Server, Smartphone, Star, Users, Zap, Cpu } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -28,386 +28,146 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="IoTLearner"
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Courses", id: "products" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="IoTLearner"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Master the Future of IoT."
|
||||
description="Learn to bridge the gap between hardware and software with ESP32, Arduino, and Raspberry Pi tutorials designed for the modern engineer."
|
||||
tag="IoT Education Platform"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=1",
|
||||
imageAlt: "IoT Components",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/display-tablet-with-green-screen-mock-up-template-placed-desk-scientific-laboratory-while-woman-medical-research-scientist-analysing-virus-evolution-digital-monitor-conducting-experiment_482257-13920.jpg",
|
||||
imageAlt: "IoT Lab Setup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg",
|
||||
imageAlt: "Smart home automation setup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-holding-mobile-phone-with-high-tech-application-smart-house-features-controlling-lights-with-wireless-device_482257-2257.jpg",
|
||||
imageAlt: "High tech mobile integration",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/notepad-with-green-screen-working-labooratory-with-mock-up-monitor-chroma-key-display-while-professional-engineer-testing-virus-evolution-background-high-tech-development-lab_482257-13921.jpg",
|
||||
imageAlt: "Modern development laboratory",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10,000+ developers"
|
||||
tagIcon={Star}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Master the Future of IoT."
|
||||
description="Learn to bridge the gap between hardware and software with ESP32, Arduino, and Raspberry Pi tutorials designed for the modern engineer."
|
||||
tag="IoT Education Platform"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg", imageAlt: "IoT Components" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/display-tablet-with-green-screen-mock-up-template-placed-desk-scientific-laboratory-while-woman-medical-research-scientist-analysing-virus-evolution-digital-monitor-conducting-experiment_482257-13920.jpg", imageAlt: "IoT Lab Setup" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10,000+ developers"
|
||||
tagIcon={Star}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Why IoT Education Matters."
|
||||
description="We believe hardware hacking shouldn't be daunting. Our platform provides intuitive, project-based learning paths to turn you from novice to innovator."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Hands-on Learning",
|
||||
description: "Practical projects you can build at home.",
|
||||
},
|
||||
{
|
||||
title: "Industry Standards",
|
||||
description: "Learn the tools used in professional development.",
|
||||
},
|
||||
{
|
||||
title: "Community Driven",
|
||||
description: "Access to a global network of IoT developers.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/printed-circuit-as-background_1398-430.jpg?_wi=1"
|
||||
imageAlt="ESP32 microcontroller setup"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Why IoT Education Matters."
|
||||
description="We believe hardware hacking shouldn't be daunting. Our platform provides intuitive, project-based learning paths to turn you from novice to innovator."
|
||||
bulletPoints={[
|
||||
{ title: "Hands-on Learning", description: "Practical projects you can build at home." },
|
||||
{ title: "Industry Standards", description: "Learn the tools used in professional development." },
|
||||
{ title: "Community Driven", description: "Access to a global network of IoT developers." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/printed-circuit-as-background_1398-430.jpg"
|
||||
imageAlt="ESP32 microcontroller setup"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Integrated Simulation",
|
||||
description: "Test code before burning to hardware.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/printed-circuit-as-background_1398-427.jpg",
|
||||
imageAlt: "ESP32 simulation",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Zap,
|
||||
text: "Low latency",
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
text: "Real-time debugging",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=2",
|
||||
imageAlt: "microcontroller esp32 breadboard close up",
|
||||
},
|
||||
{
|
||||
title: "Code Snippet Library",
|
||||
description: "Copy, paste, and deploy instantly.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bulb-with-black-background_1048-1993.jpg",
|
||||
imageAlt: "IoT diagram",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Code,
|
||||
text: "Standardized libraries",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
text: "Well-commented",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/printed-circuit-as-background_1398-430.jpg?_wi=2",
|
||||
imageAlt: "microcontroller esp32 breadboard close up",
|
||||
},
|
||||
{
|
||||
title: "Hardware Support",
|
||||
description: "Native support for popular boards.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/astronaut-using-tablet-check-space-station-analytics-after-completing-mission_482257-130475.jpg",
|
||||
imageAlt: "Raspberry Pi board",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Smartphone,
|
||||
text: "Mobile-ready",
|
||||
},
|
||||
{
|
||||
icon: Server,
|
||||
text: "Cloud-synced",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-desk-supplies-arrangement-still-life_23-2149511863.jpg?_wi=1",
|
||||
imageAlt: "microcontroller esp32 breadboard close up",
|
||||
},
|
||||
]}
|
||||
title="Advanced Features for Success"
|
||||
description="Everything you need to excel in hardware integration."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Integrated Simulation", description: "Test code before burning to hardware.", media: { imageSrc: "http://img.b2bpic.net/free-photo/printed-circuit-as-background_1398-427.jpg", imageAlt: "ESP32 simulation" },
|
||||
items: [{ icon: Zap, text: "Low latency" }, { icon: Cpu, text: "Real-time debugging" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Code Snippet Library", description: "Copy, paste, and deploy instantly.", media: { imageSrc: "http://img.b2bpic.net/free-photo/bulb-with-black-background_1048-1993.jpg", imageAlt: "IoT diagram" },
|
||||
items: [{ icon: Code, text: "Standardized libraries" }, { icon: FileText, text: "Well-commented" }],
|
||||
reverse: true
|
||||
}
|
||||
]}
|
||||
title="Advanced Features for Success"
|
||||
description="Everything you need to excel in hardware integration."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15K+",
|
||||
title: "Developers",
|
||||
description: "Active learning today",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Projects",
|
||||
description: "Completed by users",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
title: "Access",
|
||||
description: "Global support teams",
|
||||
icon: Clock,
|
||||
},
|
||||
]}
|
||||
title="Growing Global Impact"
|
||||
description="Our community is growing rapidly across the globe."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15K+", title: "Developers", description: "Active learning today", icon: Users },
|
||||
{ id: "m2", value: "500+", title: "Projects", description: "Completed by users", icon: Award },
|
||||
{ id: "m3", value: "24/7", title: "Access", description: "Global support teams", icon: Clock },
|
||||
]}
|
||||
title="Growing Global Impact"
|
||||
description="Our community is growing rapidly across the globe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "IoTLearner",
|
||||
name: "Starter Kit Pro",
|
||||
price: "$49",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-desk-supplies-arrangement-still-life_23-2149511863.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "IoTLearner",
|
||||
name: "Advanced Sensor Pack",
|
||||
price: "$79",
|
||||
rating: 5,
|
||||
reviewCount: "89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hardware-engineer-repairing-motherboard_23-2147883621.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "IoTLearner",
|
||||
name: "Cloud Hub Kit",
|
||||
price: "$129",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-with-ai-operated-devices_23-2151922459.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "IoTLearner",
|
||||
name: "Connectivity Module",
|
||||
price: "$39",
|
||||
rating: 4,
|
||||
reviewCount: "200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-inventor-creating-her-workshop_23-2149067227.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "IoTLearner",
|
||||
name: "Power Management Kit",
|
||||
price: "$59",
|
||||
rating: 5,
|
||||
reviewCount: "67",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/it-technician-students-inserting-ram-computer-motherboard_23-2147883822.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "IoTLearner",
|
||||
name: "Prototype Chassis",
|
||||
price: "$89",
|
||||
rating: 4,
|
||||
reviewCount: "112",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hard-drive-still-life-close-up_23-2149319361.jpg",
|
||||
},
|
||||
]}
|
||||
title="Explore Our Learning Kits"
|
||||
description="Professional-grade hardware for your growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "IoTLearner", name: "Starter Kit Pro", price: "$49", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/view-desk-supplies-arrangement-still-life_23-2149511863.jpg" },
|
||||
{ id: "p2", brand: "IoTLearner", name: "Advanced Sensor Pack", price: "$79", rating: 5, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hardware-engineer-repairing-motherboard_23-2147883621.jpg" },
|
||||
{ id: "p3", brand: "IoTLearner", name: "Cloud Hub Kit", price: "$129", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-with-ai-operated-devices_23-2151922459.jpg" },
|
||||
]}
|
||||
title="Explore Our Learning Kits"
|
||||
description="Professional-grade hardware for your growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Smith",
|
||||
handle: "@alexs",
|
||||
testimonial: "Transformed my hardware knowledge in weeks.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-62908.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Doe",
|
||||
handle: "@jdoe",
|
||||
testimonial: "The best platform for ESP32 tutorials.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Kevin Lee",
|
||||
handle: "@klee",
|
||||
testimonial: "Invaluable resource for my career.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-down-view-it-admin-stretching-after-sitting-desk-chair-all-day_482257-83102.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Chen",
|
||||
handle: "@schen",
|
||||
testimonial: "Professional tools, clear explanations.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-dark-room_1098-12825.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Mike Ross",
|
||||
handle: "@mross",
|
||||
testimonial: "I built my first robot in a weekend!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-person-working-late-night-from-home_23-2150064958.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="User Success Stories"
|
||||
description="Hear from the developers who changed their career trajectory."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Smith", handle: "@alexs", testimonial: "Transformed my hardware knowledge in weeks.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-62908.jpg" },
|
||||
{ id: "2", name: "Jane Doe", handle: "@jdoe", testimonial: "The best platform for ESP32 tutorials.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="User Success Stories"
|
||||
description="Hear from the developers who changed their career trajectory."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need hardware?",
|
||||
content: "Yes, we recommend a starter kit.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is coding knowledge required?",
|
||||
content: "We cover everything from basics to advanced.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How long are the courses?",
|
||||
content: "Self-paced study.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about starting."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need hardware?", content: "Yes, we recommend a starter kit." },
|
||||
{ id: "f2", title: "Is coding knowledge required?", content: "We cover everything from basics to advanced." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about starting."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Learning",
|
||||
items: [
|
||||
{
|
||||
label: "ESP32",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Arduino",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 IoTLearner. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Learning", items: [{ label: "ESP32", href: "#" }, { label: "Arduino", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 IoTLearner. All rights reserved."
|
||||
bottomRightText="Privacy Policy"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user