Merge version_1 into main #2
464
src/app/page.tsx
464
src/app/page.tsx
@@ -29,343 +29,151 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Workspace",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Showcase",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Rope.physics"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Workspace", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Showcase", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Rope.physics"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Physics-Enabled Flow"
|
||||
description="Experience a new level of interactive UI design with real-time elastic physics and intuitive node-based logic."
|
||||
buttons={[
|
||||
{
|
||||
text: "Launch Workspace",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "View Physics",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg?_wi=1",
|
||||
imageAlt: "digital workspace dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg?_wi=1",
|
||||
imageAlt: "ui design tool",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg",
|
||||
imageAlt: "node network visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg",
|
||||
imageAlt: "ui connection lines",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sleek-desktop-workspace-displays-active-code-windows-artificial-intelligence_482257-126307.jpg",
|
||||
imageAlt: "software workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_52683-6918.jpg",
|
||||
imageAlt: "data flow graph",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Physics-Enabled Flow"
|
||||
description="Experience a new level of interactive UI design with real-time elastic physics and intuitive node-based logic."
|
||||
buttons={[{ text: "Launch Workspace", href: "#" }, { text: "View Physics", href: "#" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg", imageAlt: "digital workspace dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg", imageAlt: "ui design tool" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg", imageAlt: "node network visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg", imageAlt: "ui connection lines" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/sleek-desktop-workspace-displays-active-code-windows-artificial-intelligence_482257-126307.jpg", imageAlt: "software workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_52683-6918.jpg", imageAlt: "data flow graph" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Elastic Physics",
|
||||
description: "Bouncy ropes and natural tension nodes that react to interaction.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg",
|
||||
imageAlt: "Modern and equipped computer lab",
|
||||
},
|
||||
{
|
||||
title: "Node Logic",
|
||||
description: "Drag-and-drop workflow nodes for complex task management.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Layers,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg?_wi=2",
|
||||
imageAlt: "Modern and equipped computer lab",
|
||||
},
|
||||
{
|
||||
title: "Live Streaming",
|
||||
description: "Real-time data visualization through glowing active connections.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Activity,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg?_wi=2",
|
||||
imageAlt: "Modern and equipped computer lab",
|
||||
},
|
||||
]}
|
||||
title="Interactive Node System"
|
||||
description="Powerful tools built for real-time visualization and logic flow control."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Elastic Physics", description: "Bouncy ropes and natural tension nodes that react to interaction.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Node Logic", description: "Drag-and-drop workflow nodes for complex task management.", bentoComponent: "reveal-icon", icon: Layers },
|
||||
{ title: "Live Streaming", description: "Real-time data visualization through glowing active connections.", bentoComponent: "reveal-icon", icon: Activity }
|
||||
]}
|
||||
title="Interactive Node System"
|
||||
description="Powerful tools built for real-time visualization and logic flow control."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Text Processor",
|
||||
price: "Free",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-end-company-office-with-computer-showing-detailed-data-insights-executive-business-meetings_482257-133111.jpg",
|
||||
imageAlt: "digital workspace dashboard",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Image Filter",
|
||||
price: "$12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440907.jpg",
|
||||
imageAlt: "ui design tool",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Audio Visualizer",
|
||||
price: "$15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg",
|
||||
imageAlt: "node network visualization",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Database Node",
|
||||
price: "$20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-160223.jpg",
|
||||
imageAlt: "ui connection lines",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "AI Agent Node",
|
||||
price: "$49",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149053605.jpg",
|
||||
imageAlt: "software workspace",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Logger Module",
|
||||
price: "Free",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/orange-network-infographic_23-2147492966.jpg",
|
||||
imageAlt: "data flow graph",
|
||||
},
|
||||
]}
|
||||
title="Node Presets"
|
||||
description="Ready-to-use presets to jumpstart your design project."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Text Processor", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/high-end-company-office-with-computer-showing-detailed-data-insights-executive-business-meetings_482257-133111.jpg", imageAlt: "digital workspace dashboard" },
|
||||
{ id: "2", name: "Image Filter", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440907.jpg", imageAlt: "ui design tool" },
|
||||
{ id: "3", name: "Audio Visualizer", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg", imageAlt: "node network visualization" },
|
||||
{ id: "4", name: "Database Node", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-160223.jpg", imageAlt: "ui connection lines" },
|
||||
{ id: "5", name: "AI Agent Node", price: "$49", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149053605.jpg", imageAlt: "software workspace" },
|
||||
{ id: "6", name: "Logger Module", price: "Free", imageSrc: "http://img.b2bpic.net/free-vector/orange-network-infographic_23-2147492966.jpg", imageAlt: "data flow graph" }
|
||||
]}
|
||||
title="Node Presets"
|
||||
description="Ready-to-use presets to jumpstart your design project."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "60fps",
|
||||
description: "Smooth Interaction",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "12ms",
|
||||
description: "Latency",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "0.1ms",
|
||||
description: "Frame Time",
|
||||
},
|
||||
]}
|
||||
title="Performance metrics"
|
||||
description="High performance physics engine with minimal overhead."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "60fps", description: "Smooth Interaction" },
|
||||
{ id: "2", value: "12ms", description: "Latency" },
|
||||
{ id: "3", value: "0.1ms", description: "Frame Time" }
|
||||
]}
|
||||
title="Performance metrics"
|
||||
description="High performance physics engine with minimal overhead."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah",
|
||||
role: "Designer",
|
||||
testimonial: "The physics engine is incredibly responsive.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-using-mobile-phone_53876-26374.jpg",
|
||||
imageAlt: "digital workspace dashboard",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike",
|
||||
role: "Dev",
|
||||
testimonial: "Connection logic is seamless.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-silent-mode-button_53876-42527.jpg",
|
||||
imageAlt: "ui design tool",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily",
|
||||
role: "Architect",
|
||||
testimonial: "Best visual workspace I've tried.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particles-design_1048-14842.jpg",
|
||||
imageAlt: "node network visualization",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David",
|
||||
role: "Creative",
|
||||
testimonial: "Bouncy ropes are so satisfying.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",
|
||||
imageAlt: "ui connection lines",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alice",
|
||||
role: "Lead UI",
|
||||
testimonial: "Pure magic in the browser.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg",
|
||||
imageAlt: "software workspace",
|
||||
},
|
||||
]}
|
||||
title="User Reviews"
|
||||
description="Designers and engineers love the fluid interface."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah", role: "Designer", testimonial: "The physics engine is incredibly responsive.", imageSrc: "http://img.b2bpic.net/free-photo/people-using-mobile-phone_53876-26374.jpg", imageAlt: "digital workspace dashboard" },
|
||||
{ id: "2", name: "Mike", role: "Dev", testimonial: "Connection logic is seamless.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-silent-mode-button_53876-42527.jpg", imageAlt: "ui design tool" },
|
||||
{ id: "3", name: "Emily", role: "Architect", testimonial: "Best visual workspace I've tried.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particles-design_1048-14842.jpg", imageAlt: "node network visualization" },
|
||||
{ id: "4", name: "David", role: "Creative", testimonial: "Bouncy ropes are so satisfying.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg", imageAlt: "ui connection lines" },
|
||||
{ id: "5", name: "Alice", role: "Lead UI", testimonial: "Pure magic in the browser.", imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg", imageAlt: "software workspace" }
|
||||
]}
|
||||
title="User Reviews"
|
||||
description="Designers and engineers love the fluid interface."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Is it performant?",
|
||||
content: "Yes, built with optimized WebGL.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Can I save nodes?",
|
||||
content: "Full JSON export is supported.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Does it work mobile?",
|
||||
content: "Optimized for touch interfaces.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-technical-assistance-repair-conceopt_53876-165268.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Common Questions"
|
||||
description="Quick answers to help you get started."
|
||||
faqsAnimation="slide-up"
|
||||
imageAlt="faq interface design"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Is it performant?", content: "Yes, built with optimized WebGL." },
|
||||
{ id: "2", title: "Can I save nodes?", content: "Full JSON export is supported." },
|
||||
{ id: "3", title: "Does it work mobile?", content: "Optimized for touch interfaces." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-technical-assistance-repair-conceopt_53876-165268.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Common Questions"
|
||||
description="Quick answers to help you get started."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Recent Updates"
|
||||
description="Keep up with the latest physics updates."
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
category: "Engine",
|
||||
title: "Improved Springs",
|
||||
excerpt: "New spring physics model.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
|
||||
imageAlt: "digital workspace dashboard",
|
||||
authorName: "Dev",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/side-view-man-planning-web-design_23-2149930953.jpg",
|
||||
date: "2024",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
category: "UI",
|
||||
title: "Glassmorphism",
|
||||
excerpt: "Refined depth UI.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-167109.jpg",
|
||||
imageAlt: "ui design tool",
|
||||
authorName: "Design",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-floating-cyber-particles_1048-14513.jpg",
|
||||
date: "2024",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
category: "Logic",
|
||||
title: "New Node Types",
|
||||
excerpt: "Added 3 new nodes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-digital-techno-wave-background-design_1048-12577.jpg",
|
||||
imageAlt: "node network visualization",
|
||||
authorName: "Dev",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/finger-touching-circle_1134-213.jpg",
|
||||
date: "2024",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Recent Updates"
|
||||
description="Keep up with the latest physics updates."
|
||||
blogs={[
|
||||
{ id: "1", category: "Engine", title: "Improved Springs", excerpt: "New spring physics model.", imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg", imageAlt: "digital workspace dashboard", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-photo/side-view-man-planning-web-design_23-2149930953.jpg", date: "2024" },
|
||||
{ id: "2", category: "UI", title: "Glassmorphism", excerpt: "Refined depth UI.", imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-167109.jpg", imageAlt: "ui design tool", authorName: "Design", authorAvatar: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-floating-cyber-particles_1048-14513.jpg", date: "2024" },
|
||||
{ id: "3", category: "Logic", title: "New Node Types", excerpt: "Added 3 new nodes.", imageSrc: "http://img.b2bpic.net/free-photo/3d-digital-techno-wave-background-design_1048-12577.jpg", imageAlt: "node network visualization", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-photo/finger-touching-circle_1134-213.jpg", date: "2024" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
title="Get Workspace Updates"
|
||||
description="Sign up for workspace updates and physics engine tips."
|
||||
tag="Stay Updated"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="Get Workspace Updates"
|
||||
description="Sign up for workspace updates and physics engine tips."
|
||||
tag="Stay Updated"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Rope.physics"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Rope.physics"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user