"Anda adalah AI Website Builder hyper-expert, master prompt engineer untuk Next.js/Tailwind. Update DAHLAH7 AGENT dari Fase 1: Tambahkan Batch 1 (20 tools Writing & Content) secara modular. Integrasikan ke /lib/tools.js array append {id: 'tool-[1-20]', name, desc:150kata, category:'Writing & Content', inputs: Yup schema {topic: string().required().min(10)}, outputs:{type:'text'}, api:'https://api-inference.huggingface.co/models/gpt2' (env HF_TOKEN), fallback:'/lib/templates/tool-[id].json'}. Buat component /components/tools/Tool[ID].tsx (Shadcn: Form, Slider, Select, Button, Textarea, Badge, Progress). UI: Sidebar fixed w-80 p-4 bg-slate-800 (Tone Select 10 ops: Formal-Casual-Inspirational etc., Length Slider 100-5000 default1000 step100, Keywords Chips max10 auto-suggest via simple split), Main flex-1: Input Textarea rows-6 placeholder='Enter topic...' charCount live, Gen Button gradient blue px-8 py-3 loading spinner (TanStack Query mutate est 5s), Output div min-h-64 p-4 bg-white/5 rounded-xl editable (Prism highlight if code, wordCount badge green), Actions bar flex gap-4 mt-4: Copy icon clipboard, Download jsPDF A4 w/watermark 'DAHLAH7 AGENT', Share button URL w/params ?tool=id&input=encoded, Feedback Dialog stars 1-5 + comment Firestore upsert. History Accordion below (localStorage get 10 items, delete btn). Related Carousel Swiper 5 tools same cat random. Etika: Watermark Generated by DAHLAH7 AGENT – Educational Only, biasCheck useEffect regex /hate|racism|discrim/i warn toast yellow. Optimasi: Dynamic import Tool[ID], Suspense fallback skeleton, useMemo inputs. Update /tools page: Masonry grid append 20 cards (img placeholder Unsplash AI 16x20, badge category blue, rating 4.8 stars, 'Try Now' link /tools/[id]), Fuse search rebuild, infinite load threshold 0.2. Help Accordion 10 langkah + disclaimer modal Checkbox 'I agree to ethical use'. Testing: Cypress /e2e/tools-batch1.cy.ts (20 tests: valid gen, invalid toast, export PDF verify text, error fallback). Output: Updated code full (git commit 'feat: batch1-writing'), Vercel deploy link, bundle size report <300KB add, Lighthouse PDF.

Tools Batch 1 – Kategori: Writing & Content (Tools 1-20):

1.
AI Article Writer (ID: tool-1): Desc: 'Buat artikel long-form SEO-optimized hingga 10.000 kata dengan struktur H1-H3 otomatis, integrasi data stats (sim 90% akurasi), readability Flesch 60-80, jarak plagiarisme <20% via paraphrase internal, cocok untuk blog/news/essay. Gunakan model HuggingFace gpt2-medium untuk gen, fallback template JSON dengan outline pre-filled. Fitur: Auto-suggest headings berdasarkan keywords, export siap Medium/WordPress dengan meta YAML.' (148 kata). Cara: 1. Akses /tools/tool-1. 2. Baca disclaimer modal, checkbox agree. 3. Masukkan topik di textarea input (min 10 char). 4. Atur slider panjang 100-10000 kata. 5. Pilih dropdown tone (10 ops: Formal, Casual, dll.). 6. Tambah keywords chips (max 10, auto-suggest). 7. Centang advanced: Include stats/data, Embed image placeholders Unsplash. 8. Klik Gen (progress bar 0-100% est 30s). 9. Edit output inline (word count live). 10. Gunakan actions: Copy, Download DOCX w/TOC, Share, Rate. Input Contoh: Topik 'Manfaat AI Tools Gratis untuk Startup', 1500 kata, Tone Engaging, Keywords 'startup, AI, produktivitas'. Output Sample: '10 Manfaat AI Tools Gratis untuk Startup di Era DigitalIntro: Bayangkan hemat 15 jam/minggu tanpa biaya – DAHLAH7 AGENT tawarkan 200+ tools. Manfaat 1: Tingkatkan Produktivitas – AI tulis artikel cepat, stats: 90% user hemat waktu (sumber: Forrester). Auto-generate content SEO.Integrasi keywords density 1.5%.Manfaat 2: Inovasi MurahStartup kecil akses AI canggih gratis... [Lanjut 1200 kata: H2 Coding Tools desc benefits, H2 Marketing, Conclusion CTA subscribe, Image: ]. Readability: 72, SEO Score: 85%, Word Count: 1500. Generated by DAHLAH7 AGENT – Educational Only' (250 kata). Opsi Advanced: 1. Voice input (Web Speech API). 2. Template Blog/News/Academic. 3. A/B generate 2 versi compare diff highlight. 4. Citations auto APA/MLA. 5. Collaboration mode (Yjs real-time edit sim). 6. SEO preview density checker. Errors: 1. Input kosong: Toast 'Topik diperlukan min 10 char'. 2. API timeout (>10s): Fallback template + 'Mode offline aktif'. 3. Keywords >10: Auto-trim + 'Maksimal 10, sisanya diabaikan'. 4. Output bias detect: Warn 'Potensi bias netral – review manual'.

2.
Blog Post Generator (ID: tool-2): Desc: 'Generate draft blog WordPress-ready dengan hooks engaging, subheadings H2-H4, CTA calls-to-action, simulasi Yoast SEO meta (title, slug kebab-case, desc 155 char), link internal suggest 3 related, series threading untuk multi-post. Model: distilgpt2, fallback JSON outline + filler text. Fitur: Preview tema visual (dark/light), export MD/HTML dengan frontmatter YAML slug/date.' (142 kata). Cara: 1. Akses /tools/tool-2. 2. Setuju disclaimer. 3. Input judul blog (5-100 char). 4. Dropdown niche (20+ ops: Tech, Health, Business). 5. Select format (Listicle, How-to, Opinion). 6. Slider kata 300-3000. 7. Custom tone textarea (opsional). 8. Advanced: Affiliates links placeholder, Internal suggest. 9. Gen outline dulu (2s), lalu full. 10. Edit drag-drop sections, export. Input Contoh: Judul 'Cara Build Website AI Gratis dengan Next.js', Format How-to, 800 kata, Niche Tech. Output Sample: '---
title: Cara Build Website AI Gratis dengan Next.js
slug: cara-build-website-ai-gratis-nextjs
date: 2025-10-01
description: Pelajari step-by-step build situs seperti DAHLAH7 – gratis & cepat.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ai Content Crafters Suite
-emoji: 🌖
+title: AI Content Crafters Suite ✨
 colorFrom: purple
-colorTo: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,221 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Content Crafters Suite</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            overflow-x: hidden;
+        }
+        #vanta-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .tool-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <div id="vanta-bg"></div>
+    
+    <header class="relative z-10">
+        <div class="container mx-auto px-6 py-8">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="pen-tool" class="text-blue-400"></i>
+                    <h1 class="text-2xl font-bold gradiant-text">AI Content Crafters</h1>
+                </div>
+                <nav class="hidden md:flex space-x-8">
+                    <a href="#" class="text-blue-300 hover:text-white transition">Home</a>
+                    <a href="#" class="hover:text-white transition">Tools</a>
+                    <a href="#" class="hover:text-white transition">About</a>
+                    <a href="#" class="hover:text-white transition">Contact</a>
+                </nav>
+                <button class="md:hidden">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="relative z-10">
+        <section class="container mx-auto px-6 py-20 text-center">
+            <h1 class="text-5xl md:text-6xl font-bold mb-6">
+                <span class="gradient-text">Supercharge</span> Your Content Creation
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
+                20+ AI-powered tools for writers, marketers, and creators. Generate high-quality content in seconds.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium transition transform hover:scale-105">
+                    Explore Tools
+                </button>
+                <button class="border border-blue-400 text-blue-300 hover:bg-blue-900/30 px-8 py-4 rounded-lg font-medium transition">
+                    How It Works
+                </button>
+            </div>
+        </section>
+
+        <section class="container mx-auto px-6 py-16">
+            <h2 class="text-3xl font-bold text-center mb-12">Featured Writing Tools</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Tool Card 1 -->
+                <div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-blue-400">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center">
+                            <i data-feather="edit-3" class="text-blue-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold ml-4">AI Article Writer</h3>
+                    </div>
+                    <p class="text-gray-300 mb-6">Generate SEO-optimized long-form articles up to 10,000 words with automatic headings and structure.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-blue-300">Writing & Content</span>
+                        <button class="text-blue-400 hover:text-blue-300 flex items-center">
+                            Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Tool Card 2 -->
+                <div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-blue-400">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center">
+                            <i data-feather="file-text" class="text-purple-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold ml-4">Blog Post Generator</h3>
+                    </div>
+                    <p class="text-gray-300 mb-6">Create WordPress-ready blog drafts with engaging hooks, subheadings, and SEO metadata.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-purple-300">Writing & Content</span>
+                        <button class="text-purple-400 hover:text-purple-300 flex items-center">
+                            Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Tool Card 3 -->
+                <div class="tool-card bg-gray-800/70 backdrop-blur-lg rounded-xl p-6 transition duration-300 border border-gray-700 hover:border-blue-400">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center">
+                            <i data-feather="type" class="text-green-400"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold ml-4">SEO Meta Creator</h3>
+                    </div>
+                    <p class="text-gray-300 mb-6">Generate perfect SEO titles and descriptions optimized for click-through rates.</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-green-300">SEO & Marketing</span>
+                        <button class="text-green-400 hover:text-green-300 flex items-center">
+                            Try Now <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="container mx-auto px-6 py-16 bg-gray-800/40 rounded-xl my-12">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-6">Why Choose Our AI Tools?</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
+                    <div class="p-6 rounded-lg">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-900/20 flex items-center justify-center">
+                            <i data-feather="zap" class="text-blue-400 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Lightning Fast</h3>
+                        <p class="text-gray-300">Generate content in seconds, not hours</p>
+                    </div>
+                    <div class="p-6 rounded-lg">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-900/20 flex items-center justify-center">
+                            <i data-feather="edit" class="text-purple-400 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Easy to Use</h3>
+                        <p class="text-gray-300">Intuitive interfaces anyone can master</p>
+                    </div>
+                    <div class="p-6 rounded-lg">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-900/20 flex items-center justify-center">
+                            <i data-feather="lock" class="text-green-400 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">Secure & Private</h3>
+                        <p class="text-gray-300">Your data never leaves your browser</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="relative z-10 bg-gray-900/80 border-t border-gray-800 mt-20">
+        <div class="container mx-auto px-6 py-12">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">AI Content Crafters</h3>
+                    <p class="text-gray-400">Your all-in-one solution for AI-powered content creation.</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Tools</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Article Writer</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Blog Generator</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">SEO Meta Creator</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">API</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Connect</h3>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="github"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-blue-300 transition"><i data-feather="linkedin"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>© 2023 AI Content Crafters. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Vanta.js globe background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x111827,
+            size: 0.8
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
 </html>