update aja

resources/js/Components/CourseCard.tsx

@@ -28,7 +28,7 @@ export default function CourseCard({
             {/* Hover Glow Effect */}
             <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-orange-500/5 to-transparent blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl" />
             
-            <Card className="relative overflow-hidden bg-card/50 backdrop-blur-sm transition-all duration-500 border-border/50 group-hover:border-primary/30 shadow-sm group-hover:shadow-2xl group-hover:shadow-primary/5 group-hover:-translate-y-1 rounded-2xl">
+            <Card className="relative overflow-hidden transition-all duration-500 group-hover:border-primary/50 group-hover:-translate-y-1 rounded-2xl">
                 <div className="relative aspect-[16/9] overflow-hidden">
                     <img 
                         src={thumbnail || "/brand/Nihonbuzz-Academy-Logo-Branding-Pattern-Landscape.png"} 

resources/js/Components/Landing/Hero.tsx

@@ -30,7 +30,7 @@ const itemVariants: Variants = {
 
 export function Hero() {
   return (
-    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden w-full bg-background selection:bg-primary/30 selection:text-primary pt-20">
+    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden w-full bg-background selection:bg-primary/30 selection:text-primary">
       {/* Background Gradients - Boosted for Light Mode using CSS variables */}
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 dark:bg-primary/10 blur-[120px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
       <div className="absolute bottom-0 right-0 w-[800px] h-[800px] bg-blue-500/10 dark:bg-blue-500/5 blur-[150px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
@@ -45,7 +45,7 @@ export function Hero() {
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="relative z-10 container px-4 mx-auto flex flex-col items-center text-center gap-8"
+        className="relative z-10 container px-4 mx-auto flex flex-col items-center text-center gap-8 pt-24 lg:pt-32"
       >
         <motion.div variants={itemVariants}>
           <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/10 bg-primary/5 backdrop-blur-sm shadow-inner text-sm text-primary font-bold mb-6">

resources/js/Components/Landing/Hero.tsx.bak

@@ -0,0 +1,91 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+import { ArrowRight, Sparkles } from "lucide-react";
+import { Button } from "@/Components/ui/button";
+import { Link } from "@inertiajs/react";
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.3,
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.8,
+      ease: [0.215, 0.610, 0.355, 1.000],
+    },
+  },
+};
+
+export function Hero() {
+  return (
+    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden w-full bg-background selection:bg-primary/30 selection:text-primary pt-20">
+      {/* Background Gradients - Boosted for Light Mode using CSS variables */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 dark:bg-primary/10 blur-[120px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
+      <div className="absolute bottom-0 right-0 w-[800px] h-[800px] bg-blue-500/10 dark:bg-blue-500/5 blur-[150px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
+      
+      {/* Grid Pattern Overlay */}
+      <div className="absolute inset-0 bg-grid z-0" />
+
+      {/* Japanese Wave Pattern - Adjusted Opacity */}
+      <div className="absolute inset-0 bg-seigaiha z-0 opacity-80 dark:opacity-40" />
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="relative z-10 container px-4 mx-auto flex flex-col items-center text-center gap-8"
+      >
+        <motion.div variants={itemVariants}>
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/10 bg-primary/5 backdrop-blur-sm shadow-inner text-sm text-primary font-bold mb-6">
+            <Sparkles className="w-4 h-4" />
+            <span>Pendaftaran Batch 2026 Dibuka!</span>
+          </div>
+        </motion.div>
+
+        <motion.h1 
+            variants={itemVariants}
+            className="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight text-foreground leading-[1.1]"
+        >
+          Hubungkan Impianmu <br />
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary/80 to-primary/40 italic">
+            Ke Negeri Sakura
+          </span>
+        </motion.h1>
+
+        <motion.p 
+            variants={itemVariants}
+            className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed font-medium"
+        >
+          Platform edukasi terdepan untuk penguasaan Bahasa Jepang & karir profesional. 
+          Belajar JLPT N5 hingga N2 dengan kurikulum modern dan Spaced Repetition System.
+        </motion.p>
+
+        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-5 mt-4">
+          <Button asChild size="lg" className="rounded-full bg-primary hover:bg-primary/90 text-white min-w-[180px] h-14 shadow-xl shadow-primary/20 font-bold text-lg">
+            <Link href={route('register')}>
+                Mulai Belajar Gratis
+                <ArrowRight className="w-5 h-5 ml-2" />
+            </Link>
+          </Button>
+          <Button asChild size="lg" variant="outline" className="rounded-full border-border hover:bg-muted min-w-[180px] h-14 font-bold text-lg text-foreground">
+            <Link href="#programs">
+                Lihat Program
+            </Link>
+          </Button>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}

resources/js/Components/Landing/Navbar.tsx

@@ -39,7 +39,7 @@ export function Navbar() {
         className={cn(
             "flex items-center justify-between transition-all duration-300 ease-in-out pointer-events-auto",
             scrolled
-              ? "bg-background/80 backdrop-blur-xl border border-white/10 shadow-2xl w-full max-w-5xl px-10 py-3 rounded-full gap-8"
+              ? "bg-background/80 backdrop-blur-xl border border-white/10 shadow-none w-full max-w-5xl px-10 py-3 rounded-full gap-8"
               : "bg-transparent border-transparent w-full max-w-6xl px-6 py-3 rounded-full"
         )}
       >

resources/js/Components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border border-white/40 dark:border-white/10 bg-white/50 dark:bg-black/30 backdrop-blur-xl text-card-foreground shadow-none",
       className
     )}
     {...props}