Update src/App.tsx
This commit is contained in:
366
src/App.tsx
366
src/App.tsx
@@ -10,263 +10,141 @@ import TestimonialMetricsCards from '@/components/sections/testimonial/Testimoni
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="REDBRAND"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="REDBRAND"
|
||||
navItems={[
|
||||
{ name: "About", href: "#about" },
|
||||
{ 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">
|
||||
<HeroSplit
|
||||
tag="Bold Design"
|
||||
title="Redefining Minimalist Impact"
|
||||
description="Experience a powerful blend of color and simplicity that elevates your brand identity beyond the ordinary."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="https://pixabay.com/get/ga9867b7fa936931f472c3e014e1861ff72cd2e6eec0c96e169bc632e2d240e8475da9dd2b90e59a0edba0859556fe163e2ff981d908653c52d29dc0b2c2a8298_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
tag="Bold Design"
|
||||
title="Redefining Minimalist Impact"
|
||||
description="Experience a powerful blend of color and simplicity that elevates your brand identity beyond the ordinary."
|
||||
primaryButton={{
|
||||
text: "Get Started", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "Learn More", href: "#about"}}
|
||||
imageSrc="https://pixabay.com/get/ga9867b7fa936931f472c3e014e1861ff72cd2e6eec0c96e169bc632e2d240e8475da9dd2b90e59a0edba0859556fe163e2ff981d908653c52d29dc0b2c2a8298_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Designed for Impact"
|
||||
descriptions={[
|
||||
"Our mission is to create high-energy brand experiences through bold color choices and clean design architecture.",
|
||||
"Every element is carefully considered to ensure maximum engagement and visual cohesion across all platforms.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutTextSplit
|
||||
title="Designed for Impact"
|
||||
descriptions={[
|
||||
"Our mission is to create high-energy brand experiences through bold color choices and clean design architecture.", "Every element is carefully considered to ensure maximum engagement and visual cohesion across all platforms."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesFlipCards
|
||||
tag="Capabilities"
|
||||
title="Core Strengths"
|
||||
description="Powerful features that keep your brand ahead of the curve."
|
||||
items={[
|
||||
{
|
||||
title: "Bold Aesthetic",
|
||||
descriptions: [
|
||||
"Deep crimson accents",
|
||||
"Minimalist layout",
|
||||
],
|
||||
imageSrc: "https://pixabay.com/get/gf6191aebde1a902295f674d29703b93f3804cec5ffef0d82537aab6fcda2cafd54e88477d5845b8fdc4a91787a64ad0b63a6fc15cf983184cb720aa704485805_1280.jpg",
|
||||
},
|
||||
{
|
||||
title: "High Conversion",
|
||||
descriptions: [
|
||||
"Optimized CTA placement",
|
||||
"Focused user journey",
|
||||
],
|
||||
imageSrc: "https://pixabay.com/get/g4abaf5c3d7d08298235efe37587cacb88b3b427a4f2f33fc8e8684fcab7d2c8a3572b19c3b566f889c02db163e41b618e4da42736457cccb4e681e50f5842078_1280.jpg",
|
||||
},
|
||||
{
|
||||
title: "Seamless Motion",
|
||||
descriptions: [
|
||||
"Smooth interaction design",
|
||||
"Responsive grid",
|
||||
],
|
||||
imageSrc: "https://pixabay.com/get/g6f9e601bac816b48e165df8adee1cf24cf5f0cd73a842eed70b4ebfda9d0db7d02d77207951d92d35c3298cdd68dd10c9e6a5c51964a4d3f4f86f0069bacc23f_1280.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Investment"
|
||||
title="Choose Your Path"
|
||||
description="Flexible plans designed to match your growth objectives."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic",
|
||||
price: "$99",
|
||||
description: "Perfect for starters",
|
||||
features: [
|
||||
"Feature A",
|
||||
"Feature B",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$299",
|
||||
description: "Ideal for scale",
|
||||
features: [
|
||||
"All Basic",
|
||||
"Advanced Tech",
|
||||
"Priority",
|
||||
],
|
||||
highlight: "Most Popular",
|
||||
primaryButton: {
|
||||
text: "Select",
|
||||
href: "#",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Custom",
|
||||
price: "Custom",
|
||||
description: "Enterprise ready",
|
||||
features: [
|
||||
"Custom Dev",
|
||||
"Dedicated Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialMetricsCards
|
||||
tag="Proof"
|
||||
title="What Clients Say"
|
||||
description="Hear directly from those who have transformed their brand identity with us."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice",
|
||||
role: "CEO",
|
||||
company: "Tech Corp",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g242825b013bef85ef2c32457dbce7bc0423c3a96a32aa3560731e69ef17ea1de91293f227f5c53c6b137db153d3118842edc9ead8eaed3634f423345d29cb048_1280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Bob",
|
||||
role: "Founder",
|
||||
company: "Design Co",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/gec3022bf52e1a8304949d23757c847f1a2ec234297fb2bbd7304e71aef955822bce160707b8bafd63cbc4ea6fe802f5c9e0fbc303444810c23a335f62f6bfd73_1280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Charlie",
|
||||
role: "Creative",
|
||||
company: "Motion Inc",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g6a38634b37f5b1fd6ff5ce9fc0021a31c48b6960ecf068393abb42b948daa4a9245441de7265b2a1f768fd0248e55779d029910a92ad03d35373bc05a202870a_1280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Diana",
|
||||
role: "Director",
|
||||
company: "Growth Lab",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/gbaa9ed87da3676373e98fe7bfb5b712ae7d2ca6aede8a8ab67ab3b888b3255385ffb2fd21a8ff3f7e0efc553df6ada0d87950110b320afbb9c286472fd118369_1280.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ethan",
|
||||
role: "Manager",
|
||||
company: "Next Level",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/ge82a1d5c76a1400a8d256504e8ea9f91709cc9740068a6b04ee931a3adf8d6d8e210aeee6904d8c7760761b455928e1d2eed179057e20a8e816f71f2662b17e4_1280.jpg",
|
||||
},
|
||||
]}
|
||||
metrics={[
|
||||
{
|
||||
value: "100%",
|
||||
label: "Client Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Projects Delivered",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
label: "Dedicated Support",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Ready to bring your bold vision to life?"
|
||||
primaryButton={{
|
||||
text: "Let's Talk",
|
||||
href: "mailto:hello@example.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Follow Us",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBrandReveal
|
||||
brand="REDBRAND"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesFlipCards
|
||||
tag="Capabilities"
|
||||
title="Core Strengths"
|
||||
description="Powerful features that keep your brand ahead of the curve."
|
||||
items={[
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
title: "Bold Aesthetic", descriptions: ["Deep crimson accents", "Minimalist layout"],
|
||||
imageSrc: "https://pixabay.com/get/gf6191aebde1a902295f674d29703b93f3804cec5ffef0d82537aab6fcda2cafd54e88477d5845b8fdc4a91787a64ad0b63a6fc15cf983184cb720aa704485805_1280.jpg"},
|
||||
{
|
||||
title: "High Conversion", descriptions: ["Optimized CTA placement", "Focused user journey"],
|
||||
imageSrc: "https://pixabay.com/get/g4abaf5c3d7d08298235efe37587cacb88b3b427a4f2f33fc8e8684fcab7d2c8a3572b19c3b566f889c02db163e41b618e4da42736457cccb4e681e50f5842078_1280.jpg"},
|
||||
{
|
||||
title: "Seamless Motion", descriptions: ["Smooth interaction design", "Responsive grid"],
|
||||
imageSrc: "https://pixabay.com/get/g6f9e601bac816b48e165df8adee1cf24cf5f0cd73a842eed70b4ebfda9d0db7d02d77207951d92d35c3298cdd68dd10c9e6a5c51964a4d3f4f86f0069bacc23f_1280.jpg"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Investment"
|
||||
title="Choose Your Path"
|
||||
description="Flexible plans designed to match your growth objectives."
|
||||
plans={[
|
||||
{
|
||||
tag: "Basic", price: "$99", description: "Perfect for starters", features: ["Feature A", "Feature B"],
|
||||
primaryButton: {
|
||||
text: "Select", href: "#"},
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
tag: "Pro", price: "$299", description: "Ideal for scale", features: ["All Basic", "Advanced Tech", "Priority"],
|
||||
highlight: "Most Popular", primaryButton: {
|
||||
text: "Select", href: "#"},
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
tag: "Custom", price: "Custom", description: "Enterprise ready", features: ["Custom Dev", "Dedicated Support"],
|
||||
primaryButton: {
|
||||
text: "Contact", href: "#contact"},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialMetricsCards
|
||||
tag="Proof"
|
||||
title="What Clients Say"
|
||||
description="Hear directly from those who have transformed their brand identity with us."
|
||||
testimonials={[
|
||||
{ name: "Alice", role: "CEO", company: "Tech Corp", rating: 5, imageSrc: "https://pixabay.com/get/g242825b013bef85ef2c32457dbce7bc0423c3a96a32aa3560731e69ef17ea1de91293f227f5c53c6b137db153d3118842edc9ead8eaed3634f423345d29cb048_1280.jpg" },
|
||||
{ name: "Bob", role: "Founder", company: "Design Co", rating: 5, imageSrc: "https://pixabay.com/get/gec3022bf52e1a8304949d23757c847f1a2ec234297fb2bbd7304e71aef955822bce160707b8bafd63cbc4ea6fe802f5c9e0fbc303444810c23a335f62f6bfd73_1280.jpg" },
|
||||
{ name: "Charlie", role: "Creative", company: "Motion Inc", rating: 5, imageSrc: "https://pixabay.com/get/g6a38634b37f5b1fd6ff5ce9fc0021a31c48b6960ecf068393abb42b948daa4a9245441de7265b2a1f768fd0248e55779d029910a92ad03d35373bc05a202870a_1280.jpg" },
|
||||
{ name: "Diana", role: "Director", company: "Growth Lab", rating: 5, imageSrc: "https://pixabay.com/get/gbaa9ed87da3676373e98fe7bfb5b712ae7d2ca6aede8a8ab67ab3b888b3255385ffb2fd21a8ff3f7e0efc553df6ada0d87950110b320afbb9c286472fd118369_1280.jpg" },
|
||||
{ name: "Ethan", role: "Manager", company: "Next Level", rating: 5, imageSrc: "https://pixabay.com/get/ge82a1d5c76a1400a8d256504e8ea9f91709cc9740068a6b04ee931a3adf8d6d8e210aeee6904d8c7760761b455928e1d2eed179057e20a8e816f71f2662b17e4_1280.jpg" },
|
||||
]}
|
||||
metrics={[
|
||||
{ value: "100%", label: "Client Satisfaction" },
|
||||
{ value: "500+", label: "Projects Delivered" },
|
||||
{ value: "24/7", label: "Dedicated Support" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Ready to bring your bold vision to life?"
|
||||
primaryButton={{
|
||||
text: "Let's Talk", href: "mailto:hello@example.com"}}
|
||||
secondaryButton={{
|
||||
text: "Follow Us", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBrandReveal
|
||||
brand="REDBRAND"
|
||||
columns={[
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
items: [
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user