From 90a8f8d9e34309465605e0668ddee13d672c34ac Mon Sep 17 00:00:00 2001
From: anggunaruan0055-prog <anggunaruan0055@gmail.com>
Date: Wed, 29 Oct 2025 15:36:29 +0700
Subject: [PATCH] Initialize React app with main components

Initial commit of the React application structure, including components for Header, HeroSection, Features, EmpathyZones, AvatarCreator, and Footer.
---
 KASIH | 484 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 484 insertions(+)
 create mode 100644 KASIH

diff --git a/KASIH b/KASIH
new file mode 100644
index 0000000..4aabee7
--- /dev/null
+++ b/KASIH
@@ -0,0 +1,484 @@
+# Buka terminal/command prompt
+npx create-react-app karena-kita-semua-berharga
+cd karena-kita-semua-berharga
+npm start
+import React from 'react';
+import './App.css';
+import Header from './components/Header';
+import HeroSection from './components/HeroSection';
+import Features from './components/Features';
+import EmpathyZones from './components/EmpathyZones';
+import AvatarCreator from './components/AvatarCreator';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <div className="App">
+      <Header />
+      <HeroSection />
+      <Features />
+      <EmpathyZones />
+      <AvatarCreator />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
+:root {
+  --primary: #ff66b2;
+  --secondary: #9c4dff;
+  --accent: #00e5ff;
+  --dark: #1a1a2e;
+  --light: #f9f7fe;
+  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background-color: var(--dark);
+  color: var(--light);
+  overflow-x: hidden;
+}
+
+/* Header Styles */
+.header {
+  background: var(--gradient);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.logo {
+  font-size: 1.8rem;
+  font-weight: bold;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.nav ul {
+  display: flex;
+  list-style: none;
+}
+
+.nav li {
+  margin-left: 1.5rem;
+}
+
+.nav a {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+}
+
+.nav a:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Hero Section */
+.hero {
+  padding: 8rem 2rem 4rem;
+  text-align: center;
+  background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9));
+  background-size: cover;
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  margin-bottom: 1rem;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 0 20px rgba(255, 102, 178, 0.3);
+}
+
+.hero p {
+  font-size: 1.2rem;
+  max-width: 700px;
+  margin: 0 auto 2rem;
+  line-height: 1.6;
+}
+
+.cta-button {
+  display: inline-block;
+  background: var(--gradient);
+  color: white;
+  padding: 0.8rem 2rem;
+  border-radius: 30px;
+  text-decoration: none;
+  font-weight: bold;
+  margin: 0.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(255, 102, 178, 0.4);
+  border: none;
+  cursor: pointer;
+}
+
+.cta-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(255, 102, 178, 0.6);
+}
+
+/* Features Section */
+.features {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 2rem;
+  gap: 2rem;
+}
+
+.feature-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 15px;
+  padding: 1.5rem;
+  width: 300px;
+  text-align: center;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.feature-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 10px 25px rgba(255, 102, 178, 0.2);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  margin-bottom: 1rem;
+  color: var(--accent);
+}
+
+/* Section Title */
+.section-title {
+  text-align: center;
+  margin: 3rem 0 2rem;
+  font-size: 2.2rem;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Empathy Zones */
+.empathy-zones {
+  padding: 3rem 2rem;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.zones-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.zone-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 15px;
+  padding: 1.5rem;
+  width: 280px;
+  border-top: 4px solid var(--primary);
+}
+
+.zone-card:nth-child(2) {
+  border-top-color: var(--secondary);
+}
+
+.zone-card:nth-child(3) {
+  border-top-color: var(--accent);
+}
+
+/* Avatar Creator */
+.avatar-creator {
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.avatar-preview {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto 2rem;
+  background: var(--gradient);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+}
+
+.customization-options {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.option {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 10px;
+  width: 150px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.option:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Footer */
+.footer {
+  background: var(--gradient);
+  padding: 2rem;
+  text-align: center;
+  margin-top: 3rem;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.footer-links a {
+  color: white;
+  text-decoration: none;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+  
+  .nav ul {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .header {
+    flex-direction: column;
+    padding: 1rem;
+  }
+  
+  .logo {
+    margin-bottom: 0.5rem;
+  }
+}
+import React from 'react';
+
+const Header = () => {
+  return (
+    <header className="header">
+      <div className="logo">KARENA KITA SEMUA BERHARGA</div>
+      <nav className="nav">
+        <ul>
+          <li><a href="#home">Beranda</a></li>
+          <li><a href="#zones">Empathy Zones</a></li>
+          <li><a href="#avatar">Buat Avatar</a></li>
+          <li><a href="#story">Story Mode</a></li>
+          <li><a href="#community">Komunitas</a></li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
+import React from 'react';
+
+const HeroSection = () => {
+  return (
+    <section className="hero" id="home">
+      <h1>KARENA KITA SEMUA BERHARGA</h1>
+      <p>Temukan Suaramu, Tulis Ulang Ceritamu. Masuki dunia interaktif di mana setiap perempuan menemukan kekuatan, keberanian, dan suaranya.</p>
+      <div>
+        <button className="cta-button">Mulai Perjalananmu</button>
+        <button className="cta-button">Jelajahi Zona</button>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
+import React from 'react';
+
+const Features = () => {
+  const features = [
+    {
+      icon: "🧠",
+      title: "AI KKB Mentor",
+      description: "Teman virtual yang mendengarkan dan membimbing perjalanan healing-mu dengan empati dan pengertian."
+    },
+    {
+      icon: "📖", 
+      title: "Story Mode",
+      description: "Ikuti cerita inspiratif perempuan muda Indonesia dan temukan kekuatan dalam kisah mereka."
+    },
+    {
+      icon: "🌐",
+      title: "Hybrid Program", 
+      description: "Gabungkan pengalaman digital dengan aksi nyata untuk menciptakan perubahan di dunia nyata."
+    },
+    {
+      icon: "👭",
+      title: "Komunitas",
+      description: "Bergabunglah dengan sisterhood yang mendukung dan menginspirasi satu sama lain."
+    }
+  ];
+
+  return (
+    <section className="features">
+      {features.map((feature, index) => (
+        <div key={index} className="feature-card">
+          <div className="feature-icon">{feature.icon}</div>
+          <h3>{feature.title}</h3>
+          <p>{feature.description}</p>
+        </div>
+      ))}
+    </section>
+  );
+};
+
+export default Features;
+import React from 'react';
+
+const EmpathyZones = () => {
+  const zones = [
+    {
+      name: "🪞 Ruang Cermin Diri",
+      description: "Membangun rasa percaya diri melalui afirmasi positif dan refleksi personal.",
+      quote: '"Tulis kuat, aku cantik dan berharga di sini..."'
+    },
+    {
+      name: "🔊 Dinding Suara", 
+      description: "Belajar menyuarakan pendapat dan perasaan tanpa takut dihakimi."
+    },
+    {
+      name: "🌸 Taman Pemulihan",
+      description: "Ruang healing untuk memproses emosi dan menyembuhkan luka batin."
+    },
+    {
+      name: "🧠 Laboratorium Mitos",
+      description: "Mengungkap dan menantang stereotip gender yang membatasi."
+    },
+    {
+      name: "💞 Jembatan Persaudaraan", 
+      description: "Membangun solidaritas dan kolaborasi dengan perempuan lain."
+    }
+  ];
+
+  return (
+    <section className="empathy-zones" id="zones">
+      <h2 className="section-title">Empathy Zones</h2>
+      <div className="zones-container">
+        {zones.map((zone, index) => (
+          <div key={index} className="zone-card">
+            <h3>{zone.name}</h3>
+            <p>{zone.description}</p>
+            {zone.quote && <p><em>{zone.quote}</em></p>}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default EmpathyZones;
+import React, { useState } from 'react';
+
+const AvatarCreator = () => {
+  const [avatar, setAvatar] = useState({
+    outfit: 'casual',
+    color: 'pink',
+    expression: 'happy'
+  });
+
+  const options = [
+    { type: 'outfit', label: 'Outfit', values: ['casual', 'professional', 'creative'] },
+    { type: 'color', label: 'Warna', values: ['pink', 'purple', 'blue'] },
+    { type: 'expression', label: 'Ekspresi', values: ['happy', 'confident', 'thoughtful'] }
+  ];
+
+  return (
+    <section className="avatar-creator" id="avatar">
+      <h2 className="section-title">Buat Avatar-mu</h2>
+      <p>Wujudkan versi terbaik dan terberani dirimu melalui avatar digital.</p>
+      
+      <div className="avatar-preview">
+        {avatar.expression === 'happy' && '😊'}
+        {avatar.expression === 'confident' && '💪'}  
+        {avatar.expression === 'thoughtful' && '🤔'}
+      </div>
+      
+      <div className="customization-options">
+        {options.map((optionGroup) => (
+          <div key={optionGroup.type} className="option">
+            <h4>{optionGroup.label}</h4>
+            <select 
+              value={avatar[optionGroup.type]}
+              onChange={(e) => setAvatar({
+                ...avatar, 
+                [optionGroup.type]: e.target.value
+              })}
+            >
+              {optionGroup.values.map(value => (
+                <option key={value} value={value}>
+                  {value}
+                </option>
+              ))}
+            </select>
+          </div>
+        ))}
+      </div>
+      
+      <button className="cta-button">Selesai & Masuk Dunia!</button>
+    </section>
+  );
+};
+
+export default AvatarCreator;
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <div className="logo">KARENA KITA SEMUA BERHARGA</div>
+      <p>The Interactive Empathy World for Girls</p>
+      <div className="footer-links">
+        <a href="#">Tentang Kami</a>
+        <a href="#">Kebijakan Privasi</a>
+        <a href="#">Syarat & Ketentuan</a>
+        <a href="#">Kontak</a>
+        <a href="#">Blog</a>
+      </div>
+      <p>Digital Experience • Real-World Impact</p>
+      <p>© 2023 KARENA KITA SEMUA BERHARGA. All rights reserved.</p>
+    </footer>
+  );
+};
+
+export default Footer;