Refine color palette for professional-yet-irreverent look
- Swap neon green (#39FF14) for refined emerald (#34D399) - Add warm amber accent (#FBBF24) for badges, highlights, fun-facts - Darken background to charcoal-brown (#141210) for more depth - Soften glow effects (less rave, more premium) - Reduce floating emoji count and opacity - Green-to-gold gradient on hero text - Subtler card hover effects with border transitions - Tone down animations (slower, less travel distance) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
38e7a2a796
commit
da0a534c83
|
|
@ -1,16 +1,18 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-bg-primary: #1A0E0A;
|
||||
--color-bg-card: #2A1A12;
|
||||
--color-bg-card-hover: #3A2A1A;
|
||||
--color-neon: #39FF14;
|
||||
--color-neon-dim: #2ECC10;
|
||||
--color-cream: #FFF8E1;
|
||||
--color-cream-dim: #E8DFC8;
|
||||
--color-brown-light: #5C3D2E;
|
||||
--color-brown-medium: #3E2518;
|
||||
--color-brown-dark: #2A1A12;
|
||||
--color-bg-primary: #141210;
|
||||
--color-bg-card: #1E1C18;
|
||||
--color-bg-card-hover: #2A2822;
|
||||
--color-neon: #34D399;
|
||||
--color-neon-dim: #2AB880;
|
||||
--color-cream: #F5F1EA;
|
||||
--color-cream-dim: #B8B0A0;
|
||||
--color-brown-light: #4A4038;
|
||||
--color-brown-medium: #302820;
|
||||
--color-brown-dark: #1E1C18;
|
||||
--color-accent: #FBBF24;
|
||||
--color-accent-dim: #D99F1A;
|
||||
|
||||
--font-space: "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
|
@ -49,17 +51,17 @@
|
|||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
|
||||
50% { transform: translateY(-30px) rotate(10deg); opacity: 1; }
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
|
||||
50% { transform: translateY(-25px) rotate(8deg); opacity: 0.8; }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.1); }
|
||||
0%, 100% { opacity: 0.2; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
|
|
@ -69,19 +71,19 @@
|
|||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from { opacity: 0; transform: translateX(-40px); }
|
||||
from { opacity: 0; transform: translateX(-30px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from { opacity: 0; transform: translateX(40px); }
|
||||
from { opacity: 0; transform: translateX(30px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-5deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
25% { transform: rotate(-3deg); }
|
||||
75% { transform: rotate(3deg); }
|
||||
}
|
||||
|
||||
@keyframes dash-flow {
|
||||
|
|
@ -98,34 +100,34 @@
|
|||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
animation: pulse-glow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
animation: fade-in-up 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
animation: fade-in 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-left {
|
||||
animation: slide-in-left 0.6s ease-out forwards;
|
||||
animation: slide-in-left 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
animation: slide-in-right 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-wiggle {
|
||||
animation: wiggle 2s ease-in-out infinite;
|
||||
animation: wiggle 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Scroll-triggered animation base state */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
|
|
@ -133,23 +135,23 @@
|
|||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Neon glow effect */
|
||||
/* Glow effects — subtle, not rave */
|
||||
.neon-text {
|
||||
text-shadow: 0 0 10px var(--color-neon), 0 0 40px var(--color-neon), 0 0 80px rgba(57, 255, 20, 0.3);
|
||||
text-shadow: 0 0 20px rgba(52, 211, 153, 0.4), 0 0 60px rgba(52, 211, 153, 0.15);
|
||||
}
|
||||
|
||||
.neon-border {
|
||||
box-shadow: 0 0 10px rgba(57, 255, 20, 0.3), inset 0 0 10px rgba(57, 255, 20, 0.1);
|
||||
box-shadow: 0 0 8px rgba(52, 211, 153, 0.15), inset 0 0 8px rgba(52, 211, 153, 0.05);
|
||||
}
|
||||
|
||||
.neon-glow-orb {
|
||||
background: radial-gradient(circle, rgba(57, 255, 20, 0.3) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--color-neon) 0%, #7CFF5B 50%, var(--color-cream) 100%);
|
||||
background: linear-gradient(135deg, var(--color-neon) 0%, var(--color-accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -157,17 +159,18 @@
|
|||
|
||||
/* Card hover effect */
|
||||
.card-hover {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 0 20px rgba(57, 255, 20, 0.15), 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(52, 211, 153, 0.08);
|
||||
border-color: rgba(52, 211, 153, 0.3);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
@ -176,9 +179,9 @@
|
|||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-brown-light);
|
||||
border-radius: 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neon-dim);
|
||||
background: var(--color-cream-dim);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,8 +190,8 @@ export function ContactSection() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neon/20 bg-neon/5 p-5">
|
||||
<p className="text-sm text-neon font-medium mb-1">
|
||||
<div className="rounded-xl border border-accent/20 bg-accent/5 p-5">
|
||||
<p className="text-sm text-accent font-medium mb-1">
|
||||
Fun fact 💩⚡
|
||||
</p>
|
||||
<p className="text-sm text-cream-dim">
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@ import { Button } from "@/components/ui/button";
|
|||
import { Zap, ArrowDown } from "lucide-react";
|
||||
|
||||
const floatingEmojis = [
|
||||
{ emoji: "💩", top: "15%", left: "8%", delay: "0s", duration: "6s" },
|
||||
{ emoji: "⚡", top: "25%", right: "12%", delay: "1s", duration: "7s" },
|
||||
{ emoji: "💩", top: "60%", left: "5%", delay: "2s", duration: "8s" },
|
||||
{ emoji: "🔋", top: "70%", right: "8%", delay: "0.5s", duration: "6.5s" },
|
||||
{ emoji: "💩", top: "40%", right: "5%", delay: "3s", duration: "7s" },
|
||||
{ emoji: "🌿", top: "80%", left: "15%", delay: "1.5s", duration: "9s" },
|
||||
{ emoji: "⚡", top: "10%", left: "75%", delay: "2.5s", duration: "6s" },
|
||||
{ emoji: "💩", top: "50%", left: "90%", delay: "0.8s", duration: "7.5s" },
|
||||
{ emoji: "💩", top: "20%", left: "8%", delay: "0s", duration: "8s" },
|
||||
{ emoji: "⚡", top: "30%", right: "10%", delay: "1.5s", duration: "9s" },
|
||||
{ emoji: "🌿", top: "65%", left: "6%", delay: "3s", duration: "10s" },
|
||||
{ emoji: "🔋", top: "75%", right: "8%", delay: "0.5s", duration: "8.5s" },
|
||||
{ emoji: "💩", top: "45%", right: "4%", delay: "4s", duration: "9s" },
|
||||
{ emoji: "⚡", top: "12%", left: "80%", delay: "2s", duration: "10s" },
|
||||
];
|
||||
|
||||
export function HeroSection() {
|
||||
|
|
@ -28,7 +26,7 @@ export function HeroSection() {
|
|||
{floatingEmojis.map((item, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="absolute text-3xl sm:text-4xl animate-float-slow pointer-events-none select-none opacity-60"
|
||||
className="absolute text-2xl sm:text-3xl animate-float-slow pointer-events-none select-none opacity-30"
|
||||
style={{
|
||||
top: item.top,
|
||||
left: item.left,
|
||||
|
|
@ -45,7 +43,7 @@ export function HeroSection() {
|
|||
{/* Content */}
|
||||
<div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
|
||||
<div className="animate-fade-in-up">
|
||||
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/10 px-4 py-2 text-sm text-neon">
|
||||
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-4 py-2 text-sm text-accent">
|
||||
<Zap className="h-4 w-4" />
|
||||
<span>Your #2 Is Our #1 Priority</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function StatCard({
|
|||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neon/10 border border-neon/30">
|
||||
<stat.icon className="h-7 w-7 text-neon" />
|
||||
</div>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-neon neon-text mb-2">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-cream neon-text mb-2">
|
||||
{count}
|
||||
{stat.suffix}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export function PackagesSection() {
|
|||
style={{ animationDelay: `${0.2 + index * 0.1}s` }}
|
||||
>
|
||||
{pkg.featured && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-neon px-4 py-1 text-xs font-bold text-bg-primary">
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-accent px-4 py-1 text-xs font-bold text-bg-primary">
|
||||
<Star className="h-3 w-3" />
|
||||
Most Popular
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ const buttonVariants = cva(
|
|||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-neon text-bg-primary hover:bg-neon-dim hover:shadow-[0_0_20px_rgba(57,255,20,0.4)]",
|
||||
"bg-neon text-bg-primary hover:bg-neon-dim hover:shadow-[0_0_20px_rgba(52,211,153,0.25)]",
|
||||
outline:
|
||||
"border-2 border-neon text-neon hover:bg-neon/10 hover:shadow-[0_0_15px_rgba(57,255,20,0.2)]",
|
||||
"border-2 border-neon/60 text-neon hover:bg-neon/10 hover:border-neon",
|
||||
ghost: "text-cream hover:bg-cream/10",
|
||||
},
|
||||
size: {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const Card = React.forwardRef<
|
|||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-2xl border border-brown-light/30 bg-bg-card p-6 shadow-lg",
|
||||
"rounded-2xl border border-brown-light/20 bg-bg-card p-6 shadow-lg backdrop-blur-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
Loading…
Reference in New Issue