Update src/app/page.tsx
This commit is contained in:
394
src/app/page.tsx
394
src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Link, ShieldCheck, Users } from "lucide-react";
|
||||
import { ShieldCheck, Users, Link as LinkIcon } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,271 +19,153 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Security",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="OmniWallet"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="OmniWallet"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="OmniWallet"
|
||||
description="The secure, fast, and unified wallet for all your blockchain assets. Use your unique username to send funds instantly."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="OmniWallet"
|
||||
description="The secure, fast, and unified wallet for all your blockchain assets. Use your unique username to send funds instantly."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#contact" },
|
||||
{ text: "Learn More", href: "#features" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Secure & Lightning Fast Transfers"
|
||||
buttons={[
|
||||
{
|
||||
text: "View Security Policy",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Secure & Lightning Fast Transfers"
|
||||
buttons={[
|
||||
{ text: "View Security Policy", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Universal Chain Support",
|
||||
description: "Manage Ethereum, Solana, Bitcoin, and more from one secure interface.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-cryptocurrency-rendering-design_23-2149074557.jpg",
|
||||
},
|
||||
{
|
||||
title: "Instant Username Transfers",
|
||||
description: "Forget long, complex addresses. Send funds securely via username.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761042.jpg",
|
||||
},
|
||||
{
|
||||
title: "Bank-Grade Security",
|
||||
description: "Advanced encryption ensures your assets are protected against unauthorized access.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-working-desk-vintage-90-s-style-office_23-2149851051.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose OmniWallet"
|
||||
description="Engineered for speed, security, and simplicity across all chains."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Universal Chain Support", description: "Manage Ethereum, Solana, Bitcoin, and more from one secure interface.", imageSrc: "http://img.b2bpic.net/free-photo/3d-cryptocurrency-rendering-design_23-2149074557.jpg"
|
||||
},
|
||||
{
|
||||
title: "Instant Username Transfers", description: "Forget long, complex addresses. Send funds securely via username.", imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-concept_23-2148761042.jpg"
|
||||
},
|
||||
{
|
||||
title: "Bank-Grade Security", description: "Advanced encryption ensures your assets are protected against unauthorized access.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-desk-vintage-90-s-style-office_23-2149851051.jpg"
|
||||
}
|
||||
]}
|
||||
title="Why Choose OmniWallet"
|
||||
description="Engineered for speed, security, and simplicity across all chains."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500k+",
|
||||
title: "Users",
|
||||
description: "Active wallet holders",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20+",
|
||||
title: "Supported Chains",
|
||||
description: "Full cross-chain compatibility",
|
||||
icon: Link,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Guaranteed service",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
]}
|
||||
title="Global Impact"
|
||||
description="Trusted by thousands for secure asset management."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "500k+", title: "Users", description: "Active wallet holders", icon: Users },
|
||||
{ id: "m2", value: "20+", title: "Supported Chains", description: "Full cross-chain compatibility", icon: LinkIcon },
|
||||
{ id: "m3", value: "99.9%", title: "Uptime", description: "Guaranteed service", icon: ShieldCheck }
|
||||
]}
|
||||
title="Global Impact"
|
||||
description="Trusted by thousands for secure asset management."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex River",
|
||||
role: "DeFi Trader",
|
||||
company: "CryptoX",
|
||||
rating: 5,
|
||||
imageSrc: "asset://testimonial-1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah Chen",
|
||||
role: "Developer",
|
||||
company: "TechLab",
|
||||
rating: 5,
|
||||
imageSrc: "asset://testimonial-2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mark V.",
|
||||
role: "Investor",
|
||||
company: "Growth Co",
|
||||
rating: 5,
|
||||
imageSrc: "asset://testimonial-3",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena Rossi",
|
||||
role: "Consultant",
|
||||
company: "Web Solutions",
|
||||
rating: 5,
|
||||
imageSrc: "asset://testimonial-4",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "David W.",
|
||||
role: "Crypto Enthusiast",
|
||||
company: "Freelancer",
|
||||
rating: 5,
|
||||
imageSrc: "asset://testimonial-5",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "App Rating",
|
||||
},
|
||||
{
|
||||
value: "100ms",
|
||||
label: "Avg. Tx Time",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Secure",
|
||||
},
|
||||
]}
|
||||
title="Trusted by the Crypto Community"
|
||||
description="See why traders choose OmniWallet for their digital assets."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex River", role: "DeFi Trader", company: "CryptoX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
|
||||
{ id: "t2", name: "Sarah Chen", role: "Developer", company: "TechLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
|
||||
{ id: "t3", name: "Mark V.", role: "Investor", company: "Growth Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
|
||||
{ id: "t4", name: "Elena Rossi", role: "Consultant", company: "Web Solutions", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" },
|
||||
{ id: "t5", name: "David W.", role: "Crypto Enthusiast", company: "Freelancer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572166.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "App Rating" },
|
||||
{ value: "100ms", label: "Avg. Tx Time" },
|
||||
{ value: "100%", label: "Secure" }
|
||||
]}
|
||||
title="Trusted by the Crypto Community"
|
||||
description="See why traders choose OmniWallet for their digital assets."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do username transfers work?",
|
||||
content: "When you sign up, you link a unique username to your public address. Simply type the recipient's username to send funds.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is my wallet secure?",
|
||||
content: "OmniWallet uses state-of-the-art encryption. Your private keys never leave your device.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Which blockchains are supported?",
|
||||
content: "We support all major L1 chains, including Ethereum, Solana, Bitcoin, Polygon, and Avalanche.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions? Answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do username transfers work?", content: "When you sign up, you link a unique username to your public address. Simply type the recipient's username to send funds." },
|
||||
{ id: "q2", title: "Is my wallet secure?", content: "OmniWallet uses state-of-the-art encryption. Your private keys never leave your device." },
|
||||
{ id: "q3", title: "Which blockchains are supported?", content: "We support all major L1 chains, including Ethereum, Solana, Bitcoin, Polygon, and Avalanche." }
|
||||
]}
|
||||
sideTitle="Questions? Answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Join OmniWallet"
|
||||
description="Sign up now and claim your unique username."
|
||||
inputs={[
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "username",
|
||||
type: "text",
|
||||
placeholder: "Pick a username",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/call-center-agent-helping-customers-regain-access-accounts_482257-126790.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Join OmniWallet"
|
||||
description="Sign up now and claim your unique username."
|
||||
inputs={[
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "username", type: "text", placeholder: "Pick a username", required: true }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/call-center-agent-helping-customers-regain-access-accounts_482257-126790.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480188.jpg"
|
||||
logoText="OmniWallet"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Support",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480188.jpg"
|
||||
logoText="OmniWallet"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Security", href: "#about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Support", href: "#faq" },
|
||||
{ label: "Terms", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user