Redesign landing page and add Caddy deployment for nomadro.com
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
eric
@@ -1,76 +1,31 @@
|
||||
import Link from "next/link";
|
||||
import { NAV_LINKS, ENTRY_PATHS } from "~/lib/data";
|
||||
import { ENTRY_PATHS } from "~/lib/data";
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="border-t border-neutral-200 bg-neutral-50">
|
||||
<div className="container mx-auto px-4 py-12 md:px-6">
|
||||
<div className="grid gap-8 md:grid-cols-4">
|
||||
<div className="md:col-span-2">
|
||||
<Link href="/" className="text-lg font-semibold text-neutral-900">
|
||||
Nomadro
|
||||
<footer className="border-t border-neutral-200 bg-neutral-50 px-4 py-8 sm:px-6">
|
||||
<div className="mx-auto max-w-lg sm:max-w-2xl lg:max-w-4xl">
|
||||
<p className="text-center text-xs text-neutral-400">
|
||||
© {new Date().getFullYear()} Nomadro · 数字游民操作系统
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-2">
|
||||
{ENTRY_PATHS.map((path) => (
|
||||
<Link
|
||||
key={path.id}
|
||||
href={path.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-neutral-500 active:text-violet-600"
|
||||
>
|
||||
{path.emoji} {path.title.split(" · ")[0]}
|
||||
</Link>
|
||||
<p className="mt-2 max-w-sm text-sm text-neutral-600">
|
||||
中文数字游民操作系统。从城市、技能、工具到社群，一站开始你的自由生活与自由收入。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-neutral-900">
|
||||
核心入口
|
||||
</h4>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{ENTRY_PATHS.map((path) => (
|
||||
<li key={path.id}>
|
||||
<Link
|
||||
href={path.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
{path.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-neutral-900">
|
||||
关于
|
||||
</h4>
|
||||
<ul className="mt-3 space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
关于我们
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
联系我们
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
加入社群
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 border-t border-neutral-200 pt-8">
|
||||
<p className="text-center text-xs text-neutral-500">
|
||||
© {new Date().getFullYear()} Nomadro. Digital Nomad OS · 数字游民操作系统
|
||||
</p>
|
||||
))}
|
||||
<Link href="/about" className="text-xs text-neutral-500 active:text-violet-600">
|
||||
关于
|
||||
</Link>
|
||||
<Link href="/contact" className="text-xs text-neutral-500 active:text-violet-600">
|
||||
联系
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,116 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { NAV_LINKS } from "~/lib/data";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
export function SiteHeader() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`sticky top-0 z-50 w-full border-b transition-colors duration-300 ${
|
||||
scrolled
|
||||
? "border-neutral-200 bg-white/95 shadow-sm backdrop-blur-md"
|
||||
: "border-neutral-200/80 bg-white/80 backdrop-blur-md"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-xl font-semibold tracking-tight text-neutral-900">
|
||||
Nomadro
|
||||
</span>
|
||||
<span className="hidden text-xs text-neutral-500 md:inline">
|
||||
Digital Nomad OS / 数字游民操作系统
|
||||
</span>
|
||||
<header className="sticky top-0 z-50 border-b border-neutral-200/80 bg-white/90 backdrop-blur-sm">
|
||||
<div className="mx-auto flex h-14 max-w-lg items-center px-4 sm:h-16 sm:max-w-2xl sm:px-6 lg:max-w-4xl">
|
||||
<Link href="/" className="text-lg font-bold text-neutral-900">
|
||||
Nomadro
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-8 md:flex">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target={link.external ? "_blank" : undefined}
|
||||
rel={link.external ? "noopener noreferrer" : undefined}
|
||||
className="text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button size="sm">开始行动</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-lg md:hidden"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
aria-label="打开菜单"
|
||||
>
|
||||
<Menu className="h-5 w-5 text-neutral-700" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 bg-white md:hidden"
|
||||
>
|
||||
<div className="flex h-16 items-center justify-between border-b px-4">
|
||||
<span className="text-lg font-semibold">Nomadro</span>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
aria-label="关闭菜单"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1 p-4">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target={link.external ? "_blank" : undefined}
|
||||
rel={link.external ? "noopener noreferrer" : undefined}
|
||||
className="rounded-lg px-4 py-3 text-base font-medium text-neutral-700 hover:bg-neutral-50"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-4 rounded-lg bg-neutral-900 px-4 py-3 text-center text-base font-medium text-white"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
开始行动
|
||||
</Link>
|
||||
</nav>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ const TAG_COLORS: Record<string, string> = {
|
||||
城市: "bg-blue-50 text-blue-700",
|
||||
专题: "bg-emerald-50 text-emerald-700",
|
||||
工具: "bg-amber-50 text-amber-700",
|
||||
活动: "bg-rose-50 text-rose-700",
|
||||
直播: "bg-rose-500/15 text-rose-300 ring-1 ring-rose-400/20",
|
||||
学习路径: "bg-violet-50 text-violet-700",
|
||||
会员: "bg-neutral-100 text-neutral-700",
|
||||
};
|
||||
|
||||
@@ -1,82 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MapPin, BookOpen, Crown, Zap, Users, ArrowRight } from "lucide-react";
|
||||
import { MapPin, Zap, Radio, ArrowRight } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ENTRY_PATHS } from "~/lib/data";
|
||||
|
||||
const ICON_MAP = {
|
||||
MapPin,
|
||||
BookOpen,
|
||||
Crown,
|
||||
Zap,
|
||||
Users,
|
||||
Radio,
|
||||
} as const;
|
||||
|
||||
const ACCENT_STYLES = {
|
||||
blue: "border-l-4 border-l-blue-500 bg-gradient-to-r from-blue-50/80 to-white hover:from-blue-100/80",
|
||||
green: "border-l-4 border-l-emerald-500 bg-gradient-to-r from-emerald-50/80 to-white hover:from-emerald-100/80",
|
||||
amber: "border-l-4 border-l-amber-500 bg-gradient-to-r from-amber-50/80 to-white hover:from-amber-100/80",
|
||||
blue: {
|
||||
border: "border-blue-400/20 hover:border-blue-400/40",
|
||||
glow: "hover:shadow-blue-500/10",
|
||||
icon: "from-blue-500 to-cyan-500",
|
||||
text: "text-blue-300",
|
||||
},
|
||||
green: {
|
||||
border: "border-emerald-400/20 hover:border-emerald-400/40",
|
||||
glow: "hover:shadow-emerald-500/10",
|
||||
icon: "from-emerald-500 to-teal-500",
|
||||
text: "text-emerald-300",
|
||||
},
|
||||
rose: {
|
||||
border: "border-rose-400/20 hover:border-rose-400/40",
|
||||
glow: "hover:shadow-rose-500/10",
|
||||
icon: "from-rose-500 to-pink-500",
|
||||
text: "text-rose-300",
|
||||
},
|
||||
} as const;
|
||||
|
||||
const CARD_EMOJI: Record<string, string> = {
|
||||
nav: "🧭",
|
||||
arbitrage: "⚡",
|
||||
salon: "🎯",
|
||||
};
|
||||
|
||||
export function EntryGrid() {
|
||||
return (
|
||||
<section className="bg-gradient-to-b from-violet-50/30 to-white py-20 md:py-28">
|
||||
<section className="relative py-20 md:py-28">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.h2
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
|
||||
className="text-center"
|
||||
>
|
||||
🚀 选择你的入口
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mx-auto mt-3 max-w-2xl text-center text-neutral-600"
|
||||
>
|
||||
三大路径，对应不同的需求和阶段
|
||||
</motion.p>
|
||||
<span className="text-3xl">🚀</span>
|
||||
<h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
|
||||
选择你的入口
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-2xl text-white/40">
|
||||
三大路径，对应不同的需求和阶段
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-14 grid gap-6 md:grid-cols-3">
|
||||
<div className="mt-14 grid gap-5 md:grid-cols-3">
|
||||
{ENTRY_PATHS.map((path, i) => {
|
||||
const Icon = ICON_MAP[path.icon as keyof typeof ICON_MAP] ?? MapPin;
|
||||
const Icon = ICON_MAP[path.icon];
|
||||
const accent = ACCENT_STYLES[path.accent];
|
||||
const emoji = CARD_EMOJI[path.id] ?? "✨";
|
||||
return (
|
||||
<motion.div
|
||||
key={path.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-40px" }}
|
||||
transition={{ delay: i * 0.08 }}
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<Link
|
||||
href={path.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group block rounded-2xl border border-neutral-200/80 p-6 transition-all hover:shadow-xl ${accent}`}
|
||||
className={`group glass-card glass-card-hover block rounded-2xl p-6 shadow-lg ${accent.border} ${accent.glow}`}
|
||||
>
|
||||
<span className="text-2xl">{emoji}</span>
|
||||
<Icon className="mt-3 h-10 w-10 text-neutral-600 transition-transform group-hover:scale-110" />
|
||||
<h3 className="mt-4 text-lg font-bold text-neutral-900">
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-3xl">{path.emoji}</span>
|
||||
{path.id === "live" && (
|
||||
<span className="flex items-center gap-1 rounded-full bg-rose-500/15 px-2 py-0.5 text-[10px] font-medium text-rose-300 ring-1 ring-rose-400/20">
|
||||
<span className="h-1 w-1 rounded-full bg-rose-400 animate-pulse" />
|
||||
nomadro.live
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`mt-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${accent.icon} shadow-lg`}>
|
||||
<Icon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-lg font-bold text-white">
|
||||
{path.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
<p className="mt-2 text-sm leading-relaxed text-white/40">
|
||||
{path.description}
|
||||
</p>
|
||||
<span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-neutral-700 group-hover:text-neutral-900">
|
||||
<span className={`mt-5 inline-flex items-center gap-1.5 text-sm font-semibold ${accent.text} transition-all group-hover:gap-2.5`}>
|
||||
{path.cta}
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-2" />
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -1,61 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MapPin, BookOpen, Crown } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { FINAL_CTAS } from "~/lib/data";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
const ICONS = [MapPin, BookOpen, Crown] as const;
|
||||
|
||||
export function FinalCta() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-violet-900 via-fuchsia-900 to-cyan-900 py-20 text-white md:py-28">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.h2
|
||||
<section className="relative overflow-hidden py-20 md:py-28">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-violet-950/80 via-[#0a0a1a] to-cyan-950/60" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 50%)
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="container relative mx-auto px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
className="text-center text-2xl font-bold md:text-3xl"
|
||||
className="text-center"
|
||||
>
|
||||
✨ 从这里开始你的数字游民路径
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mx-auto mt-3 max-w-xl text-center text-neutral-300"
|
||||
>
|
||||
先选择最适合你的入口，然后开始行动。
|
||||
</motion.p>
|
||||
<span className="text-4xl">✨</span>
|
||||
<h2 className="mt-4 text-2xl font-bold text-white md:text-3xl">
|
||||
从这里开始你的数字游民路径
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-xl text-white/40">
|
||||
先选择最适合你的入口，然后开始行动。
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="mt-12 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
|
||||
className="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
|
||||
>
|
||||
{FINAL_CTAS.map((cta, i) => {
|
||||
const Icon = ICONS[i];
|
||||
return (
|
||||
{FINAL_CTAS.map((cta, i) => (
|
||||
<motion.div
|
||||
key={cta.label}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
>
|
||||
<Link
|
||||
key={cta.label}
|
||||
href={cta.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
size="lg"
|
||||
className="w-full min-w-[200px] border-white/40 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:border-white/60 sm:w-auto"
|
||||
className="min-w-[220px]"
|
||||
>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
<span className="mr-2">{cta.emoji}</span>
|
||||
{cta.label}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,109 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MapPin, Zap, Users, ArrowRight } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ENTRY_CARDS } from "~/lib/data";
|
||||
import { Particles } from "~/components/ui/particles";
|
||||
|
||||
const ICON_MAP = {
|
||||
MapPin,
|
||||
Zap,
|
||||
Users,
|
||||
} as const;
|
||||
|
||||
const ACCENT_STYLES = {
|
||||
blue: "from-blue-500/20 to-cyan-500/10 border-blue-300/80 hover:border-blue-400 hover:shadow-2xl",
|
||||
emerald: "from-emerald-500/20 to-teal-500/10 border-emerald-300/80 hover:border-emerald-400 hover:shadow-2xl",
|
||||
amber: "from-amber-500/20 to-orange-500/10 border-amber-300/80 hover:border-amber-400 hover:shadow-2xl",
|
||||
} as const;
|
||||
|
||||
const CARD_EMOJI = {
|
||||
nav: "🧭",
|
||||
arbitrage: "⚡",
|
||||
salon: "🎯",
|
||||
} as const;
|
||||
|
||||
const ICON_COLORS = {
|
||||
blue: "text-blue-600",
|
||||
emerald: "text-emerald-600",
|
||||
amber: "text-amber-600",
|
||||
const CARD_STYLE = {
|
||||
blue: {
|
||||
border: "border-blue-200/80",
|
||||
bar: "bg-blue-500",
|
||||
emoji: "bg-blue-50",
|
||||
},
|
||||
emerald: {
|
||||
border: "border-emerald-200/80",
|
||||
bar: "bg-emerald-500",
|
||||
emoji: "bg-emerald-50",
|
||||
},
|
||||
rose: {
|
||||
border: "border-rose-200/80",
|
||||
bar: "bg-rose-500",
|
||||
emoji: "bg-rose-50",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative min-h-[100dvh] overflow-hidden bg-gradient-to-br from-violet-50 via-white to-cyan-50">
|
||||
<Particles />
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="container relative mx-auto flex min-h-[100dvh] flex-col justify-center px-3 py-6 sm:px-4 sm:py-8 md:px-6 md:py-16 lg:py-24">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1, duration: 0.5 }}
|
||||
>
|
||||
<h1 className="text-2xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
|
||||
<span className="bg-gradient-to-r from-violet-600 via-fuchsia-500 to-cyan-600 bg-clip-text text-transparent">
|
||||
数字游民
|
||||
</span>{" "}
|
||||
<span className="text-neutral-800">nomadro</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
<section
|
||||
className="flex flex-1 flex-col justify-center px-5 pb-8"
|
||||
style={{
|
||||
paddingTop: "max(2rem, calc(1.5rem + var(--safe-top)))",
|
||||
paddingBottom: "max(2rem, calc(1.5rem + var(--safe-bottom)))",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md sm:max-w-lg">
|
||||
{/* 标题 */}
|
||||
<div className="text-center">
|
||||
<h1 className="text-[2rem] font-bold leading-tight sm:text-5xl">
|
||||
<span className="text-gradient">数字游民</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-lg font-medium tracking-[0.2em] text-neutral-400 sm:text-xl">
|
||||
nomadro
|
||||
</p>
|
||||
<p className="mx-auto mt-4 max-w-xs text-[13px] leading-relaxed text-neutral-500 sm:max-w-sm sm:text-sm">
|
||||
游民导航 · 地理套利 · 直播工具箱
|
||||
<br />
|
||||
一站开启自由生活
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.5 }}
|
||||
className="mt-6 flex flex-col gap-3 sm:mt-8 sm:gap-4 lg:mt-12 lg:grid lg:grid-cols-3 lg:gap-6"
|
||||
>
|
||||
{ENTRY_CARDS.map((card, i) => {
|
||||
const Icon = ICON_MAP[card.icon];
|
||||
const accent = ACCENT_STYLES[card.accent];
|
||||
const emoji = CARD_EMOJI[card.id];
|
||||
const iconColor = ICON_COLORS[card.accent];
|
||||
return (
|
||||
<motion.div
|
||||
key={card.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 + i * 0.1, duration: 0.4 }}
|
||||
whileHover={{ scale: 1.01, y: -2 }}
|
||||
{/* 入口卡片 */}
|
||||
<div className="mt-10 flex flex-col gap-3">
|
||||
{ENTRY_CARDS.map((card) => {
|
||||
const style = CARD_STYLE[card.accent];
|
||||
return (
|
||||
<Link
|
||||
key={card.id}
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative flex items-center gap-3.5 overflow-hidden rounded-2xl border bg-white p-4 shadow-sm transition-all active:scale-[0.98] active:shadow-none sm:gap-4 sm:p-5 ${style.border}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute left-0 top-0 h-full w-1 ${style.bar}`}
|
||||
/>
|
||||
|
||||
<span
|
||||
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl ${style.emoji}`}
|
||||
>
|
||||
<Link
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative flex items-center gap-4 overflow-hidden rounded-2xl border-2 bg-gradient-to-br p-4 transition-all duration-300 active:scale-[0.99] lg:flex-col lg:items-stretch lg:gap-0 lg:p-6 ${accent}`}
|
||||
>
|
||||
<div className="absolute -right-6 -top-6 text-5xl opacity-20 transition-transform group-hover:scale-110 group-hover:opacity-30 sm:-right-8 sm:-top-8 sm:text-6xl">
|
||||
{emoji}
|
||||
</div>
|
||||
<div className={`relative flex h-11 w-11 shrink-0 items-center justify-center self-start rounded-xl bg-white/80 shadow-sm lg:h-12 lg:w-12 ${iconColor}`}>
|
||||
<Icon className="h-5 w-5 group-hover:scale-110 transition-transform lg:h-6 lg:w-6" />
|
||||
</div>
|
||||
<div className="relative min-w-0 flex-1 lg:mt-4">
|
||||
<h2 className="text-base font-bold text-neutral-900 lg:text-xl">
|
||||
{card.label}
|
||||
</h2>
|
||||
<p className="mt-0.5 text-sm text-neutral-600">
|
||||
{card.title}
|
||||
</p>
|
||||
<p className="mt-1 hidden text-xs text-neutral-500 lg:block">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
<ArrowRight className="relative h-5 w-5 shrink-0 text-neutral-400 transition-all group-hover:translate-x-1 group-hover:text-violet-500 lg:absolute lg:right-4 lg:top-4" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
{card.emoji}
|
||||
</span>
|
||||
|
||||
<div className="min-w-0 flex-1 pr-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
|
||||
<h2 className="text-[15px] font-semibold text-neutral-900 sm:text-base">
|
||||
{card.label}
|
||||
</h2>
|
||||
{card.id === "live" && (
|
||||
<span className="rounded bg-rose-500 px-1.5 py-px text-[10px] font-semibold leading-4 text-white">
|
||||
LIVE
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-sm font-medium text-neutral-700">
|
||||
{card.title}
|
||||
</p>
|
||||
<p className="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-400">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ChevronRight className="h-5 w-5 shrink-0 text-neutral-300" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -18,29 +18,33 @@ const ACCENT_COLORS = [
|
||||
"from-amber-500 to-orange-500",
|
||||
] as const;
|
||||
|
||||
|
||||
export function ValueGrid() {
|
||||
return (
|
||||
<section className="bg-gradient-to-b from-white to-violet-50/30 py-20 md:py-28">
|
||||
<section className="relative py-20 md:py-28">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-px"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)",
|
||||
}}
|
||||
/>
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.h2
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
|
||||
className="text-center"
|
||||
>
|
||||
🎯 你能在这里获得什么
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mx-auto mt-3 max-w-2xl text-center text-neutral-600"
|
||||
>
|
||||
不是功能列表，而是实实在在的结果 ✨
|
||||
</motion.p>
|
||||
<span className="text-3xl">🎯</span>
|
||||
<h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
|
||||
你能在这里获得什么
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-2xl text-white/40">
|
||||
不是功能列表，而是实实在在的结果 ✨
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{VALUE_PROPOSITIONS.map((item, i) => {
|
||||
const Icon = ICON_MAP[item.icon];
|
||||
const gradient = ACCENT_COLORS[i];
|
||||
@@ -52,15 +56,20 @@ export function ValueGrid() {
|
||||
viewport={{ once: true, margin: "-40px" }}
|
||||
transition={{ delay: i * 0.08 }}
|
||||
whileHover={{ y: -4 }}
|
||||
className="group rounded-2xl border-2 border-neutral-200/80 bg-white p-6 shadow-sm transition-all hover:border-violet-200 hover:shadow-xl hover:shadow-violet-100/50"
|
||||
className="group glass-card glass-card-hover rounded-2xl p-6"
|
||||
>
|
||||
<div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} text-white shadow-lg transition-transform group-hover:scale-110`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} text-white shadow-lg transition-transform group-hover:scale-110`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-2xl opacity-40 transition-opacity group-hover:opacity-70">
|
||||
{item.emoji}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-4 font-semibold text-neutral-900">
|
||||
<h3 className="mt-4 text-sm font-semibold leading-snug text-white/90">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
<p className="mt-2 text-xs leading-relaxed text-white/35">
|
||||
{item.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
53
components/ui/aurora-background.tsx
Normal file
53
components/ui/aurora-background.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
export function AuroraBackground() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{/* Base gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#0a0a1a] via-[#06060f] to-[#0d1117]" />
|
||||
|
||||
{/* Aurora layers */}
|
||||
<div
|
||||
className="animate-aurora absolute -left-1/4 top-0 h-[60%] w-[150%] opacity-40"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 60%)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="animate-aurora absolute -right-1/4 top-[10%] h-[50%] w-[120%] opacity-30"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.3) 0%, transparent 55%)",
|
||||
animationDelay: "-4s",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="animate-aurora absolute left-0 top-[30%] h-[40%] w-full opacity-25"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 50% 50%, rgba(217, 70, 239, 0.25) 0%, transparent 50%)",
|
||||
animationDelay: "-8s",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Grid overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "60px 60px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Scan line */}
|
||||
<div
|
||||
className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent"
|
||||
style={{ animation: "scan-line 8s linear infinite" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,25 +2,21 @@ import * as React from "react";
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "default" | "outline" | "ghost" | "link";
|
||||
variant?: "default" | "outline" | "ghost";
|
||||
size?: "default" | "sm" | "lg";
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className = "", variant = "default", size = "default", ...props }, ref) => {
|
||||
const base =
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
|
||||
"inline-flex items-center justify-center rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:pointer-events-none disabled:opacity-50";
|
||||
const variants = {
|
||||
default:
|
||||
"bg-neutral-900 text-white hover:bg-neutral-800 focus-visible:ring-neutral-900",
|
||||
outline:
|
||||
"border border-neutral-200 bg-transparent hover:bg-neutral-50 focus-visible:ring-neutral-400",
|
||||
ghost: "hover:bg-neutral-100 focus-visible:ring-neutral-400",
|
||||
link: "text-neutral-900 underline-offset-4 hover:underline focus-visible:ring-neutral-400",
|
||||
default: "bg-violet-600 text-white hover:bg-violet-700 active:bg-violet-800",
|
||||
outline: "border border-neutral-200 text-neutral-700 hover:bg-neutral-50",
|
||||
ghost: "text-neutral-600 hover:bg-neutral-100",
|
||||
};
|
||||
const sizes = {
|
||||
default: "h-10 px-4 py-2 text-sm",
|
||||
default: "h-10 px-4 text-sm",
|
||||
sm: "h-8 px-3 text-xs",
|
||||
lg: "h-12 px-6 text-base",
|
||||
};
|
||||
|
||||
37
components/ui/floating-emojis.tsx
Normal file
37
components/ui/floating-emojis.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { FLOATING_EMOJIS } from "~/lib/data";
|
||||
|
||||
const POSITIONS = [
|
||||
{ left: "8%", top: "18%", size: "text-2xl", delay: 0 },
|
||||
{ left: "85%", top: "12%", size: "text-3xl", delay: 1 },
|
||||
{ left: "15%", top: "65%", size: "text-xl", delay: 2 },
|
||||
{ left: "78%", top: "55%", size: "text-2xl", delay: 0.5 },
|
||||
{ left: "5%", top: "42%", size: "text-lg", delay: 1.5 },
|
||||
{ left: "92%", top: "38%", size: "text-xl", delay: 2.5 },
|
||||
{ left: "25%", top: "8%", size: "text-lg", delay: 3 },
|
||||
{ left: "65%", top: "78%", size: "text-2xl", delay: 1.2 },
|
||||
{ left: "45%", top: "88%", size: "text-lg", delay: 0.8 },
|
||||
{ left: "55%", top: "5%", size: "text-xl", delay: 2.2 },
|
||||
] as const;
|
||||
|
||||
export function FloatingEmojis() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{POSITIONS.map((pos, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`absolute select-none opacity-[0.15] ${pos.size}`}
|
||||
style={{
|
||||
left: pos.left,
|
||||
top: pos.top,
|
||||
animation: `bounce-gentle ${4 + (i % 3)}s ease-in-out infinite`,
|
||||
animationDelay: `${pos.delay}s`,
|
||||
}}
|
||||
>
|
||||
{FLOATING_EMOJIS[i]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
components/ui/globe-animation.tsx
Normal file
117
components/ui/globe-animation.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
export function GlobeAnimation() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute right-[-5%] top-[15%] hidden opacity-20 lg:block xl:right-[5%] xl:opacity-30">
|
||||
<div className="relative h-72 w-72 xl:h-96 xl:w-96">
|
||||
{/* Orbit ring 1 */}
|
||||
<div className="animate-orbit absolute inset-0">
|
||||
<svg viewBox="0 0 200 200" className="h-full w-full">
|
||||
<ellipse
|
||||
cx="100"
|
||||
cy="100"
|
||||
rx="95"
|
||||
ry="35"
|
||||
fill="none"
|
||||
stroke="url(#orbitGrad1)"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="4 6"
|
||||
/>
|
||||
<circle cx="195" cy="100" r="3" fill="#22d3ee" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<defs>
|
||||
<linearGradient id="orbitGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#8b5cf6" stopOpacity="0" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Orbit ring 2 */}
|
||||
<div className="animate-orbit-reverse absolute inset-4">
|
||||
<svg viewBox="0 0 200 200" className="h-full w-full">
|
||||
<ellipse
|
||||
cx="100"
|
||||
cy="100"
|
||||
rx="80"
|
||||
ry="80"
|
||||
fill="none"
|
||||
stroke="url(#orbitGrad2)"
|
||||
strokeWidth="0.3"
|
||||
strokeDasharray="2 8"
|
||||
transform="rotate(-30 100 100)"
|
||||
/>
|
||||
<circle cx="100" cy="20" r="2.5" fill="#d946ef" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<defs>
|
||||
<linearGradient id="orbitGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#d946ef" stopOpacity="0.2" />
|
||||
<stop offset="100%" stopColor="#34d399" stopOpacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Globe */}
|
||||
<div className="absolute inset-[25%] flex items-center justify-center">
|
||||
<svg viewBox="0 0 120 120" className="h-full w-full">
|
||||
<defs>
|
||||
<radialGradient id="globeGrad" cx="35%" cy="30%">
|
||||
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.3" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.15" />
|
||||
<stop offset="100%" stopColor="#06060f" stopOpacity="0.05" />
|
||||
</radialGradient>
|
||||
<linearGradient id="globeLine" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.1" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="60" cy="60" r="55" fill="url(#globeGrad)" stroke="url(#globeLine)" strokeWidth="0.8" />
|
||||
{/* Latitude lines */}
|
||||
{[30, 45, 60, 75, 90].map((lat) => {
|
||||
const ry = Math.sin((lat * Math.PI) / 180) * 55;
|
||||
return (
|
||||
<ellipse
|
||||
key={lat}
|
||||
cx="60"
|
||||
cy="60"
|
||||
rx="55"
|
||||
ry={ry}
|
||||
fill="none"
|
||||
stroke="#22d3ee"
|
||||
strokeWidth="0.3"
|
||||
opacity="0.2"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{/* Longitude lines */}
|
||||
{[0, 30, 60, 90, 120, 150].map((lon) => (
|
||||
<ellipse
|
||||
key={lon}
|
||||
cx="60"
|
||||
cy="60"
|
||||
rx={Math.cos((lon * Math.PI) / 180) * 8 + 8}
|
||||
ry="55"
|
||||
fill="none"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth="0.3"
|
||||
opacity="0.15"
|
||||
transform={`rotate(${lon} 60 60)`}
|
||||
/>
|
||||
))}
|
||||
{/* Glow dot */}
|
||||
<circle cx="42" cy="38" r="4" fill="#22d3ee" opacity="0.6">
|
||||
<animate attributeName="r" values="3;5;3" dur="4s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,20 @@
|
||||
"use client";
|
||||
|
||||
const PARTICLES = Array.from({ length: 50 }, (_, i) => ({
|
||||
size: 4 + (i % 6),
|
||||
const COLOR_MAP = {
|
||||
cyan: "from-cyan-400/60 to-cyan-300/30",
|
||||
violet: "from-violet-400/60 to-violet-300/30",
|
||||
fuchsia: "from-fuchsia-400/60 to-fuchsia-300/30",
|
||||
} as const;
|
||||
|
||||
type ParticleColor = keyof typeof COLOR_MAP;
|
||||
|
||||
const PARTICLES = Array.from({ length: 60 }, (_, i) => ({
|
||||
size: 2 + (i % 5),
|
||||
left: (i * 17.3) % 100,
|
||||
top: (i * 23.7) % 100,
|
||||
duration: 10 + (i % 8),
|
||||
delay: (i * 0.3) % 5,
|
||||
duration: 12 + (i % 10),
|
||||
delay: (i * 0.4) % 6,
|
||||
color: (i % 3 === 0 ? "cyan" : i % 3 === 1 ? "violet" : "fuchsia") as ParticleColor,
|
||||
}));
|
||||
|
||||
export function Particles() {
|
||||
@@ -14,13 +23,13 @@ export function Particles() {
|
||||
{PARTICLES.map((p, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-gradient-to-br from-violet-400/50 via-fuchsia-400/40 to-cyan-400/50 blur-[1px]"
|
||||
className={`absolute rounded-full bg-gradient-to-br ${COLOR_MAP[p.color]} blur-[0.5px]`}
|
||||
style={{
|
||||
width: `${p.size}px`,
|
||||
height: `${p.size}px`,
|
||||
left: `${p.left}%`,
|
||||
top: `${p.top}%`,
|
||||
animation: `float ${p.duration}s ease-in-out infinite`,
|
||||
animation: `float ${p.duration}s ease-in-out infinite, twinkle ${3 + (i % 4)}s ease-in-out infinite`,
|
||||
animationDelay: `${p.delay}s`,
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user