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 ( +
+
+ + + + +
+ ); +} + +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 ( +
+
KARENA KITA SEMUA BERHARGA
+ +
+ ); +}; + +export default Header; +import React from 'react'; + +const HeroSection = () => { + return ( +
+

KARENA KITA SEMUA BERHARGA

+

Temukan Suaramu, Tulis Ulang Ceritamu. Masuki dunia interaktif di mana setiap perempuan menemukan kekuatan, keberanian, dan suaranya.

+
+ + +
+
+ ); +}; + +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 ( +
+ {features.map((feature, index) => ( +
+
{feature.icon}
+

{feature.title}

+

{feature.description}

+
+ ))} +
+ ); +}; + +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 ( +
+

Empathy Zones

+
+ {zones.map((zone, index) => ( +
+

{zone.name}

+

{zone.description}

+ {zone.quote &&

{zone.quote}

} +
+ ))} +
+
+ ); +}; + +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 ( +
+

Buat Avatar-mu

+

Wujudkan versi terbaik dan terberani dirimu melalui avatar digital.

+ +
+ {avatar.expression === 'happy' && '😊'} + {avatar.expression === 'confident' && '💪'} + {avatar.expression === 'thoughtful' && '🤔'} +
+ +
+ {options.map((optionGroup) => ( +
+

{optionGroup.label}

+ +
+ ))} +
+ + +
+ ); +}; + +export default AvatarCreator; +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer;