Update src/app/page.tsx
This commit is contained in:
341
src/app/page.tsx
341
src/app/page.tsx
@@ -25,262 +25,103 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Introduction",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Problem",
|
||||
id: "#problem",
|
||||
},
|
||||
{
|
||||
name: "System",
|
||||
id: "#system",
|
||||
},
|
||||
{
|
||||
name: "Results",
|
||||
id: "#results",
|
||||
},
|
||||
]}
|
||||
brandName="CNC Polar Traceur"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Introduction", id: "#hero" },
|
||||
{ name: "Problem", id: "#problem" },
|
||||
{ name: "System", id: "#system" },
|
||||
{ name: "Results", id: "#results" },
|
||||
]}
|
||||
brandName="CNC Polar Traceur"
|
||||
button={{ text: "Get Started", href: "#hero" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="CNC Polar Traceur"
|
||||
description="An innovative open-source polar coordinates plotter designed for precision and educational excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Technical Specs",
|
||||
href: "#system",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg?_wi=1",
|
||||
imageAlt: "Polar CNC Plotter Prototype",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-concentrated-electronics-engineer-with-magnifying-glass-his-head_176532-8199.jpg?_wi=1",
|
||||
imageAlt: "Arduino Setup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg?_wi=1",
|
||||
imageAlt: "Stepper Motor Assembly",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-professional-tattoo-artist-assembling-tattoo-machine_181624-15770.jpg?_wi=1",
|
||||
imageAlt: "Pen Mechanism",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg?_wi=2",
|
||||
imageAlt: "Full System Overview",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="CNC Polar Traceur"
|
||||
description="An innovative open-source polar coordinates plotter designed for precision and educational excellence."
|
||||
buttons={[{ text: "View Technical Specs", href: "#system" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg", imageAlt: "Polar CNC Plotter Prototype" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-concentrated-electronics-engineer-with-magnifying-glass-his-head_176532-8199.jpg", imageAlt: "Arduino Setup" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg", imageAlt: "Stepper Motor Assembly" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-professional-tattoo-artist-assembling-tattoo-machine_181624-15770.jpg", imageAlt: "Pen Mechanism" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg", imageAlt: "Full System Overview" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="problem" data-section="problem">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="The Challenge"
|
||||
title="Solving the Complexity of Cartesian Systems"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Solution",
|
||||
href: "#system",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="problem" data-section="problem">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="The Challenge"
|
||||
title="Solving the Complexity of Cartesian Systems"
|
||||
buttons={[{ text: "Explore Solution", href: "#system" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="system" data-section="system">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Arduino Brain",
|
||||
description: "Processing G-code and managing coordinate transformation efficiently.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-concentrated-electronics-engineer-with-magnifying-glass-his-head_176532-8199.jpg?_wi=2",
|
||||
titleIconSrc: "Cpu",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Stepper Control",
|
||||
description: "Precise angular and radial movement for high accuracy plotting.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg?_wi=2",
|
||||
titleIconSrc: "Settings",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Precision Lift",
|
||||
description: "Servo-controlled pen up and pen down mechanism for complex patterns.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-professional-tattoo-artist-assembling-tattoo-machine_181624-15770.jpg?_wi=2",
|
||||
titleIconSrc: "PenTool",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Custom Firmware",
|
||||
description: "Optimized software stack for polar geometry calculations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg?_wi=3",
|
||||
titleIconSrc: "Code",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Aluminum Frame",
|
||||
description: "Rigid structural design ensuring minimal vibration during operation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg?_wi=3",
|
||||
titleIconSrc: "Wrench",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
]}
|
||||
title="System Architecture"
|
||||
description="A high-performance polar coordinate system utilizing circular motion for optimal circular drawing."
|
||||
/>
|
||||
</div>
|
||||
<div id="system" data-section="system">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Arduino Brain", description: "Processing G-code and managing coordinate transformation efficiently.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-concentrated-electronics-engineer-with-magnifying-glass-his-head_176532-8199.jpg", titleIconSrc: "Cpu", buttonText: "Learn More" },
|
||||
{ title: "Stepper Control", description: "Precise angular and radial movement for high accuracy plotting.", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg", titleIconSrc: "Settings", buttonText: "Learn More" },
|
||||
{ title: "Precision Lift", description: "Servo-controlled pen up and pen down mechanism for complex patterns.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-professional-tattoo-artist-assembling-tattoo-machine_181624-15770.jpg", titleIconSrc: "PenTool", buttonText: "Learn More" },
|
||||
{ title: "Custom Firmware", description: "Optimized software stack for polar geometry calculations.", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg", titleIconSrc: "Code", buttonText: "Learn More" },
|
||||
{ title: "Aluminum Frame", description: "Rigid structural design ensuring minimal vibration during operation.", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545636.jpg", titleIconSrc: "Wrench", buttonText: "Learn More" }
|
||||
]}
|
||||
title="System Architecture"
|
||||
description="A high-performance polar coordinate system utilizing circular motion for optimal circular drawing."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="results" data-section="results">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "95%",
|
||||
title: "Drawing Accuracy",
|
||||
items: [
|
||||
"Circle deviation < 0.5mm",
|
||||
"Reliable vector tracking",
|
||||
"Consistent line weight",
|
||||
"High resolution output",
|
||||
"Repeatable patterns",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "$45",
|
||||
title: "Total Cost",
|
||||
items: [
|
||||
"Low cost components",
|
||||
"Open-source drivers",
|
||||
"Accessible materials",
|
||||
"Minimal waste",
|
||||
"Budget friendly",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15m",
|
||||
title: "Setup Time",
|
||||
items: [
|
||||
"Easy calibration",
|
||||
"Rapid deployment",
|
||||
"Quick mount system",
|
||||
"Simple wiring",
|
||||
"User-friendly config",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Performance Metrics"
|
||||
description="Real-world test results showing cost-efficiency and precision."
|
||||
/>
|
||||
</div>
|
||||
<div id="results" data-section="results">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "95%", title: "Drawing Accuracy", items: ["Circle deviation < 0.5mm", "Reliable vector tracking", "Consistent line weight", "High resolution output", "Repeatable patterns"] },
|
||||
{ id: "m2", value: "$45", title: "Total Cost", items: ["Low cost components", "Open-source drivers", "Accessible materials", "Minimal waste", "Budget friendly"] },
|
||||
{ id: "m3", value: "15m", title: "Setup Time", items: ["Easy calibration", "Rapid deployment", "Quick mount system", "Simple wiring", "User-friendly config"] }
|
||||
]}
|
||||
title="Performance Metrics"
|
||||
description="Real-world test results showing cost-efficiency and precision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What G-code software do you recommend?",
|
||||
content: "The system is compatible with standard G-code senders and custom coordinate transformation software.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can it be upgraded to WiFi?",
|
||||
content: "Yes, adding an ESP32 or Wi-Fi module is part of the future development roadmap.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is the accuracy suitable for industrial use?",
|
||||
content: "It is optimized for educational and prototyping purposes, providing excellent value for cost.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "What materials are required for assembly?",
|
||||
content: "Standard 3D printed parts, aluminum extrusions, and basic electronics kits.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Is the source code available?",
|
||||
content: "Yes, the project is open-source and hosted on our GitHub repository.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common inquiries regarding our CNC project."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "What G-code software do you recommend?", content: "The system is compatible with standard G-code senders and custom coordinate transformation software." },
|
||||
{ id: "q2", title: "Can it be upgraded to WiFi?", content: "Yes, adding an ESP32 or Wi-Fi module is part of the future development roadmap." },
|
||||
{ id: "q3", title: "Is the accuracy suitable for industrial use?", content: "It is optimized for educational and prototyping purposes, providing excellent value for cost." },
|
||||
{ id: "q4", title: "What materials are required for assembly?", content: "Standard 3D printed parts, aluminum extrusions, and basic electronics kits." },
|
||||
{ id: "q5", title: "Is the source code available?", content: "Yes, the project is open-source and hosted on our GitHub repository." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common inquiries regarding our CNC project."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg?_wi=4"
|
||||
logoText="CNC Polar Traceur"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Top",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Problem",
|
||||
href: "#problem",
|
||||
},
|
||||
{
|
||||
label: "Architecture",
|
||||
href: "#system",
|
||||
},
|
||||
{
|
||||
label: "Metrics",
|
||||
href: "#results",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Updates",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-3d-penguin-bird-with-nature-landscape_23-2151159526.jpg"
|
||||
logoText="CNC Polar Traceur"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Top", href: "#hero" }, { label: "Problem", href: "#problem" }, { label: "Architecture", href: "#system" }, { label: "Metrics", href: "#results" }] },
|
||||
{ title: "Support", items: [{ label: "Documentation", href: "#" }, { label: "GitHub", href: "#" }, { label: "Contact", href: "#" }, { label: "Updates", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user