Files
33bc86fb-e58a-40c2-99d4-952…/src/app/page.tsx
2026-03-03 11:13:46 +00:00

370 lines
18 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, TrendingUp, Zap, CheckCircle, Twitter, Linkedin, Youtube } from "lucide-react";
const navItems = [
{ name: "Podcast", id: "podcast" },
{ name: "Articles", id: "articles" },
{ name: "Sponsors", id: "sponsors" },
{ name: "About", id: "about" },
];
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Web3 Perspective"
navItems={navItems}
button={{
text: "Work With Us",
href: "#sponsors",
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="WEB3 PERSPECTIVE"
description="Web3 Marketing That Actually Works. Real results. Real sponsors. Real strategies. No fluff."
background={{ variant: "circleGradient" }}
buttons={[
{ text: "Listen to Podcast", href: "/podcast" },
{ text: "Work With Us", href: "/sponsors" },
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/a-modern-professional-podcast-studio-set-1772536316152-6f2ce7a4.png"
imageAlt="Modern podcast studio setup with audio equipment"
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/abstract-web3-technology-visualization-g-1772536316282-753e87fe.png"
mediaAnimation="opacity"
frameStyle="card"
containerClassName="relative z-10"
/>
</div>
<div id="podcast" data-section="podcast">
<ProductCardOne
title="Latest Episodes"
description="Tune into our latest insights on web3 marketing strategies, DeFi innovations, and industry trends"
tag="Podcast"
tagAnimation="slide-up"
products={[
{
id: "ep-1",
name: "Marketing Crypto in 2025",
price: "Latest",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/podcast-episode-cover-design-with-bold-t-1772536315934-3386c7c9.png",
imageAlt: "Episode cover: Marketing Crypto in 2025",
},
{
id: "ep-2",
name: "DeFi Protocol Growth Hacks",
price: "Ep 12",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/defi-protocol-focused-podcast-episode-co-1772536316083-0f64ce4d.png",
imageAlt: "Episode cover: DeFi Protocol Growth Hacks",
},
{
id: "ep-3",
name: "Building Community in Web3",
price: "Ep 11",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/community-focused-web3-podcast-episode-a-1772536316317-997aa007.png",
imageAlt: "Episode cover: Building Community in Web3",
},
{
id: "ep-4",
name: "Interview with Bitget CEO",
price: "Ep 10",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/interview-episode-cover-for-interview-wi-1772536315346-058d60ad.png",
imageAlt: "Episode cover: Interview with Bitget CEO",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Episodes", href: "/podcast" }]}
/>
</div>
<div id="sponsors" data-section="sponsors">
<PricingCardEight
title="Sponsorship Tiers"
description="Partner with Web3 Perspective and reach thousands of engaged web3 professionals and crypto enthusiasts monthly"
tag="Work With Us"
tagAnimation="slide-up"
plans={[
{
id: "video-integration",
badge: "Most Popular",
badgeIcon: Sparkles,
price: "$1,000/mo",
subtitle: "Video integration in episodes",
buttons={[{ text: "Get Started", href: "#contact" }],
features: [
"Featured sponsor segment (5-10 min)",
"Logo on all episode thumbnails",
"Monthly newsletter mention",
"Social media cross-promotion",
"Access to audience analytics",
],
},
{
id: "newsletter",
badge: "Growing",
badgeIcon: TrendingUp,
price: "$500/mo",
subtitle: "Newsletter and social promotion",
buttons: [{ text: "Get Started", href: "#contact" }],
features: [
"Weekly newsletter feature",
"2x Twitter/X promotion per month",
"Logo in email footer",
"Audience demographics report",
"Monthly performance metrics",
],
},
{
id: "social-posts",
badge: "Foundation",
badgeIcon: Zap,
price: "$250/mo",
subtitle: "Social media presence",
buttons: [{ text: "Get Started", href: "#contact" }],
features: [
"4x social media posts/month",
"Logo placement in videos",
"Website listing",
"Monthly audience reach data",
"Dedicated contact point",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttons={[{ text: "View Current Sponsors", href: "#testimonials" }]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{
id: "1",
name: "Bitget",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/bitget-cryptocurrency-exchange-logo-mode-1772536316104-247a5548.png",
imageAlt: "Bitget cryptocurrency exchange logo",
},
{
id: "2",
name: "OKX",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/okx-cryptocurrency-exchange-logo-modern--1772536316213-6105f4a1.png",
imageAlt: "OKX cryptocurrency exchange logo",
},
{
id: "3",
name: "Extended",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/extended-dex-protocol-logo-modern-blockc-1772536316573-494ed487.png",
imageAlt: "Extended DEX protocol logo",
},
{
id: "4",
name: "TradingFi",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/tradingfi-protocol-or-platform-logo-mode-1772536319011-38d15b9c.png",
imageAlt: "TradingFi protocol logo",
},
{
id: "5",
name: "Web3 Protocol A",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/generic-web3-protocol-logo-placeholder-m-1772536315041-fa6dfb79.png",
imageAlt: "Web3 protocol logo",
},
{
id: "6",
name: "Crypto Community",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/cryptocurrency-community-or-dao-logo-mod-1772536316443-2ec79f9b.png",
imageAlt: "Crypto community DAO logo",
},
]}
cardTitle="Trusted by leading web3 projects and marketing teams worldwide"
cardTag="Our Partners"
cardTagIcon={CheckCircle}
cardAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="articles" data-section="articles">
<BlogCardThree
title="Latest Articles"
description="Deep dives into web3 marketing strategies, DEX reviews, and trading guides for the modern crypto marketer"
tag="Resources"
tagAnimation="slide-up"
blogs={[
{
id: "blog-1",
category: "Marketing Playbook",
title: "Token Launch Marketing: The Web3 Blueprint",
excerpt: "A comprehensive guide to executing successful token launches with proven marketing tactics that drive adoption and community growth.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/token-launch-marketing-strategy-visualiz-1772536316161-f3799cf5.png",
imageAlt: "Token launch marketing strategy illustration",
authorName: "Ley",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/small-circular-avatar-portrait-of-a-tech-1772536316124-68d7f877.png",
date: "Jan 20, 2025",
},
{
id: "blog-2",
category: "DEX Review",
title: "Extended DEX Deep Dive: Liquidity & Performance",
excerpt: "Analyzing the mechanics of Extended DEX, comparing its liquidity pools, and evaluating its competitive position in the DEX landscape.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/extended-dex-platform-interface-screensh-1772536316532-4566704e.png",
imageAlt: "Extended DEX platform interface",
authorName: "Panha",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/small-circular-avatar-portrait-of-a-cont-1772536316550-7f71ef61.png",
date: "Jan 18, 2025",
},
{
id: "blog-3",
category: "Trading Guide",
title: "OKX Trading Strategies for Beginners",
excerpt: "Master the basics of trading on OKX with this beginner-friendly guide covering order types, risk management, and profit-taking strategies.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/okx-trading-platform-dashboard-visualiza-1772536315849-28d7b90e.png",
imageAlt: "OKX trading dashboard walkthrough",
authorName: "Ley",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/small-circular-avatar-portrait-of-a-tech-1772536316124-68d7f877.png",
date: "Jan 15, 2025",
},
{
id: "blog-4",
category: "Marketing Playbook",
title: "Community Building: The DeFi Protocol Advantage",
excerpt: "Learn how successful DeFi protocols use community-first strategies to drive adoption, engagement, and long-term growth.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/defi-community-collaboration-visualizati-1772536316238-0c4585b6.png",
imageAlt: "DeFi community collaboration visualization",
authorName: "Panha",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/small-circular-avatar-portrait-of-a-cont-1772536316550-7f71ef61.png",
date: "Jan 12, 2025",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Read All Articles", href: "/articles" }]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about Web3 Perspective, sponsorships, and how we're building the future of web3 marketing."
faqs={[
{
id: "1",
title: "How often do you release new episodes?",
content: "We release fresh podcast episodes 4 times per month, featuring interviews with industry leaders, marketing deep dives, and actionable strategies for web3 projects. Episodes are available on all major platforms including Spotify, Apple Podcasts, and YouTube.",
},
{
id: "2",
title: "What makes Web3 Perspective different?",
content: "We focus on real results over hype. No fluff, no corporate speak—just practical marketing strategies that actually work in the web3 space. Our team combines deep experience in DeFi, trading platforms, and community building with genuine passion for the industry.",
},
{
id: "3",
title: "How can my project become a sponsor?",
content: "We offer flexible sponsorship tiers starting at $250/month for social media promotion up to $1,000/month for full video integration. Visit our Sponsorship page to learn more or contact us directly at partnerships@web3perspective.io.",
},
{
id: "4",
title: "Where is Web3 Perspective based?",
content: "We're proudly based in Phnom Penh, Cambodia, but we serve a global audience of web3 enthusiasts, traders, and crypto professionals. Our international perspective brings unique insights to the web3 marketing landscape.",
},
{
id: "5",
title: "What topics do you cover?",
content: "We cover everything from token launch strategies to DEX optimization, community building, trading platforms, DeFi protocols, and emerging web3 marketing trends. Our content is designed for both beginners and experienced web3 professionals.",
},
{
id: "6",
title: "How can I stay updated with new content?",
content: "Subscribe to our newsletter for weekly updates, follow us on Twitter/X (@web3perspective), and check out our YouTube channel. You can also subscribe to the podcast on your favorite platform for instant notifications when new episodes drop.",
},
]}
textPosition="left"
faqsAnimation="blur-reveal"
useInvertedBackground={true}
showCard={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/abstract-web3-technology-grid-background-1772536317188-0bd0c7ac.png"
imageAlt="Web3 technology grid background"
logoText="Web3 Perspective"
copyrightText="© 2025 Web3 Perspective. Built in Cambodia. Serving the world."
columns={[
{
title: "Podcast",
items: [
{ label: "Episodes", href: "/podcast" },
{ label: "YouTube Channel", href: "https://youtube.com" },
{ label: "Spotify", href: "https://spotify.com" },
{ label: "Apple Podcasts", href: "https://podcasts.apple.com" },
],
},
{
title: "Resources",
items: [
{ label: "Articles", href: "/articles" },
{ label: "Marketing Guides", href: "#" },
{ label: "Newsletter Archive", href: "#" },
{ label: "Download Media Kit", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Sponsorships", href: "/sponsors" },
{ label: "Contact", href: "#contact" },
{ label: "Privacy Policy", href: "#" },
],
},
{
title: "Social",
items: [
{ label: "Twitter/X", href: "https://twitter.com" },
{ label: "Discord", href: "https://discord.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Substack", href: "https://substack.com" },
],
},
]}
/>
</div>
</ThemeProvider>
);
}