first commit

resources/js/Components/Landing/Footer.tsx

@@ -0,0 +1,66 @@
+import { Link } from "@inertiajs/react";
+import { MapPin, Mail, Phone } from "lucide-react";
+
+export function Footer() {
+    return (
+        <footer className="border-t border-white/5 bg-black py-16 relative z-10 w-full">
+            <div className="container mx-auto px-6">
+                <div className="grid md:grid-cols-4 gap-12 mb-16">
+                    <div className="col-span-1 md:col-span-2">
+                        <Link href="/" className="mb-6 block">
+                            <img 
+                                src="/brand/Nihonbuzz-Academy-Dark-LS-Regular.png" 
+                                alt="NihonBuzz" 
+                                className="h-8 w-auto transition-transform hover:scale-105 duration-300"
+                            />
+                        </Link>
+                        <p className="text-muted-foreground mb-8 max-w-sm leading-relaxed">
+                            Ekosistem belajar Bahasa Jepang modern untuk penguasaan JLPT, Karir, dan Budaya. Platform LMS terintegrasi untuk siswa Indonesia.
+                        </p>
+                            <div className="flex gap-6">
+                                {['Instagram', 'Youtube', 'TikTok'].map((social) => (
+                                    <Link key={social} href="#" className="text-muted-foreground hover:text-primary transition-colors text-sm font-bold">
+                                        {social}
+                                    </Link>
+                                ))}
+                            </div>
+                    </div>
+                    
+                    <div>
+                        <h5 className="font-bold text-white mb-6 text-sm">Program & Kursus</h5>
+                        <ul className="space-y-4 text-sm text-muted-foreground font-medium">
+                            <li><Link href="#" className="hover:text-primary transition-colors">Persiapan JLPT N5 - N2</Link></li>
+                            <li><Link href="#" className="hover:text-primary transition-colors">Mastery Kanji & Vocab</Link></li>
+                            <li><Link href="#" className="hover:text-primary transition-colors">Kaiwa Professional</Link></li>
+                            <li><Link href="#" className="hover:text-primary transition-colors">Dashboard Siswa</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h5 className="font-bold text-white mb-6 text-sm">Hubungi Kami</h5>
+                        <ul className="space-y-4 text-sm text-muted-foreground font-medium">
+                            <li className="flex items-start gap-3">
+                                <MapPin className="w-4 h-4 text-primary shrink-0 mt-0.5" />
+                                <span className="leading-relaxed text-xs">Jl. Palapa VII No.1, Kedoya Sel., Kec. Kb. Jeruk, Jakarta Barat 11520</span>
+                            </li>
+                            <li className="flex items-center gap-3">
+                                <Mail className="w-4 h-4 text-primary shrink-0" />
+                                <a href="mailto:hello@nihonbuzz.org" className="hover:text-primary transition-colors">hello@nihonbuzz.org</a>
+                            </li>
+                            <li className="flex items-center gap-3">
+                                <Phone className="w-4 h-4 text-primary shrink-0" />
+                                <span>+62 851-2988-0919</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div className="border-t border-white/5 pt-8 text-center">
+                    <p className="text-muted-foreground text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">
+                        &copy; {new Date().getFullYear()} NihonBuzz Academy. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+}

resources/js/Components/Landing/Hero.tsx

@@ -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

@@ -0,0 +1,137 @@
+"use client";
+
+import { Link } from "@inertiajs/react";
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { Menu, X } from "lucide-react";
+import { Button } from "@/Components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/Components/ui/sheet";
+import { cn } from "@/lib/utils";
+import { ModeToggle } from "@/Components/ModeToggle";
+
+const navLinks = [
+  { name: "Beranda", href: "/" },
+  { name: "Kursus", href: "#courses" },
+  { name: "Biaya", href: "#pricing" },
+  { name: "Kurikulum", href: "#curriculum" },
+  { name: "FAQ", href: "#faq" },
+];
+
+export function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <motion.header
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-6 px-4 pointer-events-none"
+    >
+      <div
+        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-transparent border-transparent w-full max-w-6xl px-6 py-3 rounded-full"
+        )}
+      >
+        {/* Logo */}
+        <Link href="/" className="relative flex items-center gap-2 group">
+          <img 
+            src="/brand/Nihonbuzz-Academy-Light-LS-Regular.png" 
+            alt="NihonBuzz" 
+            className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 group-hover:scale-105 dark:hidden"
+          />
+          <img 
+            src="/brand/Nihonbuzz-Academy-Dark-LS-Regular.png" 
+            alt="NihonBuzz" 
+            className="h-8 md:h-10 w-auto object-contain transition-transform duration-300 group-hover:scale-105 hidden dark:block"
+          />
+        </Link>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden lg:flex items-center gap-6">
+          {navLinks.map((link) => (
+            <Link
+              key={link.name}
+              href={link.href}
+              className="text-sm font-bold text-foreground/70 hover:text-primary transition-colors cursor-pointer whitespace-nowrap"
+            >
+              {link.name}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Action Button & Mobile Menu */}
+        <div className="flex items-center gap-3">
+          <div className="hidden lg:flex items-center gap-3">
+              <ModeToggle />
+              <Link href={route('login')}>
+                <Button 
+                    variant="ghost" 
+                    className="text-foreground/70 hover:text-primary hover:bg-primary/5 font-bold whitespace-nowrap"
+                    size="sm"
+                >
+                    Login Siswa
+                </Button>
+              </Link>
+              
+              <Link href={route('register')}>
+                <Button 
+                    className="rounded-full bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20 font-black px-6 whitespace-nowrap"
+                    size="sm"
+                >
+                    Daftar Kelas
+                </Button>
+              </Link>
+          </div>
+
+          {/* Mobile Toggle */}
+          <Sheet>
+            <div className="lg:hidden flex items-center gap-2 pointer-events-auto">
+                <ModeToggle />
+                <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="text-foreground rounded-full h-10 w-10 bg-foreground/5">
+                    <Menu className="w-5 h-5" />
+                </Button>
+                </SheetTrigger>
+            </div>
+            <SheetContent side="top" className="w-full h-auto rounded-b-[2rem] border-border bg-background/95 backdrop-blur-xl pt-24 pb-10">
+              <nav className="flex flex-col items-center gap-6">
+                {navLinks.map((link) => (
+                  <Link
+                    key={link.name}
+                    href={link.href}
+                    className="text-lg font-bold text-foreground/80 hover:text-primary transition-colors cursor-pointer"
+                  >
+                    {link.name}
+                  </Link>
+                ))}
+                <div className="flex flex-col gap-3 w-full max-w-xs mt-4">
+                  <Link href={route('login')} className="w-full">
+                    <Button variant="outline" className="w-full rounded-full border-border text-foreground hover:bg-muted font-bold">
+                        Login Siswa
+                    </Button>
+                  </Link>
+                  <Link href={route('register')} className="w-full">
+                    <Button className="w-full rounded-full bg-primary hover:bg-primary/90 font-bold">
+                        Daftar Kelas
+                    </Button>
+                  </Link>
+                </div>
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </motion.header>
+  );
+}