Merge version_1_1776437742275 into main #1
520
src/App.tsx
520
src/App.tsx
@@ -13,334 +13,210 @@ import { Shield, Smile, Users } from "lucide-react";
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Innovation"
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
tag="Revolutionary Tech"
|
||||
title="Innovation Refined."
|
||||
description="Experience the pinnacle of performance and design in one unified, seamless platform."
|
||||
primaryButton={{
|
||||
text: "Buy Now",
|
||||
href: "#pricing",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/a-high-end-futuristic-tech-product-displ-1776437765392-8106a23f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesTimelineCards
|
||||
tag="Performance"
|
||||
title="Built for Excellence."
|
||||
description="Discover the engineering marvels that power our platform forward."
|
||||
items={[
|
||||
{
|
||||
title: "Speed",
|
||||
description: "Unmatched processing capabilities.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/minimalist-icon-design-for-software-feat-1776437774133-06811a38.png",
|
||||
},
|
||||
{
|
||||
title: "Security",
|
||||
description: "Fortified architecture at every layer.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/abstract-geometric-shapes-floating-in-da-1776437784045-fff5f1c9.png",
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
description: "Deep insights in real-time.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/detailed-data-visualization-graph-on-a-d-1776437794451-65828ec0.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Impact"
|
||||
title="Measurable Success."
|
||||
description="The numbers behind our revolutionary platform."
|
||||
metrics={[
|
||||
{
|
||||
title: "Users",
|
||||
value: "1M+",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "Uptime",
|
||||
value: "99.9%",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Satisfaction",
|
||||
value: "98%",
|
||||
icon: Smile,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Plans"
|
||||
title="Choose Your Path."
|
||||
description="Simple pricing tailored to your professional needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic",
|
||||
price: "$19",
|
||||
description: "Essential tools for growth.",
|
||||
features: [
|
||||
"Feature A",
|
||||
"Feature B",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$49",
|
||||
description: "Advanced power for professionals.",
|
||||
features: [
|
||||
"All Basic features",
|
||||
"Advanced Analytics",
|
||||
"24/7 Support",
|
||||
],
|
||||
highlight: "Most Popular",
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "$149",
|
||||
description: "Scalable for entire teams.",
|
||||
features: [
|
||||
"Unlimited capacity",
|
||||
"Custom integrations",
|
||||
"Dedicated account manager",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialMetricsCards
|
||||
tag="Feedback"
|
||||
title="Loved by Visionaries."
|
||||
description="Hear what our global community of users has to say."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Smith",
|
||||
role: "Designer",
|
||||
company: "CreativeFlow",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-professional-person-soft-l-1776437804250-4774d963.png",
|
||||
},
|
||||
{
|
||||
name: "Jordan Lee",
|
||||
role: "Engineer",
|
||||
company: "TechStream",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-young-tech-innovator-profe-1776437813336-ad60a92e.png",
|
||||
},
|
||||
{
|
||||
name: "Casey Morgan",
|
||||
role: "Manager",
|
||||
company: "GrowFast",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-senior-software-architect--1776437823208-92aff64b.png",
|
||||
},
|
||||
{
|
||||
name: "Taylor Ray",
|
||||
role: "Developer",
|
||||
company: "CodeLab",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-product-designer-soft-aest-1776437841924-5c27bf5f.png",
|
||||
},
|
||||
{
|
||||
name: "Morgan West",
|
||||
role: "Founder",
|
||||
company: "StartupX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-marketing-director-clean-a-1776437852371-b59b595d.png",
|
||||
},
|
||||
]}
|
||||
metrics={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Client Success",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Reviews",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked."
|
||||
description="Quick answers to common questions."
|
||||
items={[
|
||||
{
|
||||
question: "What is the setup process?",
|
||||
answer: "Simple, 3-step installation.",
|
||||
},
|
||||
{
|
||||
question: "Are there contracts?",
|
||||
answer: "No, cancel anytime.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer support?",
|
||||
answer: "24/7 dedicated assistance.",
|
||||
},
|
||||
{
|
||||
question: "Is it secure?",
|
||||
answer: "Industry-leading AES-256 encryption.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogSimpleCards
|
||||
tag="Insights"
|
||||
title="Latest Innovations."
|
||||
description="Insights from our engineering and design teams."
|
||||
items={[
|
||||
{
|
||||
category: "Design",
|
||||
title: "Future of UI",
|
||||
excerpt: "Minimalism is here to stay.",
|
||||
authorName: "Jane Doe",
|
||||
date: "Oct 1, 2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/minimalist-desk-setup-with-laptop-glowin-1776437860930-7ee39099.png",
|
||||
authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-professional-person-soft-l-1776437898590-cb71f25a.png",
|
||||
},
|
||||
{
|
||||
category: "Tech",
|
||||
title: "Scaling Systems",
|
||||
excerpt: "How we handle massive data.",
|
||||
authorName: "John Smith",
|
||||
date: "Oct 5, 2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/abstract-code-lines-on-dark-screen-soft--1776437871525-e36d96bc.png",
|
||||
authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-young-tech-innovator-profe-1776437907714-489b8741.png",
|
||||
},
|
||||
{
|
||||
category: "Leadership",
|
||||
title: "Growth Mindset",
|
||||
excerpt: "Staying ahead of trends.",
|
||||
authorName: "Alex King",
|
||||
date: "Oct 10, 2024",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/futuristic-digital-infrastructure-backgr-1776437880421-35a3bb56.png",
|
||||
authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-senior-software-architect--1776437917779-b3da7fb4.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Connect"
|
||||
title="Get in Touch."
|
||||
description="Start your journey with us today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/a-close-up-of-a-sleek-digital-interface--1776437889384-cd863873.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBasic
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Innovation"
|
||||
navItems={[
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
name: "Features", href: "#features"},
|
||||
{
|
||||
name: "Pricing", href: "#pricing"},
|
||||
{
|
||||
name: "Contact", href: "#contact"},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
tag="Revolutionary Tech"
|
||||
title="Innovation Refined."
|
||||
description="Experience the pinnacle of performance and design in one unified, seamless platform."
|
||||
primaryButton={{
|
||||
text: "Buy Now", href: "#pricing"}}
|
||||
secondaryButton={{
|
||||
text: "Learn More", href: "#features"}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/a-high-end-futuristic-tech-product-displ-1776437765392-8106a23f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesTimelineCards
|
||||
tag="Performance"
|
||||
title="Built for Excellence."
|
||||
description="Discover the engineering marvels that power our platform forward."
|
||||
items={[
|
||||
{
|
||||
title: "Speed", description: "Unmatched processing capabilities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/minimalist-icon-design-for-software-feat-1776437774133-06811a38.png"},
|
||||
{
|
||||
title: "Security", description: "Fortified architecture at every layer.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/abstract-geometric-shapes-floating-in-da-1776437784045-fff5f1c9.png"},
|
||||
{
|
||||
title: "Analytics", description: "Deep insights in real-time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/detailed-data-visualization-graph-on-a-d-1776437794451-65828ec0.png"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Impact"
|
||||
title="Measurable Success."
|
||||
description="The numbers behind our revolutionary platform."
|
||||
metrics={[
|
||||
{
|
||||
title: "Users", value: "1M+", icon: Users,
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
title: "Uptime", value: "99.9%", icon: Shield,
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
title: "Satisfaction", value: "98%", icon: Smile,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftText="© 2024 Innovation Inc."
|
||||
rightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Plans"
|
||||
title="Choose Your Path."
|
||||
description="Simple pricing tailored to your professional needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic", price: "$19", description: "Essential tools for growth.", features: [
|
||||
"Feature A", "Feature B"],
|
||||
primaryButton: {
|
||||
text: "Get Started", href: "#contact"},
|
||||
},
|
||||
{
|
||||
tag: "Pro", price: "$49", description: "Advanced power for professionals.", features: [
|
||||
"All Basic features", "Advanced Analytics", "24/7 Support"],
|
||||
highlight: "Most Popular", primaryButton: {
|
||||
text: "Get Started", href: "#contact"},
|
||||
},
|
||||
{
|
||||
tag: "Enterprise", price: "$149", description: "Scalable for entire teams.", features: [
|
||||
"Unlimited capacity", "Custom integrations", "Dedicated account manager"],
|
||||
primaryButton: {
|
||||
text: "Contact Us", href: "#contact"},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialMetricsCards
|
||||
tag="Feedback"
|
||||
title="Loved by Visionaries."
|
||||
description="Hear what our global community of users has to say."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Smith", role: "Designer", company: "CreativeFlow", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-professional-person-soft-l-1776437804250-4774d963.png"},
|
||||
{
|
||||
name: "Jordan Lee", role: "Engineer", company: "TechStream", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-young-tech-innovator-profe-1776437813336-ad60a92e.png"},
|
||||
{
|
||||
name: "Casey Morgan", role: "Manager", company: "GrowFast", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-senior-software-architect--1776437823208-92aff64b.png"},
|
||||
{
|
||||
name: "Taylor Ray", role: "Developer", company: "CodeLab", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-product-designer-soft-aest-1776437841924-5c27bf5f.png"},
|
||||
{
|
||||
name: "Morgan West", role: "Founder", company: "StartupX", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-marketing-director-clean-a-1776437852371-b59b595d.png"},
|
||||
]}
|
||||
metrics={[
|
||||
{
|
||||
value: "100%", label: "Client Success"},
|
||||
{
|
||||
value: "4.9/5", label: "Avg Rating"},
|
||||
{
|
||||
value: "500+", label: "Reviews"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked."
|
||||
description="Quick answers to common questions."
|
||||
items={[
|
||||
{
|
||||
question: "What is the setup process?", answer: "Simple, 3-step installation."},
|
||||
{
|
||||
question: "Are there contracts?", answer: "No, cancel anytime."},
|
||||
{
|
||||
question: "Do you offer support?", answer: "24/7 dedicated assistance."},
|
||||
{
|
||||
question: "Is it secure?", answer: "Industry-leading AES-256 encryption."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogSimpleCards
|
||||
tag="Insights"
|
||||
title="Latest Innovations."
|
||||
description="Insights from our engineering and design teams."
|
||||
items={[
|
||||
{
|
||||
category: "Design", title: "Future of UI", excerpt: "Minimalism is here to stay.", authorName: "Jane Doe", date: "Oct 1, 2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/minimalist-desk-setup-with-laptop-glowin-1776437860930-7ee39099.png", authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-professional-person-soft-l-1776437898590-cb71f25a.png"},
|
||||
{
|
||||
category: "Tech", title: "Scaling Systems", excerpt: "How we handle massive data.", authorName: "John Smith", date: "Oct 5, 2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/abstract-code-lines-on-dark-screen-soft--1776437871525-e36d96bc.png", authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-young-tech-innovator-profe-1776437907714-489b8741.png"},
|
||||
{
|
||||
category: "Leadership", title: "Growth Mindset", excerpt: "Staying ahead of trends.", authorName: "Alex King", date: "Oct 10, 2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/futuristic-digital-infrastructure-backgr-1776437880421-35a3bb56.png", authorImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/portrait-of-a-senior-software-architect--1776437917779-b3da7fb4.png"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
tag="Connect"
|
||||
title="Get in Touch."
|
||||
description="Start your journey with us today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Email Address", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your Message", rows: 4,
|
||||
}}
|
||||
buttonText="Send Message"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AKDZQtpZ8HQ73PXRvriXIQYy3m/a-close-up-of-a-sleek-digital-interface--1776437889384-cd863873.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBasic
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#"},
|
||||
{
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
leftText="© 2024 Innovation Inc."
|
||||
rightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user