369 lines
17 KiB
TypeScript
369 lines
17 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 BlogCardThree from "@/components/sections/blog/BlogCardThree";
|
|
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Sparkles, TrendingUp, Zap, Twitter, Linkedin, Youtube, CheckCircle } from "lucide-react";
|
|
|
|
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"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Web3 Perspective"
|
|
navItems={[
|
|
{ name: "Podcast", id: "podcast" },
|
|
{ name: "Articles", id: "articles" },
|
|
{ name: "Sponsors", id: "sponsors" },
|
|
{ name: "About", id: "about" },
|
|
]}
|
|
button={{ text: "Work With Us", href: "/sponsors" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero" className="min-h-screen relative overflow-hidden">
|
|
<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-1772535678711-7eb8605b.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-1772535677645-bb3898b5.png"
|
|
mediaAnimation="opacity"
|
|
frameStyle="card"
|
|
containerClassName="relative z-10"
|
|
/>
|
|
</div>
|
|
|
|
{/* Podcast Episodes Section */}
|
|
<div id="podcast" data-section="podcast" className="py-20 px-4">
|
|
<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-1772535678123-e526dcfd.png?_wi=1",
|
|
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-1772535678095-a787fa1a.png?_wi=1",
|
|
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-1772535680631-778c48ca.png?_wi=1",
|
|
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-1772535677773-b479bac1.png?_wi=1",
|
|
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>
|
|
|
|
{/* Sponsorship Tiers Section */}
|
|
<div id="sponsors" data-section="sponsors" className="py-20 px-4">
|
|
<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>
|
|
|
|
{/* Featured Articles Section */}
|
|
<div id="articles" data-section="articles" className="py-20 px-4">
|
|
<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-1772535679033-2063ceb0.png?_wi=1",
|
|
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-1772535677989-527cc613.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-1772535679461-de6201a0.png?_wi=1",
|
|
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-1772535679066-b015d5aa.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-1772535679560-1ba15a2f.png?_wi=1",
|
|
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-1772535677989-527cc613.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-1772535678827-0913b3ee.png?_wi=1",
|
|
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-1772535679066-b015d5aa.png",
|
|
date: "Jan 12, 2025",
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Read All Articles", href: "/articles" }]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Team Section */}
|
|
<div id="about" data-section="about" className="py-20 px-4">
|
|
<TeamCardTwo
|
|
title="Meet the Team"
|
|
description="Building Web3 Perspective in public. Ley & Panha are on a mission to make web3 marketing accessible and effective for everyone."
|
|
tag="Our Story"
|
|
tagAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "1",
|
|
name: "Ley",
|
|
role: "Host & Founder",
|
|
description: "Web3 marketing strategist with deep experience in DeFi protocols and crypto brand building. Started Web3 Perspective to share real, actionable insights with the community.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/professional-headshot-portrait-of-a-conf-1772535678666-a664cc4e.png?_wi=1",
|
|
imageAlt: "Ley, founder and host of Web3 Perspective",
|
|
socialLinks: [
|
|
{ icon: Twitter, url: "https://twitter.com" },
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
],
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Panha",
|
|
role: "Co-Host & Producer",
|
|
description: "Content creator and podcast producer based in Phnom Penh, Cambodia. Expert at translating complex web3 concepts into digestible, engaging content for diverse audiences.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/professional-headshot-portrait-of-a-conf-1772535679314-fa4ea636.png?_wi=1",
|
|
imageAlt: "Panha, co-host and producer of Web3 Perspective",
|
|
socialLinks: [
|
|
{ icon: Twitter, url: "https://twitter.com" },
|
|
{ icon: Youtube, url: "https://youtube.com" },
|
|
],
|
|
},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials" className="py-20 px-4">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Trusted by leading web3 projects and marketing teams worldwide"
|
|
cardTag="Our Partners"
|
|
cardTagIcon={CheckCircle}
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Bitget",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSfocPDfLnMMiIb9A5eny16Ro/bitget-cryptocurrency-exchange-logo-mode-1772535678645-1bcbecfd.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--1772535678526-c4b14d19.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-1772535678512-0eb70d2b.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-1772535678596-90e2d699.png",
|
|
imageAlt: "TradingFi protocol or platform 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-1772535677517-91396dcb.png",
|
|
imageAlt: "Generic 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-1772535678318-5d910c02.png",
|
|
imageAlt: "Cryptocurrency community or DAO logo",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<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-1772535677714-1bd4f56f.png?_wi=1"
|
|
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>
|
|
);
|
|
} |