mirror of
https://github.com/jnsahaj/tweakcn.git
synced 2026-08-31 02:19:56 +08:00
fix: intended effects on landing page sections
This commit is contained in:
Luis Llanes
+1
-1
@@ -35,7 +35,7 @@ export default function Home() {
|
||||
mobileMenuOpen={mobileMenuOpen}
|
||||
setMobileMenuOpen={setMobileMenuOpen}
|
||||
/>
|
||||
<main className="flex-1">
|
||||
<main className="flex-1 w-full">
|
||||
<Hero />
|
||||
<ThemePresetSelector />
|
||||
<Features />
|
||||
|
||||
@@ -5,15 +5,15 @@ import Link from "next/link";
|
||||
|
||||
export function CTA() {
|
||||
return (
|
||||
<section className="w-full py-20 md:py-32 bg-gradient-to-br from-primary to-primary/80 text-primary-foreground relative overflow-hidden">
|
||||
<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#ffffff10_1px,transparent_1px),linear-gradient(to_bottom,#ffffff10_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>
|
||||
<div className="absolute -top-24 -left-24 w-64 h-64 bg-white/10 rounded-full blur-3xl animate-pulse"></div>
|
||||
<section className="w-full py-20 md:py-32 bg-gradient-to-br from-primary to-primary/80 text-primary-foreground relative overflow-hidden isolate">
|
||||
<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(from_var(--primary-foreground)_r_g_b_/_0.075)_1px,transparent_1px),linear-gradient(to_bottom,rgba(from_var(--primary-foreground)_r_g_b_/_0.075)_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>
|
||||
<div className="absolute -top-24 -left-24 w-64 h-64 bg-foreground/15 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div
|
||||
className="absolute -bottom-24 -right-24 w-64 h-64 bg-white/10 rounded-full blur-3xl animate-pulse"
|
||||
className="absolute -bottom-24 -right-24 w-64 h-64 bg-foreground/15 rounded-full blur-3xl animate-pulse"
|
||||
style={{ animationDelay: "1.5s" }}
|
||||
></div>
|
||||
|
||||
<div className="container px-4 md:px-6 relative">
|
||||
<div className="container mx-auto px-4 md:px-6 relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
@@ -48,7 +48,7 @@ const faqs = [
|
||||
export function FAQ() {
|
||||
return (
|
||||
<section id="faq" className="w-full py-20 md:py-32">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
@@ -66,9 +66,9 @@ const item = {
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="w-full py-20 md:py-32 relative">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,rgba(var(--primary-rgb),0.03),transparent_70%)]"></div>
|
||||
<div className="container px-4 md:px-6">
|
||||
<section id="features" className="w-full py-20 md:py-32 relative isolate">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,rgba(from_var(--primary)_r_g_b_/_0.03),transparent_70%)]"></div>
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
@@ -7,7 +7,7 @@ import DiscordIcon from "@/assets/discord.svg";
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="w-full border-t bg-background/95 backdrop-blur-sm">
|
||||
<div className="container max-w-8xl mx-auto flex flex-col gap-8 px-4 md:px-0 py-10 lg:py-16">
|
||||
<div className="container mx-auto flex flex-col gap-8 px-4 py-10 lg:py-16">
|
||||
<div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
|
||||
<div className="space-y-4 col-span-2 max-w-md">
|
||||
<Link href="/" className="flex items-center gap-2 font-bold">
|
||||
|
||||
@@ -6,8 +6,8 @@ import Link from "next/link";
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="w-full py-20 md:py-32 lg:py-40 relative">
|
||||
<div className="container px-4 md:px-6 z-10 relative">
|
||||
<section className="container mx-auto w-full py-20 md:py-32 lg:py-40 relative isolate">
|
||||
<div className="px-4 md:px-6 z-10 relative">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left Column - Text Content */}
|
||||
<div className="text-left max-w-2xl mx-auto lg:mx-0">
|
||||
|
||||
@@ -24,12 +24,11 @@ export function HowItWorks() {
|
||||
return (
|
||||
<section
|
||||
id="how-it-works"
|
||||
className="w-full py-20 md:py-32 bg-muted/30 relative overflow-hidden"
|
||||
className="w-full py-20 md:py-32 bg-muted/30 relative overflow-hidden isolate"
|
||||
>
|
||||
<div className="absolute inset-0 -z-10 h-full w-full bg-background"></div>
|
||||
<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(var(--muted-rgb),0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(var(--muted-rgb),0.05)_1px,transparent_1px)] bg-[size:3rem_3rem]"></div>
|
||||
<div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(from_var(--muted-foreground)_r_g_b_/_0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(from_var(--muted-foreground)_r_g_b_/_0.05)_1px,transparent_1px)] bg-[size:3rem_3rem]"></div>
|
||||
|
||||
<div className="container px-4 md:px-6 relative">
|
||||
<div className="container mx-auto px-4 md:px-6 relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
@@ -50,12 +50,11 @@ export function Roadmap() {
|
||||
return (
|
||||
<section
|
||||
id="roadmap"
|
||||
className="w-full py-20 md:py-32 bg-muted/30 relative overflow-hidden"
|
||||
className="w-full py-20 md:py-32 bg-linear-180 from-muted/30 from-50% to-transparent relative overflow-hidden isolate"
|
||||
>
|
||||
<div className="absolute inset-0 -z-10 h-full w-full bg-background/20"></div>
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,rgba(var(--secondary-rgb),0.05),transparent_50%)]"></div>
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,rgba(from_var(--secondary)_r_g_b_/0.05),transparent_50%)]"></div>
|
||||
|
||||
<div className="container px-4 md:px-6 relative">
|
||||
<div className="container mx-auto px-4 md:px-6 relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
@@ -34,7 +34,7 @@ export function ThemePresetSelector() {
|
||||
|
||||
return (
|
||||
<section id="examples" className="w-full py-20 md:py-32">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
|
||||
Reference in New Issue
Block a user