Chatbot AI
-Ajukan pertanyaan atau mulai percakapan dengan AI kami.
-
-
- {messages.map((msg, index) => (
-
-
- )}
- {activeDashboardSection === 'scheduling' && (
-
-
- )}
- {activeDashboardSection === 'monitoring' && (
-
-
- {msg.text}
+
+ {/* Hero Section */}
+
+
-
- )}
- {activeDashboardSection === 'imageGen' && (
-
+
- {isChatLoading && + Kelola Acara dan Jual Tiket Tanpa Ribet +
++ Platform manajemen acara all-in-one untuk konser, seminar, dan workshop Anda. Fokus pada acara, kami urus sisanya. +
+ - ))} - -Mengetik...
}
-
- setChatInput(e.target.value)}
- onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
- autoFocus
- />
-
-
- Buat Gambar AI
-Masukkan deskripsi untuk membuat gambar.
-
- setImagePrompt(e.target.value)}
- />
-
- {isImageLoading &&
- Membuat gambar...
}
- {generatedImageUrl && (
-
- 
-
- )}
-
-
-
-
- Penjadwalan Konten
-Kelola konten yang akan dipublikasikan di masa mendatang.
-
-
-
- -
-
- - Postingan Blog: "Masa Depan Otomatisasi" - 2025-08-15 10:00 AM - -
- - Gambar AI: "Pemandangan Kota Futuristik" - 2025-08-18 02:30 PM - -
Pemantauan & Analisis Tren
-Pantau kinerja konten Anda dan temukan tren viral berikutnya.
- -
-
-
- )}
- {activeDashboardSection === 'profile' && (
-
-
Kinerja Konten Saya
-
-
+
-
-
- Total Penayangan
-1.2M
-↑15% bulan ini
-
-
- Total Suka
-89K
-↑12% bulan ini
-
-
- Pengikut Baru
-5,210
-↑8% bulan ini
+
+ {[
+ ['500+', 'Acara Dikelola'],
+ ['100k+', 'Tiket Terjual'],
+ ['99%', 'Uptime Server'],
+ ['24/7', 'Dukungan Pelanggan'],
+ ].map(([angka, label], idx) => (
+
+
+ ))}
{angka}
+{label}
+
-
-
- )}
- {activeDashboardSection === 'notifications' && (
- Konten yang Sedang Tren
-
- {/* Konten tren akan diisi oleh data dari API */}
-
- Fitur ini sedang dalam pengembangan.
-Notifikasi
-Pembaruan terkini tentang akun dan konten Anda.
--
- {/* Notifikasi akan diisi oleh data dari API */}
-
- Postingan Anda "Masa Depan Otomatisasi" telah dijadwalkan. -
- Selamat! Anda mendapatkan 50 pengikut baru minggu ini. -
Pengaturan Profil
-Kelola informasi akun dan koneksi media sosial Anda.
-
-
-
-
-
-
-
-
-
-
-
Autentikasi Media Sosial
-
-
+
+
+
);
-}
+};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/LandingPage.js b/src/LandingPage.js
new file mode 100644
index 0000000..5c78c7c
--- /dev/null
+++ b/src/LandingPage.js
@@ -0,0 +1,409 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import formatRupiah from './helpers/formatRupiah';
+
+export default function App() {
+ const { organizationId } = useParams();
+ const [organization, setOrganization] = useState([]);
+ const [tickets, setTickets] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [showModal, setShowModal] = useState(false);
+ const [modalTab, setModalTab] = useState("login"); // "login" or "register"
+ const [selectedTicket, setSelectedTicket] = useState(null);
+ const [formData, setFormData] = useState({});
+
+ useEffect(() => {
+ if (!organizationId) {
+ setError("Parameter organization tidak ditemukan di URL.");
+ setLoading(false);
+ return;
+ }
+
+ fetch(
+ `https://auto.apps.kediritechnopark.com/webhook/mayagen/organization?organization=${organizationId}`
+ )
+ .then((res) => {
+ if (!res.ok) throw new Error("Gagal mengambil data tiket");
+ return res.json();
+ })
+ .then((data) => {
+ setTickets(data[0].tickets);
+ setOrganization(data[0]);
+ setLoading(false);
+ })
+ .catch((err) => {
+ setError(err.message);
+ setLoading(false);
+ });
+ }, [organizationId]);
+
+ // Dummy login handler
+ function handleLogin(e) {
+ e.preventDefault();
+ // Kamu bisa validasi di sini
+ setIsLoggedIn(true);
+ }
+
+ // Dummy register handler
+ function handleRegister(e) {
+ e.preventDefault();
+ // Kamu bisa validasi dan buat user di sini
+ setIsLoggedIn(true);
+ }
+
+ // Form tiket submit
+ function handleSubmitTicket(e) {
+ e.preventDefault();
+ alert(`Form tiket untuk ${selectedTicket.nama_tiket} submitted:\n` + JSON.stringify(formData, null, 2));
+ setShowModal(false);
+ setSelectedTicket(null);
+ setFormData({});
+ }
+
+ // Handle klik beli tiket
+ function handleBuyClick(ticket) {
+ if (!isLoggedIn) {
+ setModalTab("login");
+ setShowModal(true);
+ setSelectedTicket(ticket);
+ } else {
+ setSelectedTicket(ticket);
+ setShowModal(true);
+ }
+ }
+
+ // Handle form input change untuk tiket form
+ function handleFormChange(e) {
+ const { name, value } = e.target;
+ setFormData((prev) => ({ ...prev, [name]: value }));
+ }
+
+ if (loading) return
-
-
);
- };
-
+};
+const App = () => {
return (
- <>
-
- Twitter
- - {socialConnections.twitter ? 'Terhubung' : 'Belum Terhubung'} - + {/* Fitur */} +
+
-
+
- Fitur Unggulan untuk Sukseskan Acara Anda
+Dari pembuatan halaman hingga laporan penjualan, semua ada di sini.
+
+ {[
+ ['Manajemen Acara Mudah', 'Buat halaman acara yang menarik dengan branding kustom hanya dalam beberapa menit.'],
+ ['Gerbang Pembayaran Aman', 'Terima pembayaran dari berbagai metode dengan aman dan pencairan dana yang cepat.'],
+ ['Laporan & Analitik', 'Pantau penjualan tiket secara real-time dan dapatkan wawasan dari data pengunjung.'],
+ ].map(([judul, deskripsi], idx) => (
+
-
-
+
- {judul}
+{deskripsi}
-
-
-
-
+ ))}
- Instagram
- - {socialConnections.instagram ? 'Terhubung' : 'Belum Terhubung'} - -
-
-
-
+
+
+ {/* Section Screenshot + Fitur */}
+
+
+
+ {/* Harga */}
+
+
+
+
+
+
+ {/* CTA */}
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ 
+
+
+
+ Semua yang Anda Butuhkan dalam Satu Platform
+Sederhanakan alur kerja Anda dengan alat yang terintegrasi penuh.
+-
+ {[
+ ['Check-in Cepat dengan QR Code:', 'Kurangi antrean di lokasi dengan pemindaian tiket digital yang instan.'],
+ ['Promosi & Pemasaran:', 'Jangkau audiens yang lebih luas dengan alat pemasaran email dan media sosial bawaan.'],
+ ['Halaman Acara Kustom:', 'Tampilkan identitas brand Anda dengan halaman acara yang bisa disesuaikan sepenuhnya.'],
+ ].map(([judul, detail], idx) => (
+
- + + {judul} {detail} + + ))} +
+
+ Paket Harga yang Fleksibel
+Pilih paket yang paling sesuai dengan skala acara Anda. Tanpa biaya tersembunyi.
+
+ {/* Starter */}
+
+
+
+
+ {/* Pro */}
+ Starter
+Ideal untuk acara komunitas dan skala kecil.
++ $29 + /bulan +
+ + Pilih Starter + +-
+ {['1 Acara Aktif', 'Hingga 100 Peserta', 'Biaya Transaksi 2.5%', 'Laporan Dasar'].map((item, i) => (
+
- + + {item} + + ))} +
+ PALING POPULER
+
+ Pro
+Untuk event organizer profesional dan bisnis.
++ $79 + /bulan +
+ + Pilih Pro + +-
+ {[
+ 'Acara Tanpa Batas',
+ 'Peserta Tanpa Batas',
+ 'Biaya Transaksi 1%',
+ 'Laporan Lengkap & Analitik',
+ 'Dukungan Prioritas'
+ ].map((item, i) => (
+
- + + {item} + + ))} +
+
+ + Partner +
+ + {loading ? ( +Memuat organisasi...
+ ) : error ? ( +{error}
+ ) : organizations.length === 0 ? ( +Belum ada organisasi tersedia.
+ ) : ( +
+ {/* Marquee content */}
+
+ )}
+
+ {[...organizations, ...organizations].map((org, index) => (
+
+ {org.nama_organization}
+
+ ))}
+
+
+ {/* Fading edges */}
+
+
+
+
+ Siap Menggelar Acara Spektakuler Anda?
+Mulai dalam hitungan menit. Tidak perlu kartu kredit untuk mencoba.
+ +Loading...
;
+ if (error) return Error: {error}
;
+
+ return (
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ {/* Acara Section */}
+
+
+
+ {organization.about &&
+
+
+ }
+
+
+ {/* Footer */}
+
+
+ {/* Modal */}
+ {showModal && (
+
+ );
+}
diff --git a/src/helpers/formatRupiah.js b/src/helpers/formatRupiah.js
new file mode 100644
index 0000000..56b7508
--- /dev/null
+++ b/src/helpers/formatRupiah.js
@@ -0,0 +1,8 @@
+export default function formatRupiah(number) {
+ return new Intl.NumberFormat('id-ID', {
+ style: 'currency',
+ currency: 'IDR',
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0
+ }).format(number);
+}
diff --git a/src/index.css b/src/index.css
index 6f9cae4..51cba18 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,614 +1,37 @@
-/* Direktif Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;
- body {
- font-family: 'Manrope', sans-serif;
- background-color: #f8fafc; /* Background utama, mirip dengan brand guide */
- color: #282930; /* Teks gelap utama */
- margin: 0;
- overflow-x: hidden; /* Mencegah scroll horizontal */
- }
-
- /* Custom styles for sections and elements */
- .header-bg {
- background-color: #ffffff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
- }
-
- .hero-section {
- background-color: #ffffff;
- /* padding: 4rem 2rem; */
- text-align: center;
- }
-
- .stats-grid {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 kolom di layar kecil */
- gap: 1.5rem;
- margin-top: 3rem;
- }
-
- @media (min-width: 640px) { /* sm breakpoint */
- .stats-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 kolom di layar sedang */
- }
- }
-
- @media (min-width: 1024px) { /* lg breakpoint */
- .stats-grid {
- grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 kolom di layar besar */
- }
- }
-
- .stat-card {
- background-color: #ffffff;
- border-radius: 1rem;
- text-align: left;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- transition: transform 0.2s ease-in-out;
- }
-
- .stat-card.dark-bg {
- background-color: #282930; /* Menggunakan warna gelap dari brand guide */
- color: #e2e8f0;
- }
-
- .stat-card.light-green-bg {
- background-color: #E5FFCC; /* Menggunakan warna hijau terang dari brand guide */
- color: #142F32; /* Teks gelap di atas hijau terang */
- }
-
- .stat-card:hover {
- transform: translateY(-5px);
- }
-
- .bottom-section {
- background-color: #282930; /* Menggunakan warna gelap dari brand guide */
- padding: 4rem 2rem;
- color: #e2e8f0;
- text-align: center;
- }
-
- .bottom-grid {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 kolom di layar kecil */
- gap: 1.5rem;
- margin-top: 3rem;
- }
-
- @media (min-width: 768px) { /* md breakpoint */
- .bottom-grid {
- grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 kolom di layar sedang */
- }
- }
-
- .bottom-card {
- background-color: #142F32; /* Menggunakan warna hijau gelap dari brand guide */
- border-radius: 1rem;
- padding: 2rem;
- text-align: left;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
- transition: transform 0.2s ease-in-out;
- }
-
- .bottom-card:hover {
- transform: translateY(-5px);
- }
-
- .button-primary {
- background-color: #142F32; /* Menggunakan warna hijau gelap dari brand guide */
- color: white;
- transition: all 0.3s ease;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- }
-
- .button-primary:hover {
- background-color: #0d1e20; /* Hijau gelap lebih gelap */
- transform: translateY(-2px);
- box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
- }
-
- .button-secondary {
- background-color: transparent;
- border: 1px solid #9ca3af; /* Gray border */
- color: #4b5563; /* Dark gray text */
- transition: all 0.3s ease;
- }
-
- .button-secondary:hover {
- background-color: #f3f4f6; /* Light gray background */
- transform: translateY(-2px);
- }
-
- .button-sign-up {
- background-color: #142F32; /* Menggunakan warna hijau gelap dari brand guide */
- color: white;
- transition: all 0.3s ease;
- }
-
- .button-sign-up:hover {
- background-color: #0d1e20; /* Hijau gelap lebih gelap */
- }
-
- /* Responsive image for the first card */
- .card-image {
- width: 100%;
- height: auto;
- border-radius: 0.75rem; /* Sudut membulat untuk gambar */
- object-fit: cover; /* Memastikan gambar menutupi area */
- }
-
- /* Styles for Key Benefits Section */
- .key-benefits-section {
- background-color: #f8fafc;
- padding: 4rem 2rem;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- @media (min-width: 768px) {
- .key-benefits-section {
- flex-direction: row;
- text-align: left;
- justify-content: center;
- gap: 4rem;
- }
- }
-
- .benefits-content {
- flex: 1;
- max-width: 600px;
- }
-
- .benefits-image-card {
- flex: 1;
- background-color: #ffffff;
- border-radius: 1rem;
- padding: 1.5rem;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- margin-top: 2rem;
- max-width: 400px;
- }
-
- @media (min-width: 768px) {
- .benefits-image-card {
- margin-top: 0;
- }
- }
-
- .benefit-item {
- display: flex;
- align-items: flex-start;
- margin-bottom: 1rem;
- }
-
- .benefit-item i {
- color: #22c55e; /* Hijau centang */
- margin-right: 0.75rem;
- font-size: 1.25rem;
- margin-top: 0.25rem;
- }
-
- /* Styles for Tailored Plans Section */
- .tailored-plans-section {
- background-color: #282930; /* Menggunakan warna gelap dari brand guide */
- padding: 4rem 2rem;
- color: #e2e8f0;
- text-align: center;
- }
-
- .pricing-grid {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
- gap: 2rem;
- margin-top: 3rem;
- max-width: 900px;
- margin-left: auto;
- margin-right: auto;
- }
-
- @media (min-width: 768px) {
- .pricing-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
-
- .pricing-card {
- background-color: #142F32; /* Menggunakan warna hijau gelap dari brand guide */
- border-radius: 1rem;
- padding: 2.5rem;
- text-align: left;
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
- }
-
- .pricing-card .price {
- font-size: 3rem;
- font-weight: 800;
- color: #ffffff;
- margin-bottom: 0.5rem;
- }
-
- .pricing-card .price-per-month {
- color: #9ca3af;
- font-size: 1rem;
- }
-
- .pricing-card .feature-list {
- margin-top: 1.5rem;
- margin-bottom: 2rem;
- }
-
- .pricing-card .feature-item {
- display: flex;
- align-items: center;
- margin-bottom: 0.75rem;
- color: #cbd5e0;
- }
-
- .pricing-card .feature-item i {
- color: #22c55e; /* Hijau centang */
- margin-right: 0.5rem;
- }
-
- /* New styles for Seamless Integrations Section */
- .integrations-section {
- background-color: #f8fafc;
- padding: 4rem 2rem;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- @media (min-width: 768px) {
- .integrations-section {
- flex-direction: row;
- text-align: left;
- justify-content: center;
- gap: 4rem;
- }
- }
-
- .integrations-content {
- flex: 1;
- max-width: 600px;
- }
-
- .integrations-visual {
- flex: 1;
- background-color: #E5FFCC; /* Menggunakan warna hijau terang dari brand guide */
- border-radius: 1rem;
- padding: 2rem;
- margin-top: 2rem;
- max-width: 500px;
- position: relative;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 300px;
- }
-
- @media (min-width: 768px) {
- .integrations-visual {
- margin-top: 0;
- }
- }
-
- .integration-icon-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 1.5rem;
- width: 100%;
- height: 100%;
- position: relative;
- justify-items: center;
- align-items: center;
- }
-
- .integration-icon {
- background-color: #ffffff;
- border-radius: 50%;
- width: 60px;
- height: 60px;
- display: flex;
- justify-content: center;
- align-items: center;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
- font-size: 1.5rem;
- color: #4a5568;
- }
-
- /* From Idea to Production Section */
- .idea-to-production-section {
- background-color: #282930; /* Menggunakan warna gelap dari brand guide */
- padding: 4rem 2rem;
- color: #e2e8f0;
- text-align: center;
- }
-
- /* Footer Section */
- .footer-section {
- background-color: #282930; /* Menggunakan warna gelap dari brand guide */
- padding: 4rem 2rem;
- color: #a0aec0; /* Teks abu-abu lebih terang */
- font-size: 0.9rem;
- }
-
- .footer-grid {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
- gap: 2rem;
- }
-
- @media (min-width: 640px) {
- .footer-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
-
- @media (min-width: 1024px) {
- .footer-grid {
- grid-template-columns: repeat(5, minmax(0, 1fr));
- }
- }
-
- .footer-col h3 {
- font-weight: 600;
- color: #ffffff;
- margin-bottom: 1rem;
- }
-
- .footer-col ul li {
- margin-bottom: 0.5rem;
- }
-
- .footer-col ul li a {
- color: #a0aec0;
- transition: color 0.2s ease;
- }
-
- .footer-col ul li a:hover {
- color: #ffffff;
- }
-
- .social-icons a {
- color: #a0aec0;
- font-size: 1.25rem;
- margin-right: 1rem;
- transition: color 0.2s ease;
- }
-
- .social-icons a:hover {
- color: #ffffff;
- }
-
- /* Modal Styles */
- .modal {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.3s ease, visibility 0.3s ease;
- }
-
- .modal.show {
- opacity: 1;
- visibility: visible;
- }
-
- .modal-content {
- background-color: #ffffff;
- padding: 2.5rem;
- border-radius: 1rem;
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
- max-width: 450px;
- width: 90%;
- text-align: center;
- position: relative;
- transform: translateY(-20px);
- transition: transform 0.3s ease;
- }
-
- .modal.show .modal-content {
- transform: translateY(0);
- }
-
- .close-button {
- position: absolute;
- top: 1rem;
- right: 1rem;
- font-size: 1.5rem;
- cursor: pointer;
- color: #4b5563;
- }
-
- /* Dashboard Styles */
- .dashboard-container {
- display: none; /* Hidden by default */
- grid-template-columns: 250px 1fr; /* Sidebar fixed width, content fills */
- min-height: 100vh;
- background-color: #f8fafc;
- color: #282930;
- }
-
- @media (max-width: 768px) {
- .dashboard-container {
- grid-template-columns: 1fr; /* Stack on small screens */
- }
- .dashboard-sidebar {
- width: 100%;
- position: relative;
- box-shadow: none;
- }
- }
-
- .dashboard-sidebar {
- background-color: #142F32; /* Hijau gelap */
- color: #E5FFCC;
- padding: 2rem 1rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
- }
-
- .dashboard-sidebar-item {
- width: 100%;
- padding: 0.75rem 1rem;
- margin-bottom: 0.5rem;
- border-radius: 0.5rem;
- display: flex;
- align-items: center;
- cursor: pointer;
- transition: background-color 0.2s ease, color 0.2s ease;
- }
-
- .dashboard-sidebar-item:hover {
- background-color: rgba(229, 255, 204, 0.1); /* Hijau terang transparan */
- color: #E5FFCC;
- }
-
- .dashboard-sidebar-item.active {
- background-color: #E5FFCC;
- color: #142F32;
- font-weight: 600;
- }
-
- .dashboard-main-content {
- padding: 2rem;
- background-color: #f8fafc;
- overflow-y: auto;
- }
-
- .chat-container {
- display: flex;
- flex-direction: column;
- height: calc(100vh - 4rem); /* Adjust for padding */
- background-color: #ffffff;
- border-radius: 1rem;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
- overflow: hidden;
- }
-
- .chat-messages {
- flex-grow: 1;
- padding: 1.5rem;
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
-
- .chat-message {
- max-width: 80%;
- padding: 0.75rem 1rem;
- border-radius: 0.75rem;
- word-wrap: break-word;
- }
-
- .chat-message.user {
- background-color: #E5FFCC;
- align-self: flex-end;
- color: #142F32;
- }
-
- .chat-message.bot {
- background-color: #f1f5f9;
- align-self: flex-start;
- color: #282930;
- }
-
- .chat-input-area {
- display: flex;
- padding: 1rem;
- border-top: 1px solid #e2e8f0;
- background-color: #ffffff;
- }
-
- .chat-input-area input {
- flex-grow: 1;
- padding: 0.75rem 1rem;
- border: 1px solid #cbd5e0;
- border-radius: 0.5rem;
- margin-right: 0.75rem;
- font-size: 1rem;
- }
-
- .chat-input-area button {
- background-color: #142F32;
- color: white;
- padding: 0.75rem 1.25rem;
- border-radius: 0.5rem;
- transition: background-color 0.2s ease;
- }
-
- .chat-input-area button:hover {
- background-color: #0d1e20;
- }
-
- .loading-indicator {
- display: none;
- text-align: center;
- padding: 1rem;
- color: #777C90;
- }
-
- .loading-indicator.show {
- display: block;
- }
-
- .image-gen-preview {
- max-width: 100%;
- height: auto;
- border-radius: 0.75rem;
- margin-top: 1.5rem;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
- }
-
- .dashboard-section-content {
- background-color: #ffffff;
- padding: 2rem;
- border-radius: 1rem;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
- min-height: calc(100vh - 8rem); /* Adjust for header/footer/padding */
- }
-
- .dashboard-section-content h2 {
- font-size: 2.25rem;
- font-weight: 800;
- margin-bottom: 1.5rem;
- color: #282930;
- }
-
- .dashboard-section-content p {
- color: #4b5563;
- margin-bottom: 1rem;
- }
-
- .dashboard-section-content ul {
- list-style: none;
- padding: 0;
- }
-
- .dashboard-section-content ul li {
- background-color: #f1f5f9;
- padding: 1rem;
- border-radius: 0.75rem;
- margin-bottom: 0.75rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
\ No newline at end of file
+/* Tambahan untuk font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+/* Custom Theme Overrides */
+:root {
+ --color-brand-dark: #0D1117;
+ --color-brand-card: #161B22;
+ --color-brand-accent: #10B981;
+ --color-brand-accent-hover: #059669;
+ --color-brand-subtle: #30363D;
+}
+
+body {
+ @apply bg-[var(--color-brand-dark)] text-gray-300 font-sans antialiased;
+}
+
+/* Font override for Inter */
+* {
+ font-family: 'Inter', sans-serif;
+}
+
+@keyframes marquee {
+ 0% {
+ transform: translateX(0%);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+.animate-marquee {
+ animation: marquee 40s linear infinite;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1490793..5728ca0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,21 @@
-/** @type {import('tailwindcss').Config} */
+// tailwind.config.js
module.exports = {
content: [
- "./src/**/*.{js,jsx,ts,tsx}",
+ "./src/**/*.{js,jsx,ts,tsx}", // pastikan path sesuai struktur project kamu
],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ sans: ['Inter', 'sans-serif'],
+ },
+ colors: {
+ 'brand-dark': '#0D1117',
+ 'brand-card': '#161B22',
+ 'brand-accent': '#10B981',
+ 'brand-accent-hover': '#059669',
+ 'brand-subtle': '#30363D',
+ },
+ },
},
plugins: [],
}
+
+ + {organization.nama_organization} +
++ {organization.deskripsi} +
+
+
+
+
+
+ + Acara Mendatang +
+
+ {tickets.map((ticket, i) => {
+ const isSoldOut = ticket.sold_out || false;
+
+ return (
+
+
+ {isSoldOut && (
+ 
+
+ );
+ })}
+
+
+ TIKET HABIS
+
+
+ )}
+
+
+ + {ticket.nama_tiket} +
+
+ 📅 {ticket.tanggal || "Tanggal belum tersedia"}
+ 📍 {ticket.lokasi || "Lokasi belum tersedia"}
+
+ + {ticket.price === "0.00" ? "Gratis" : formatRupiah(ticket.price)} +
+
+ {isSoldOut ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ 
+
+
+
+
+ + Tentang {organization.nama_organization} +
++ Didirikan pada tahun 2020, SoundVibes Production adalah promotor musik + yang berdedikasi untuk menciptakan acara live yang tak terlupakan. + Misi kami adalah menghubungkan penggemar dengan artis favorit mereka + melalui produksi acara yang berkualitas tinggi, aman, dan nyaman. +
++ Kami percaya bahwa musik memiliki kekuatan untuk menyatukan, dan + kami bangga menjadi jembatan antara panggung dan penonton. +
+
+
+ )}
+
+
+
+ {!isLoggedIn && (
+ <>
+ {/* Tabs */}
+
+
+
+
+
+
+ {/* Login Form */}
+ {modalTab === "login" && (
+
+ )}
+
+ {/* Register Form */}
+ {modalTab === "register" && (
+
+ )}
+
+ )}
+
+ {/* Jika sudah login, tampilkan form tiket */}
+ {isLoggedIn && selectedTicket && (
+
+ )}
+