233 lines
11 KiB
TypeScript
233 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import { Diamond, Lightbulb, Sparkles, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Community", id: "/community"},
|
|
{
|
|
name: "Archive", id: "/archive"},
|
|
]}
|
|
brandName="Selen"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="Selen"
|
|
description="Watch Together. Feel The Speed."
|
|
buttons={[
|
|
{
|
|
text: "Start Watching", href: "#"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/scenery-building_400718-51.jpg", imageAlt: "Futuristic BMW X6 M Competition in a digital garage, cinematic shot"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-with-nature-landscape_23-2151005321.jpg", imageAlt: "BMW X6 M Competition front view with neon blue reflections"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001232.jpg", imageAlt: "Low angle view of BMW X6 M with underglow in a sci-fi city"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-substance_23-2148253634.jpg", imageAlt: "BMW X6 M speeding through a data highway with light trails"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-using-ar-technology-their-daily-occupation_23-2151137304.jpg", imageAlt: "Futuristic BMW dashboard UI with holographic icy blue displays"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649943.jpg", imageAlt: "BMW X6 M Competition side profile with neon highlights"},
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="platform-info" data-section="platform-info">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "what-platform", title: "What is Selen?", subtitle: "Your ultimate co-watching platform.", category: "Overview", value: "Seamless Global Sync"},
|
|
{
|
|
id: "how-sync-works", title: "Real-time Synchronization", subtitle: "Experience perfect timing, every frame, every second.", category: "Technology", value: "WebSocket Driven"},
|
|
{
|
|
id: "latency-minimal", title: "Zero-Lag Experience", subtitle: "Global connections without delays or high ping.", category: "Performance", value: "Sub-millisecond"},
|
|
{
|
|
id: "core-technologies", title: "Powered by Innovation", subtitle: "Leveraging cutting-edge backend and frontend stacks.", category: "Stack", value: "Java, React, Three.js"},
|
|
{
|
|
id: "security-encryption", title: "Fortified Security", subtitle: "Your privacy and data are protected with enterprise-grade encryption.", category: "Trust", value: "AES-256"},
|
|
]}
|
|
title="The Future of Synchronized Entertainment"
|
|
description="Selen redefines shared viewing with ultra-low latency, crystal-clear communication, and advanced features designed for the year 2035."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "metric-latency", value: "0ms", description: "Global Latency"},
|
|
{
|
|
id: "metric-quality", value: "4K HDR", description: "Crystal Clear Quality"},
|
|
{
|
|
id: "metric-users", value: "10M+", description: "Connected Users"},
|
|
]}
|
|
title="Unmatched Performance, Powered by Innovation"
|
|
description="Experience seamless synchronized viewing, backed by cutting-edge technology designed for global connections."
|
|
/>
|
|
</div>
|
|
|
|
<div id="owner-info" data-section="owner-info">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Visionary"
|
|
tagIcon={Sparkles}
|
|
title="Meet the Architect of Selen"
|
|
description="Driven by a passion for connecting people through shared experiences, our founder envisioned a platform where distance is no barrier to enjoying moments together. Selen is the culmination of this vision, blending cutting-edge technology with a luxurious, intuitive design."
|
|
subdescription="Connecting the world, one shared screen at a time."
|
|
icon={Lightbulb}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-man-working-nighttime_23-2149130553.jpg"
|
|
imageAlt="Portrait of Selen's founder"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="subscription" data-section="subscription">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Standard", badgeIcon: Star,
|
|
price: "Free", subtitle: "Essential co-watching", buttons: [
|
|
{
|
|
text: "Get Started", href: "#"},
|
|
],
|
|
features: [
|
|
"Basic video upload", "Standard watch rooms", "Instant messaging", "Friend search"],
|
|
},
|
|
{
|
|
id: "premium", badge: "Premium", badgeIcon: Zap,
|
|
price: "$9.99/mo", subtitle: "Enhanced features & quality", buttons: [
|
|
{
|
|
text: "Upgrade Now", href: "#"},
|
|
],
|
|
features: [
|
|
"4K/HDR support", "Voice chat & Video calls", "Private communities", "AI movie recommendations", "Exclusive digital stickers"],
|
|
},
|
|
{
|
|
id: "ultimate", badge: "Ultimate", badgeIcon: Diamond,
|
|
price: "$19.99/mo", subtitle: "All-access, next-gen luxury", buttons: [
|
|
{
|
|
text: "Go Ultimate", href: "#"},
|
|
],
|
|
features: [
|
|
"Priority support", "AI video enhancement", "AI subtitles & translation", "Access to NFT marketplace", "Cyberpunk theme customization"],
|
|
},
|
|
]}
|
|
title="Unlock the Ultimate Selen Experience"
|
|
description="Choose a plan that fits your desire for speed, luxury, and unparalleled features. Elevate your shared viewing journey."
|
|
/>
|
|
</div>
|
|
|
|
<div id="collectibles" data-section="collectibles">
|
|
<ProductCardOne
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "nft-car-ui", name: "BMW Dashboard UI", price: "0.5 ETH", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-metaverse-technology-landing-page_23-2149424568.jpg", imageAlt: "NFT of futuristic car dashboard UI"},
|
|
{
|
|
id: "nft-camera-lens", name: "Cinematic Lens Token", price: "0.3 ETH", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-film-reel-film-strips-camcorder-blue-background_23-2148188157.jpg", imageAlt: "NFT of cinematic camera lens"},
|
|
{
|
|
id: "nft-data-stream", name: "Synchronized Data Stream", price: "0.2 ETH", imageSrc: "http://img.b2bpic.net/free-photo/cupcake-pattern_23-2148143799.jpg", imageAlt: "NFT of synchronized data stream visualization"},
|
|
{
|
|
id: "nft-vision-landscape", name: "Vision Pro Landscape", price: "0.7 ETH", imageSrc: "http://img.b2bpic.net/free-photo/retro-futuristic-space-travel_23-2151837636.jpg", imageAlt: "NFT of futuristic landscape inspired by Apple Vision Pro"},
|
|
{
|
|
id: "nft-selen-logo", name: "Selen Holographic Logo", price: "1.0 ETH", imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "NFT of holographic Selen logo"},
|
|
{
|
|
id: "nft-circuit-city", name: "Cybernetic Circuit City", price: "0.6 ETH", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-red-themed-circuit-board-with-chip_23-2148284291.jpg", imageAlt: "NFT of abstract circuit board resembling a city"},
|
|
]}
|
|
title="Exclusive Digital Collectibles"
|
|
description="Discover unique NFTs and digital assets tied to cinematic moments, BMW aesthetics, and Selen's futuristic universe. Own a piece of the future."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Platform", items: [
|
|
{
|
|
label: "About Selen", href: "#platform-info"},
|
|
{
|
|
label: "Features", href: "/#platform-info"},
|
|
{
|
|
label: "Pricing", href: "/#subscription"},
|
|
],
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{
|
|
label: "Communities", href: "/community#community-features"},
|
|
{
|
|
label: "Friends", href: "/community#community-features"},
|
|
{
|
|
label: "News", href: "/community#news-panel"},
|
|
],
|
|
},
|
|
{
|
|
title: "Archive", items: [
|
|
{
|
|
label: "My Rooms", href: "/archive#archive-features"},
|
|
{
|
|
label: "Upload", href: "/archive#archive-features"},
|
|
{
|
|
label: "Support", href: "/archive#faq-archive"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Selen"
|
|
copyrightText="© 2035 Selen. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|