bender/33bc86fb-e58a-40c2-99d4-952a95dc73cb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-03 11:13:46 +00:00
commit ccef1dcd08
631 changed files with 84048 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,174 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { 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 AboutPage() {
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="about-team" data-section="about-team">
<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-1772536315024-518aa164.png",
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-1772536315517-2f40f3dd.png",
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>
<div id="about-faq" data-section="about-faq">
<FaqSplitText
sideTitle="About Web3 Perspective"
sideDescription="Learn more about our mission, values, and how we're shaping the future of web3 marketing education"
faqs={[
{
id: "1",
title: "What is Web3 Perspective's mission?",
content: "Our mission is to democratize web3 marketing knowledge and provide real, actionable strategies for crypto projects and traders. We believe in building the web3 space through transparency, education, and genuine community engagement. No hype, no fluff—just practical insights from industry experts.",
},
{
id: "2",
title: "Who should listen to Web3 Perspective?",
content: "Our content is designed for crypto entrepreneurs, project founders, marketing professionals, traders, and anyone interested in understanding web3 business strategies. Whether you're launching a token, building a protocol, or learning to trade, we have insights for you.",
},
{
id: "3",
title: "Why are you based in Cambodia?",
content: "Ley and Panha chose to build Web3 Perspective in Phnom Penh, Cambodia, to bring a Southeast Asian perspective to the global web3 movement. Cambodia has a thriving crypto and startup community, and we're proud to contribute to that ecosystem while serving an international audience.",
},
{
id: "4",
title: "How can I collaborate with Web3 Perspective?",
content: "We're open to collaborations with projects, sponsors, and content creators. Whether you want to be a podcast guest, sponsor an episode, or partner on content initiatives, reach out to partnerships@web3perspective.io with your proposal.",
},
{
id: "5",
title: "What are your values?",
content: "We value authenticity, transparency, and education. We refuse to promote projects blindly or spread hype. Our values guide every decision we make, from the guests we invite to the sponsors we work with. Building trust with our audience is paramount.",
},
{
id: "6",
title: "How can I support Web3 Perspective?",
content: "You can support us by listening to the podcast, reading our articles, subscribing to our newsletter, sharing our content with friends, and most importantly, giving us feedback. If you're interested in sponsoring episodes or collaborating, check out our sponsorship tiers.",
},
]}
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>
);
}

192
src/app/articles/page.tsx Normal file
View File

@@ -0,0 +1,192 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
const navItems = [
{ name: "Podcast", id: "podcast" },
{ name: "Articles", id: "articles" },
{ name: "Sponsors", id: "sponsors" },
{ name: "About", id: "about" },
];
export default function ArticlesPage() {
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="all-articles" data-section="all-articles">
<BlogCardThree
title="Web3 Marketing Resources"
description="Comprehensive guides, tutorials, and deep dives into web3 marketing strategies, trading platforms, and blockchain technology insights"
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}
/>
</div>
<div id="article-faq" data-section="article-faq">
<FaqSplitText
sideTitle="Article FAQs"
sideDescription="Get answers to common questions about our content, how to access resources, and staying updated with new publications"
faqs={[
{
id: "1",
title: "How frequently are new articles published?",
content: "We publish new articles weekly on topics ranging from token launch strategies to DEX optimization and trading guides. Each article is thoroughly researched and written by our team of web3 marketing experts to ensure accuracy and actionability.",
},
{
id: "2",
title: "Can I access articles for free?",
content: "Yes, all of our core articles are available for free on the Web3 Perspective platform. We believe in democratizing web3 knowledge and making marketing insights accessible to everyone in the community.",
},
{
id: "3",
title: "How do I get notified of new articles?",
content: "Subscribe to our newsletter to get weekly digests of new articles delivered to your inbox. You can also follow us on Twitter/X and Discord for instant notifications when new content is published.",
},
{
id: "4",
title: "Can I share these articles?",
content: "Absolutely! We encourage sharing our content. Please attribute the articles to Web3 Perspective and include a link back to our website. For bulk sharing or syndication inquiries, contact partnerships@web3perspective.io.",
},
{
id: "5",
title: "What topics are covered in your articles?",
content: "Our articles cover marketing playbooks, DEX reviews, trading guides, community building strategies, DeFi protocol optimization, token launches, and emerging web3 trends. Content is designed for both beginners and experienced professionals.",
},
{
id: "6",
title: "How can I pitch an article idea?",
content: "We're always looking for fresh perspectives. If you have an article idea or guest contribution, reach out to us at content@web3perspective.io. We review all submissions and collaborate with talented writers in the web3 space.",
},
]}
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>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1436
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

370
src/app/page.tsx Normal file
View File

@@ -0,0 +1,370 @@
"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>
);
}

181
src/app/podcast/page.tsx Normal file
View File

@@ -0,0 +1,181 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FooterMedia from "@/components/sections/footer/FooterMedia";
const navItems = [
{ name: "Podcast", id: "podcast" },
{ name: "Articles", id: "articles" },
{ name: "Sponsors", id: "sponsors" },
{ name: "About", id: "about" },
];
export default function PodcastPage() {
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="podcast-episodes" data-section="podcast-episodes">
<ProductCardOne
title="All Podcast Episodes"
description="Explore our complete archive of web3 marketing strategies, industry interviews, and actionable insights from leading voices in crypto"
tag="Podcast Library"
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}
/>
</div>
<div id="featured-blogs" data-section="featured-blogs">
<BlogCardThree
title="Podcast Companion Articles"
description="Deep-dive written guides and resource articles that complement our latest podcast episodes"
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",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</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>
);
}

200
src/app/sponsors/page.tsx Normal file
View File

@@ -0,0 +1,200 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, TrendingUp, Zap, CheckCircle } from "lucide-react";
const navItems = [
{ name: "Podcast", id: "podcast" },
{ name: "Articles", id: "articles" },
{ name: "Sponsors", id: "sponsors" },
{ name: "About", id: "about" },
];
export default function SponsorsPage() {
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: "#sponsorship-tiers",
}}
animateOnLoad={true}
/>
</div>
<div id="sponsorship-tiers" data-section="sponsorship-tiers">
<PricingCardEight
title="Sponsorship Tiers"
description="Partner with Web3 Perspective and reach thousands of engaged web3 professionals, crypto traders, and industry decision-makers every month"
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: "#current-sponsors" }]}
/>
</div>
<div id="current-sponsors" data-section="current-sponsors">
<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 partners reaching thousands of engaged web3 professionals globally"
cardTag="Our Sponsors"
cardTagIcon={CheckCircle}
cardAnimation="blur-reveal"
useInvertedBackground={false}
/>
</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>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-dm-sans), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #0a0a0a;;
--card: #1a1a1a;;
--foreground: #ffffff;;
--primary-cta: #e34400;;
--secondary-cta: #010101;;
--accent: #ff7b05;;
--background-accent: #e34400;; */
--background: #0a0a0a;;
--card: #1a1a1a;;
--foreground: #ffffff;;
--primary-cta: #e34400;;
--primary-cta-text: #ffffff;;
--secondary-cta: #010101;;
--secondary-cta-text: #ffffff;;
--accent: #ff7b05;;
--background-accent: #e34400;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}