Initial commit
This commit is contained in:
262
src/app/page.tsx
Normal file
262
src/app/page.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user