feat: enhance landing components with improved styling and background gradients

Author: moonrailgun

apps/web/src/components/header.tsx

@@ -27,7 +27,7 @@ export function Header() {
 	];
 
 	return (
-		<header className="bg-background/80 sticky top-0 z-10 backdrop-blur-md">
+		<header className="bg-background/80 sticky top-0 z-10 border-b border-border/40 backdrop-blur-md dark:border-transparent">
 			<div className="relative mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-3">
 				<div className="relative z-10 flex items-center gap-8">
 					<Link href="/" className="flex items-center gap-2.5">

apps/web/src/components/landing/cta-section.tsx

@@ -18,9 +18,9 @@ export function CTASection() {
 				viewport={{ once: true, margin: "-100px" }}
 				transition={{ duration: 0.7, ease: "easeOut" }}
 			>
-				<div className="relative overflow-hidden rounded-3xl border border-border/50 bg-muted/20 p-12 md:p-16">
+				<div className="relative overflow-hidden rounded-3xl border border-border/50 bg-gradient-to-b from-primary/[0.03] to-transparent p-12 shadow-sm dark:bg-muted/20 dark:from-transparent dark:shadow-none md:p-16">
 					<motion.div
-						className="absolute -top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full bg-primary/5 blur-[100px]"
+						className="absolute -top-1/2 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full bg-primary/10 blur-[100px] dark:bg-primary/5"
 						animate={{
 							scale: [1, 1.3, 1],
 							opacity: [0.3, 0.5, 0.3],

apps/web/src/components/landing/faq-section.tsx

@@ -16,6 +16,7 @@ export function FAQSection() {
 
 	return (
 		<section id="faq" className="relative px-4 py-24 md:py-32">
+			<div className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-accent/50 via-transparent to-transparent dark:from-transparent" />
 			<div className="mx-auto max-w-3xl">
 				<motion.div
 					className="mb-12 text-center"
@@ -52,6 +53,7 @@ export function FAQSection() {
 					</Accordion>
 				</motion.div>
 			</div>
+
 		</section>
 	);
 }

apps/web/src/components/landing/features.tsx

@@ -53,6 +53,7 @@ export function Features() {
 
 	return (
 		<section id="features" className="relative px-4 py-24 md:py-32">
+			<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/[0.03] via-transparent to-transparent dark:from-transparent" />
 			<div className="mx-auto max-w-6xl">
 				<motion.div
 					className="mb-16 text-center"
@@ -75,7 +76,7 @@ export function Features() {
 					{features.map((feature, index) => (
 						<motion.div
 							key={feature.title}
-							className="group rounded-2xl border border-border/50 bg-card/50 p-6 backdrop-blur-sm transition-colors hover:border-border hover:bg-card"
+							className="group rounded-2xl border border-border/50 bg-card/50 p-6 shadow-sm backdrop-blur-sm transition-all hover:border-border hover:bg-card hover:shadow-md dark:shadow-none dark:hover:shadow-none"
 							initial={{ opacity: 0, y: 40 }}
 							whileInView={{ opacity: 1, y: 0 }}
 							viewport={{ once: true, margin: "-60px" }}
@@ -87,11 +88,11 @@ export function Features() {
 							whileHover={{ y: -4, transition: { duration: 0.2 } }}
 						>
 							<motion.div
-								className="mb-4 flex size-11 items-center justify-center rounded-xl bg-foreground/5 dark:bg-foreground/10"
+								className="mb-4 flex size-11 items-center justify-center rounded-xl bg-primary/8 dark:bg-foreground/10"
 								whileHover={{ scale: 1.1, rotate: 5 }}
 								transition={{ type: "spring", stiffness: 400, damping: 15 }}
 							>
-								<feature.icon className="size-5 text-foreground/70" />
+								<feature.icon className="size-5 text-primary/70 dark:text-foreground/70" />
 							</motion.div>
 							<h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
 							<p className="text-muted-foreground text-sm leading-relaxed">

apps/web/src/components/landing/hero.tsx

@@ -23,12 +23,14 @@ export function Hero() {
 	return (
 		<section className="relative flex min-h-[calc(100svh-4rem)] flex-col items-center justify-center overflow-hidden px-4">
 			<div className="pointer-events-none absolute inset-0 -z-10">
-				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-muted/50 via-transparent to-transparent" />
+				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-muted/50 via-transparent to-transparent dark:from-muted/50" />
+				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-primary/[0.06] via-transparent to-transparent dark:from-primary/[0.03]" />
+				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-violet-500/[0.04] via-transparent to-transparent dark:from-violet-500/[0.02]" />
 
 				{[600, 400, 200].map((size, index) => (
 					<motion.div
 						key={size}
-						className="absolute top-1/4 left-1/2 rounded-full border border-border/20"
+						className="absolute top-1/4 left-1/2 rounded-full border border-primary/10 dark:border-border/20"
 						style={{
 							width: size,
 							height: size,
@@ -48,7 +50,7 @@ export function Hero() {
 				))}
 
 				<motion.div
-					className="absolute top-1/6 left-1/2 h-[500px] w-[800px] -translate-x-1/2 rounded-full bg-primary/5 blur-[120px]"
+					className="absolute top-1/6 left-1/2 h-[500px] w-[800px] -translate-x-1/2 rounded-full bg-primary/8 blur-[120px] dark:bg-primary/5"
 					animate={{
 						scale: [1, 1.2, 1],
 						opacity: [0.3, 0.6, 0.3],
@@ -63,7 +65,7 @@ export function Hero() {
 				{floatingParticles.map((particle) => (
 					<motion.div
 						key={particle.id}
-						className="absolute rounded-full bg-foreground/20"
+						className="absolute rounded-full bg-primary/25 dark:bg-foreground/20"
 						style={{
 							width: particle.size,
 							height: particle.size,
@@ -86,7 +88,7 @@ export function Hero() {
 
 			<div className="mx-auto flex max-w-4xl flex-col items-center text-center">
 				<motion.div
-					className="mb-8 flex items-center gap-3 rounded-full border border-border/60 bg-muted/30 px-4 py-2"
+					className="mb-8 flex items-center gap-3 rounded-full border border-primary/15 bg-primary/[0.06] px-4 py-2 shadow-sm dark:border-border/60 dark:bg-muted/30 dark:shadow-none"
 					initial={{ opacity: 0, y: 20, scale: 0.9 }}
 					animate={{ opacity: 1, y: 0, scale: 1 }}
 					transition={{ duration: 0.6, ease: "easeOut" }}
@@ -112,7 +114,7 @@ export function Hero() {
 					{t('Edit videos,')}
 					<br />
 					<motion.span
-						className="text-muted-foreground inline-block"
+						className="inline-block bg-gradient-to-r from-muted-foreground to-muted-foreground/70 bg-clip-text text-transparent dark:from-muted-foreground dark:to-muted-foreground"
 						initial={{ opacity: 0, y: 20 }}
 						animate={{ opacity: 1, y: 0 }}
 						transition={{ duration: 0.7, delay: 0.35, ease: "easeOut" }}

apps/web/src/components/landing/starfield.tsx

@@ -95,9 +95,9 @@ export function StarField() {
 		({ ctx, width, height, time }: { ctx: CanvasRenderingContext2D; width: number; height: number; time: number }) => {
 			ctx.clearRect(0, 0, width, height);
 
-			const globalAlpha = isDark ? 1 : 0.25;
-			const starColor = isDark ? "255, 255, 255" : "0, 0, 0";
-			const glowColor = isDark ? "100, 140, 255" : "80, 100, 200";
+			const globalAlpha = isDark ? 1 : 0.45;
+			const starColor = isDark ? "255, 255, 255" : "120, 140, 180";
+			const glowColor = isDark ? "100, 140, 255" : "100, 130, 220";
 
 			ctx.save();
 			ctx.globalAlpha = globalAlpha;