Upload 26 files

README.md

@@ -1,12 +1,36 @@
----
-title: Warisan Nusantara
-emoji: 🏆
-colorFrom: pink
-colorTo: yellow
-sdk: docker
-pinned: false
-license: apache-2.0
-app_port: 3000
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.ts

@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
+const nextConfig: NextConfig = {
+  images: {
+    domains: ['*'],
+    dangerouslyAllowSVG: true,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*',
+      },
+    ],
+  },
+  output: 'standalone', 
+  
+  experimental: {
+      serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "budaya-indonesia",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/inference": "^2.8.1",
+    "framer-motion": "^11.11.17",
+    "next": "15.0.3",
+    "openai": "^4.73.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/api/generate-description/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { OpenAI } from "openai";
+import { cultures } from '@/data/cultures';
+
+const client = new OpenAI({
+  baseURL: "https://api-inference.huggingface.co/v1/",
+  apiKey: process.env.NEXT_PUBLIC_HUGGINGFACE_API_KEY,
+});
+
+export async function POST(request: Request) {
+  type RequestBody = {
+    cultureName: typeof cultures[number];
+  };
+
+  const body = await request.json() as RequestBody;
+  const { cultureName } = body;
+
+  try {
+    const chatCompletion = await client.chat.completions.create({
+      model: "meta-llama/Llama-3.1-70B-Instruct",
+      messages: [
+        {
+          role: "system",
+          content: "You are an expert in Indonesian culture. Provide detailed, accurate information in Indonesian language."
+        },
+        {
+          role: "user",
+          content: `Jelaskan tentang budaya Indonesia "${cultureName}" dalam 2-3 paragraf yang informatif. Berikan informasi tentang sejarah, makna, dan karakteristik uniknya.`
+        }
+      ],
+      max_tokens: 500,
+      temperature: 0.7,
+    });
+
+    const description = chatCompletion.choices[0]?.message?.content || "";
+    return NextResponse.json({ description });
+  } catch (error) {
+    console.error("Error details:", error);
+    return NextResponse.json({ error: "Failed to generate description" }, { status: 500 });
+  }
+}

src/app/api/generate-image/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const { prompt } = await request.json();
+
+  try {
+    const response = await fetch(
+      "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-3.5-large",
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.NEXT_PUBLIC_HUGGINGFACE_API_KEY}`,
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+        body: JSON.stringify({ 
+          inputs: prompt,
+          parameters: {
+            negative_prompt: "blurry, bad quality, distorted",
+            num_inference_steps: 30,
+            guidance_scale: 7.5,
+          }
+        }),
+      }
+    );
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const imageBlob = await response.blob();
+    const arrayBuffer = await imageBlob.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const base64Image = buffer.toString('base64');
+    
+    const contentType = response.headers.get('content-type') || 'image/jpeg';
+    
+    return NextResponse.json({ 
+      imageUrl: `data:${contentType};base64,${base64Image}`,
+      success: true 
+    });
+  } catch (error) {
+    console.error('Image generation error:', error);
+    return NextResponse.json({ 
+      error: 'Failed to generate image',
+      success: false,
+    }, { status: 500 });
+  }
+} 

src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/app/layout.tsx

@@ -0,0 +1,77 @@
+import { Logo } from '@/components/Logo';
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Warisan Nusantara | Ragam Warisan Budaya Indonesia",
+  description: "Jelajahi keberagaman warisan budaya Indonesia, dari seni tradisional, kuliner khas, hingga adat istiadat yang memperkaya Nusantara.",
+  keywords: "budaya indonesia, warisan budaya, seni tradisional, kuliner indonesia, adat istiadat",
+  icons: {
+    icon: [
+      { 
+        url: 'data:image/svg+xml;base64,' + btoa(`
+          <svg width="32" height="32" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="512" height="512" fill="#DC2626"/>
+            <path d="M256 48 C384 48, 464 128, 464 256 C464 384, 384 464, 256 464 C128 464, 48 384, 48 256 C48 128, 128 48, 256 48Z" stroke="white" stroke-width="24" fill="none"/>
+            <circle cx="256" cy="176" r="48" fill="white" opacity="0.95"/>
+            <circle cx="336" cy="256" r="48" fill="white" opacity="0.95"/>
+            <circle cx="256" cy="336" r="48" fill="white" opacity="0.95"/>
+            <circle cx="176" cy="256" r="48" fill="white" opacity="0.95"/>
+            <circle cx="256" cy="256" r="32" fill="white"/>
+            <path d="M256 88 C344 88, 424 168, 424 256 C424 344, 344 424, 256 424 C168 424, 88 344, 88 256 C88 168, 168 88, 256 88Z" stroke="white" stroke-width="8" fill="none" opacity="0.6"/>
+          </svg>
+        `),
+        sizes: 'any',
+        type: 'image/svg+xml'
+      }
+    ]
+  },
+  openGraph: {
+    title: "Warisan Nusantara",
+    description: "Menjelajahi Ragam Warisan Budaya Indonesia",
+    locale: "id_ID",
+    type: "website",
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'Warisan Nusantara'
+      }
+    ]
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="id">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <nav className="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-sm z-50 border-b border-red-100">
+          <div className="max-w-4xl mx-auto px-4 py-3 flex items-center gap-3">
+            <Logo className="text-red-600" />
+            <span className="font-bold text-red-800 text-lg">Warisan Nusantara</span>
+          </div>
+        </nav>
+        <div className="pt-16">
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { useState } from 'react';
+import { cultures } from '@/data/cultures';
+import { generateDescription, generateImage } from '@/services/ai';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function Home() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const [culture, setCulture] = useState<{
+    name: string;
+    description: string;
+    imageUrl: string;
+  } | null>(null);
+
+  const generateRandomCulture = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const randomCulture = cultures[Math.floor(Math.random() * cultures.length)];
+      
+      const [description, imageData] = await Promise.all([
+        generateDescription(randomCulture),
+        generateImage(`Indonesian traditional culture ${randomCulture}, professional photography style, high quality, detailed, 4k resolution`)
+      ]);
+
+      if (!imageData || !imageData.imageUrl) {
+        throw new Error('Failed to generate image');
+      }
+
+      setCulture({
+        name: randomCulture,
+        description: description || '',
+        imageUrl: imageData.imageUrl
+      });
+    } catch (error) {
+      console.error('Error:', error);
+      setError('Failed to generate content. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen p-8 bg-gradient-to-br from-orange-100 to-red-100">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-12">
+          <motion.h1 
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-5xl font-bold mb-3 text-red-800"
+          >
+            Warisan Nusantara
+          </motion.h1>
+          <motion.p
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="text-xl text-red-700/80"
+          >
+            Menjelajahi Ragam Warisan Budaya Indonesia
+          </motion.p>
+        </div>
+        
+        <motion.button
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          onClick={generateRandomCulture}
+          disabled={loading}
+          className="w-full max-w-md mx-auto block px-6 py-3 bg-red-600 text-white rounded-lg shadow-lg hover:bg-red-700 transition-colors disabled:bg-gray-400"
+        >
+          {loading ? (
+            <div className="flex items-center justify-center">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white mr-2"></div>
+              Memuat...
+            </div>
+          ) : (
+            'Jelajahi Budaya'
+          )}
+        </motion.button>
+
+        {error && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="mt-4 p-4 bg-red-100 text-red-700 rounded-lg"
+          >
+            {error}
+          </motion.div>
+        )}
+
+        <AnimatePresence>
+          {culture && (
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="mt-12 bg-white rounded-xl shadow-xl overflow-hidden"
+            >
+              <div className="relative h-[400px] w-full cursor-pointer" onClick={() => setShowPreview(true)}>
+                {culture.imageUrl && (
+                  <img
+                    src={culture.imageUrl}
+                    alt={culture.name}
+                    className="w-full h-full object-contain"
+                    onError={(e) => {
+                      console.error('Image failed to load');
+                      e.currentTarget.src = '/placeholder-image.jpg';
+                    }}
+                  />
+                )}
+                <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition-all duration-300 flex items-center justify-center">
+                  <span className="text-white opacity-0 hover:opacity-100 transition-opacity duration-300">
+                    Klik untuk memperbesar
+                  </span>
+                </div>
+              </div>
+              <div className="p-6">
+                <h2 className="text-2xl font-bold mb-4 text-red-800">
+                  {culture.name}
+                </h2>
+                <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">
+                  {culture.description}
+                </p>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <AnimatePresence>
+          {showPreview && culture && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4"
+              onClick={() => setShowPreview(false)}
+            >
+              <motion.div
+                initial={{ scale: 0.9 }}
+                animate={{ scale: 1 }}
+                exit={{ scale: 0.9 }}
+                className="relative max-w-[90vw] max-h-[90vh]"
+              >
+                <img
+                  src={culture.imageUrl}
+                  alt={culture.name}
+                  className="max-w-full max-h-[90vh] object-contain"
+                />
+                <button
+                  className="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-70"
+                  onClick={() => setShowPreview(false)}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </main>
+  );
+}

src/components/Logo.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface LogoProps {
+  className?: string;
+  size?: number;
+}
+
+export const Logo: React.FC<LogoProps> = ({ className = "", size = 40 }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {/* Background */}
+      <rect width="512" height="512" fill="currentColor"/>
+      
+      {/* Ornamental Border - Inspired by Indonesian Batik */}
+      <path 
+        d="M256 48
+           C384 48, 464 128, 464 256
+           C464 384, 384 464, 256 464
+           C128 464, 48 384, 48 256
+           C48 128, 128 48, 256 48Z" 
+        stroke="white" 
+        strokeWidth="24"
+        fill="none"
+      />
+      
+      {/* Central Pattern - Inspired by Kawung */}
+      <circle cx="256" cy="176" r="48" fill="white" opacity="0.95"/>
+      <circle cx="336" cy="256" r="48" fill="white" opacity="0.95"/>
+      <circle cx="256" cy="336" r="48" fill="white" opacity="0.95"/>
+      <circle cx="176" cy="256" r="48" fill="white" opacity="0.95"/>
+      
+      {/* Center Circle */}
+      <circle cx="256" cy="256" r="32" fill="white"/>
+      
+      {/* Decorative Lines */}
+      <path
+        d="M256 88
+           C344 88, 424 168, 424 256
+           C424 344, 344 424, 256 424
+           C168 424, 88 344, 88 256
+           C88 168, 168 88, 256 88Z"
+        stroke="white"
+        strokeWidth="8"
+        fill="none"
+        opacity="0.6"
+      />
+    </svg>
+  );
+}; 

src/data/cultures.ts

@@ -0,0 +1,360 @@
+export const cultures = [
+  // Aceh
+  "Tari Saman dari Aceh",
+  "Tari Seudati dari Aceh",
+  "Rapa'i Geleng dari Aceh",
+  "Didong dari Gayo",
+  
+  // Sumatera Utara
+  "Tari Tor-Tor dari Batak",
+  "Gordang Sambilan dari Mandailing",
+  "Ulos dari Batak",
+  "Tari Serampang Dua Belas",
+  
+  // Sumatera Barat
+  "Tari Piring dari Minangkabau",
+  "Randai dari Minangkabau",
+  "Songket Minangkabau",
+  "Silat Minangkabau",
+  
+  // Riau
+  "Tari Zapin Melayu",
+  "Gurindam Dua Belas",
+  "Tenun Siak",
+  
+  // Jambi
+  "Tari Sekapur Sirih",
+  "Tenun Batanghari",
+  "Festival Danau Kerinci",
+  
+  // Sumatera Selatan
+  "Tari Tanggai",
+  "Songket Palembang",
+  "Rumah Limas",
+  
+  // Bengkulu
+  "Tari Andun",
+  "Kerajinan Kulit Kayu",
+  
+  // Lampung
+  "Tari Melinting",
+  "Kain Tapis",
+  "Sekura dari Lampung Barat",
+  
+  // Jawa Barat
+  "Angklung dari Jawa Barat",
+  "Wayang Golek Sunda",
+  "Tari Jaipong",
+  "Pencak Silat Sunda",
+  "Kecapi Suling",
+  "Tari Merak",
+  
+  // Jakarta
+  "Tari Topeng Betawi",
+  "Ondel-ondel",
+  "Lenong Betawi",
+  "Kerak Telor",
+  
+  // Jawa Tengah
+  "Wayang Kulit dari Jawa",
+  "Tari Serimpi",
+  "Tari Gambyong",
+  "Karawitan Jawa",
+  "Batik Solo",
+  "Batik Pekalongan",
+  
+  // Yogyakarta
+  "Tari Bedhaya",
+  "Wayang Wong",
+  "Batik Yogyakarta",
+  "Sekaten",
+  
+  // Jawa Timur
+  "Reog Ponorogo",
+  "Tari Remo",
+  "Ludruk",
+  "Karapan Sapi dari Madura",
+  "Batik Madura",
+  
+  // Bali
+  "Tari Pendet dari Bali",
+  "Tari Kecak dari Bali",
+  "Tari Legong",
+  "Barong dan Rangda",
+  "Wayang Kulit Bali",
+  "Gamelan Bali",
+  
+  // Nusa Tenggara Barat
+  "Tari Gandrung",
+  "Tenun Songket Lombok",
+  "Peresean",
+  
+  // Nusa Tenggara Timur
+  "Tari Caci dari Manggarai",
+  "Tenun Ikat Flores",
+  "Sasando dari Rote",
+  
+  // Kalimantan Barat
+  "Tari Monong",
+  "Dayak Gawai",
+  
+  // Kalimantan Tengah
+  "Tari Mandau",
+  "Upacara Tiwah",
+  
+  // Kalimantan Selatan
+  "Tari Baksa Kembang",
+  "Sasirangan",
+  
+  // Kalimantan Timur
+  "Tari Gantar",
+  "Upacara Kwangkay",
+  
+  // Kalimantan Utara
+  "Tari Kancet Ledo",
+  "Blontang",
+  
+  // Sulawesi Utara
+  "Tari Maengket",
+  "Tari Kabasaran",
+  "Kolintang",
+  
+  // Sulawesi Tengah
+  "Tari Moduai",
+  "Balia",
+  
+  // Sulawesi Selatan
+  "Tari Pakarena",
+  "Tenun Sutera Bugis",
+  "Ma'badong",
+  
+  // Sulawesi Tenggara
+  "Tari Lariangi",
+  "Tenun Bomba",
+  
+  // Gorontalo
+  "Tari Saronde",
+  "Dana-dana",
+  
+  // Maluku
+  "Tari Cakalele",
+  "Tari Lenso",
+  "Pela Gandong",
+  
+  // Maluku Utara
+  "Tari Legu Salai",
+  "Tari Soya-soya",
+  
+  // Papua Barat
+  "Tari Yospan",
+  "Ukiran Asmat",
+  
+  // Papua
+  "Tari Selamat Datang",
+  "Koteka",
+  "Honai",
+  
+  // Kerajinan Tradisional
+  "Batik",
+  "Tenun Ikat",
+  "Songket",
+  "Anyaman Rotan",
+  "Ukiran Kayu",
+  
+  // Seni Musik
+  "Gamelan Jawa",
+  "Talempong",
+  "Tifa",
+  "Rebana",
+  
+  // Seni Pertunjukan
+  "Ketoprak",
+  "Randai",
+  "Mamanda",
+  "Debus",
+  
+  // Upacara Adat
+  "Ngaben di Bali",
+  "Kasada di Tengger",
+  "Rambu Solo di Toraja",
+  "Seren Taun di Sunda",
+
+  "Tari Saman dari Aceh",
+  "Tari Seudati dari Aceh",
+  "Tari Ratoh Jaroe",
+  "Tari Ranup Lampuan",
+  "Tari Likok Pulo",
+  "Tari Tarek Pukat",
+  "Tari Rapa'i Geleng",
+  "Tari Dampeng",
+  "Tari Laweut",
+  "Tari Guel",
+  
+  // Musik Tradisional Aceh
+  "Rapa'i dari Aceh",
+  "Serune Kalee",
+  "Geundrang",
+  "Canang",
+  "Rebana Aceh",
+  
+  // Pakaian Tradisional Aceh
+  "Pakaian Ulee Balang",
+  "Pakaian Daro Baro",
+  "Pakaian Linto Baro",
+  
+  // Rumah Adat Aceh
+  "Rumoh Aceh",
+  "Krong Bade",
+  
+  // Senjata Tradisional Aceh
+  "Rencong",
+  "Peudeung",
+  "Siwah",
+  
+  // Makanan Tradisional Aceh
+  "Mie Aceh",
+  "Kuah Pliek U",
+  "Ayam Tangkap",
+  "Kuah Beulangong",
+  "Sie Reuboh",
+  "Martabak Aceh",
+  "Timphan",
+  "Kue Adee",
+  
+  // Kerajinan Tradisional Aceh
+  "Kerawang Gayo",
+  "Bordiran Aceh",
+  "Anyaman Pandan",
+  "Kerajinan Kuningan",
+  
+  // Upacara Adat Aceh
+  "Peusijuek",
+  "Tueng Dara Baro",
+  "Peutron Aneuk",
+  
+  // SUMATERA UTARA
+  // Tarian Tradisional Batak
+  "Tari Tor-Tor",
+  "Tari Sigale-gale",
+  "Tari Mogang",
+  "Tari Tembut-tembut",
+  "Tari Sipitu Cawan",
+  "Tari Serampang Dua Belas",
+  "Tari Gubang",
+  "Tari Endeng-endeng",
+  
+  // Musik Tradisional Batak
+  "Gondang Sabangunan",
+  "Gordang Sambilan",
+  "Hasapi",
+  "Garantung",
+  "Sarune",
+  "Taganing",
+  
+  // Pakaian Tradisional Batak
+  "Ulos Batak",
+  "Ulos Ragi Hotang",
+  "Ulos Ragi Idup",
+  "Ulos Sadum",
+  "Ulos Mangiring",
+  "Ulos Bintang Maratur",
+  
+  // Rumah Adat Batak
+  "Rumah Bolon",
+  "Rumah Gorga",
+  "Sopo Bolon",
+  
+  // Senjata Tradisional Batak
+  "Piso Gaja Dompak",
+  "Piso Halasan",
+  "Podang",
+  
+  // Makanan Tradisional Batak
+  "Arsik",
+  "Saksang",
+  "Sangsang",
+  "Na Niura",
+  "Dengke Mas Na Niura",
+  "Sambal Andaliman",
+  "Na Tinombur",
+  
+  // Kerajinan Tradisional Batak
+  "Tenun Ulos",
+  "Gorga",
+  "Ukiran Batak",
+  "Anyaman Pandan",
+  
+  // Upacara Adat Batak
+  "Mangulosi",
+  "Martutuaek",
+  "Mangongkal Holi",
+  "Manulangi",
+  "Mamongoti",
+  
+  // Tradisi Batak
+  "Dalihan Na Tolu",
+  "Marga System",
+  "Partuturan",
+  
+  // Alat Musik Tradisional Batak
+  "Gondang",
+  "Hasapi",
+  "Sulim",
+  "Sarune",
+  "Ogung",
+  
+  // MINANGKABAU (SUMATERA BARAT)
+  // Tarian Tradisional
+  "Tari Piring",
+  "Tari Payung",
+  "Tari Pasambahan",
+  "Tari Indang",
+  "Tari Galombang",
+  "Tari Rantak",
+  
+  // Musik Tradisional
+  "Talempong",
+  "Saluang",
+  "Rabab",
+  "Gandang Tasa",
+  
+  // Pakaian Tradisional
+  "Baju Kurung",
+  "Baju Batabue",
+  "Tengkuluk",
+  "Suntiang",
+  
+  // Rumah Adat
+  "Rumah Gadang",
+  "Rangkiang",
+  
+  // Seni Pertunjukan
+  "Randai",
+  "Silek",
+  "Saluang Dendang",
+  "Bagurau",
+  
+  // Makanan Tradisional
+  "Rendang",
+  "Sate Padang",
+  "Dendeng Balado",
+  "Gulai Kapau",
+  "Lamang",
+  "Sala Lauak",
+  
+  // Kerajinan Tradisional
+  "Songket Minang",
+  "Sulaman Benang Emas",
+  "Ukiran Minang",
+  
+  // Upacara Adat
+  "Batagak Penghulu",
+  "Baralek",
+  "Turun Mandi",
+  "Sunat Rasul",
+  
+  // Tradisi
+  "Matrilineal",
+  "Mamak-Kamanakan",
+  "Marantau",
+]; 

src/services/ai.ts

@@ -0,0 +1,30 @@
+export async function generateDescription(cultureName: string) {
+  const response = await fetch('/api/generate-description', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ cultureName }),
+  });
+  
+  const data = await response.json();
+  return data.description;
+}
+
+export async function generateImage(prompt: string): Promise<{ imageUrl: string }> {
+  const response = await fetch('/api/generate-image', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ prompt }),
+  });
+  
+  const data = await response.json();
+  
+  if (!response.ok) {
+    throw new Error(data.error || 'Failed to generate image');
+  }
+  
+  return data;
+} 

src/types/culture.ts

@@ -0,0 +1,5 @@
+export interface Culture {
+  name: string;
+  description: string;
+  imageUrl: string;
+} 

tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

vercel.json

@@ -0,0 +1,7 @@
+{
+    "buildCommand": "next build",
+    "devCommand": "next dev",
+    "installCommand": "npm install",
+    "framework": "nextjs",
+    "outputDirectory": ".next"
+  }