262 lines
9.8 KiB
TypeScript
262 lines
9.8 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="sharp"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="PEPE"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Tokenomics", id: "metrics" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Buy Now",
|
|
href: "https://uniswap.exchange"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="PEPE Token - The Future of Meme Coins"
|
|
description="Join the revolution. The most legendary meme coin on the blockchain. Buy PEPE today and become part of history."
|
|
tag="Web3 Meme Coin"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786846662-3qjivfmm.jpg",
|
|
imageAlt: "PEPE token visualization"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786847416-41jhbevd.jpg",
|
|
imageAlt: "Meme coin blockchain"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786847986-aata62be.jpg",
|
|
imageAlt: "Cryptocurrency trading"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786848694-s4oeyg4b.jpg",
|
|
imageAlt: "Pepe meme culture"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786849258-yllohh8w.jpg",
|
|
imageAlt: "Web3 digital token"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786849932-mtp539kw.jpg",
|
|
imageAlt: "Pepe internet legend"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Buy PEPE",
|
|
href: "https://uniswap.exchange"
|
|
},
|
|
{
|
|
text: "View Chart",
|
|
href: "#tokenomics"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="About PEPE Coin"
|
|
description="PEPE is a community-driven meme coin built on blockchain technology. We believe in the power of decentralized finance combined with internet culture. Our mission is to create a token that celebrates the legendary Pepe meme while providing real utility to our holders."
|
|
tag="Our Mission"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786850585-eekh18nu.jpg"
|
|
imageAlt="PEPE blockchain technology"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Join Community",
|
|
href: "https://discord.gg/pepe"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEight
|
|
title="PEPE Tokenomics - Transparent and Community-Focused Supply"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "420T",
|
|
title: "Total Supply"
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "89K",
|
|
title: "Holders"
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "$2.4M",
|
|
title: "Market Cap"
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "99%",
|
|
title: "Community Owned"
|
|
}
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Why Choose PEPE"
|
|
description="Explore the key features that make PEPE the best meme coin for Web3 investors"
|
|
tag="Features"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Community Driven",
|
|
description: "Built by the community, for the community. Every decision is made together with our holders.",
|
|
phoneOne: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Secure & Transparent",
|
|
description: "All smart contracts audited and verified. Complete transparency in all tokenomics and transactions.",
|
|
phoneOne: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
}
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Low Transaction Fees",
|
|
description: "Enjoy minimal fees on swaps and transfers. More value stays in your wallet.",
|
|
phoneOne: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
}
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about buying, holding, and trading PEPE"
|
|
tag="FAQ"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How do I buy PEPE tokens?",
|
|
content: "You can buy PEPE on major decentralized exchanges like Uniswap, PancakeSwap, or Raydium. Connect your wallet, search for PEPE contract address, and swap ETH, BNB, or SOL for PEPE tokens."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Is PEPE a safe investment?",
|
|
content: "PEPE is a meme coin and carries speculative risk like all cryptocurrencies. Our smart contracts are audited and verified. Always do your own research before investing any amount you can't afford to lose."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "What is the total supply?",
|
|
content: "PEPE has a total supply of 420 trillion tokens. The supply is fixed and no more tokens will be minted, ensuring scarcity and potential value appreciation."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Can I stake my PEPE tokens?",
|
|
content: "Yes, holders can stake their PEPE tokens in our liquidity pools to earn rewards. Check our dashboard for current APY and staking options."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Where can I find the contract address?",
|
|
content: "The official contract address is verified on CoinGecko and CoinMarketCap. Always verify the address before trading to avoid scams and fake tokens."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "What exchange has the most PEPE liquidity?",
|
|
content: "Uniswap currently has the deepest liquidity pools for PEPE. We're constantly working to list on more exchanges to improve accessibility."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Join Our Community"
|
|
description="Stay updated with the latest news, updates, and announcements from the PEPE team. Subscribe to our newsletter and join thousands of PEPE holders."
|
|
inputs={[
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "your@email.com",
|
|
required: true
|
|
},
|
|
{
|
|
name: "discord",
|
|
type: "text",
|
|
placeholder: "Discord username (optional)",
|
|
required: false
|
|
}
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "How can we help? Questions or feedback?",
|
|
rows: 4,
|
|
required: false
|
|
}}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786851217-36wgh178.jpg"
|
|
imageAlt="PEPE community"
|
|
mediaPosition="right"
|
|
useInvertedBackground="noInvert"
|
|
buttonText="Subscribe Now"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="PEPE"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |