feat: initialize Next.js project with a comprehensive landing page structure, UI components, and assets.

2026-01-26 13:22:07 +07:00 · 2026-01-23 03:23:33 +07:00
commit c1e5db5bce
76 changed files with 10164 additions and 0 deletions
--- a/src/components/sections/hero.tsx
+++ b/src/components/sections/hero.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+import { ArrowRight, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+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-[110vh] flex flex-col items-center justify-center overflow-hidden w-full">
+      {/* Background Gradients */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 blur-[120px] rounded-full opacity-50 pointer-events-none" />
+      <div className="absolute bottom-0 right-0 w-[800px] h-[800px] bg-blue-500/5 blur-[150px] rounded-full opacity-30 pointer-events-none" />
+      
+      {/* Grid Pattern Overlay */}
+      <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" />
+
+      <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-white/5 bg-white/5 backdrop-blur-sm shadow-inner text-sm text-foreground/80 mb-6">
+            <Sparkles className="w-4 h-4 text-primary" />
+            <span>Connecting Indonesia & Japan</span>
+          </div>
+        </motion.div>
+
+        <motion.h1 
+            variants={itemVariants}
+            className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white leading-[1.1]"
+        >
+          Platform Edukasi <br />
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white/50">
+            & Budaya Jepang
+          </span>
+        </motion.h1>
+
+        <motion.p 
+            variants={itemVariants}
+            className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed"
+        >
+          Nihonbuzz adalah media yang menghadirkan konten seputar bahasa, budaya, dan gaya hidup Jepang secara informatif dan menghibur untuk generasi muda Indonesia.
+        </motion.p>
+
+        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 mt-4">
+          <Button size="lg" className="rounded-full bg-primary hover:bg-primary/90 text-white min-w-[160px] h-12 shadow-[0_0_40px_-10px_rgba(255,69,0,0.5)]">
+            Explore Services
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+          <Button size="lg" variant="outline" className="rounded-full border-white/10 hover:bg-white/5 min-w-[160px] h-12">
+            View Portfolio
+          </Button>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}