From ee28551344144b366ef1cb4e6dd981c92352a36d Mon Sep 17 00:00:00 2001 From: Vassshhh Date: Wed, 30 Jul 2025 17:44:17 +0700 Subject: [PATCH] ok --- src/App.js | 2 +- src/components/AcademySection.js | 51 ++- src/components/ProductSection.js | 45 +-- src/components/pages/Kedaimaster.js | 499 ++++++++++++++++++++++++++++ 4 files changed, 558 insertions(+), 39 deletions(-) create mode 100644 src/components/pages/Kedaimaster.js diff --git a/src/App.js b/src/App.js index c0eb29b..22629a8 100644 --- a/src/App.js +++ b/src/App.js @@ -50,7 +50,7 @@ function App() {
- Snack dan Jajanan +
diff --git a/src/components/AcademySection.js b/src/components/AcademySection.js index 79e36f2..5461879 100644 --- a/src/components/AcademySection.js +++ b/src/components/AcademySection.js @@ -1,7 +1,22 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Container, Row, Col, Card, Button } from 'react-bootstrap'; const AcademySection = () => { + const [products, setProducts] = useState([]); + + useEffect(() => { + fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ type: 'course' }), + }) + .then(res => res.json()) + .then(data => setProducts(data)) + .catch(err => console.error('Fetch error:', err)); + }, []); + return (
@@ -11,27 +26,27 @@ const AcademySection = () => {

Academy Program adalah wadah belajar digital untuk anak-anak dan remaja. Didesain interaktif, kreatif, dan gratis — setiap modul membekali peserta dengan keterampilan masa depan, dari teknologi dasar hingga coding dan proyek nyata.

- {[ - { title: 'Digital Funstart', items: ['Pengenalan teknologi', 'Interaktif & menyenangkan', 'Untuk anak-anak usia dini'] }, - { title: 'KidCode', items: ['Belajar coding visual', 'Kreatif & edukatif', 'Untuk anak SD & SMP'] }, - { title: 'Tech for Teens', items: ['Pengembangan skill digital', 'Remaja & pelajar', 'Berbasis proyek'] }, - { title: 'IT Training Camp', items: ['Pelatihan intensif IT', 'Untuk semua usia', 'Instruktur profesional'] }, - { title: 'Smart Teacher', items: ['Pelatihan guru', 'Integrasi teknologi', 'Media ajar digital'] }, - { title: 'Smart Staff', items: ['Pelatihan digital untuk staf', 'Administrasi dan operasional', 'Penguatan sistem kerja'] }, - { title: 'UMKM Go Digital', items: ['Digitalisasi bisnis kecil', 'Platform online', 'Pelatihan marketplace'] }, - { title: 'Creative Spark', items: ['Inkubasi ide kreatif', 'Coaching & mentoring', 'Kompetisi & showcase'] }, - ].map((program, idx) => ( - + {products.map((product, idx) => ( + - {program.title} + {product.name}
- + {product.name}
    - {program.items.map((item, i) => ( -
  • {item}
    • - ))}
+ {product.duration && ( +
  • + Durasi:{" "} + {product.duration.hours + ? `${product.duration.hours} jam` + : product.duration.days + ? `${product.duration.days} hari` + : "-"} +
    • + )} +
  • Harga: {product.currency} {product.price.toLocaleString()}
    • +
    @@ -45,4 +60,4 @@ const AcademySection = () => { ); }; -export default AcademySection; \ No newline at end of file +export default AcademySection; diff --git a/src/components/ProductSection.js b/src/components/ProductSection.js index 9230195..d8e0b61 100644 --- a/src/components/ProductSection.js +++ b/src/components/ProductSection.js @@ -1,7 +1,22 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Container, Row, Col, Card } from 'react-bootstrap'; const ProductSection = () => { + const [products, setProducts] = useState([]); + + useEffect(() => { + fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ type: 'product', onlyParents:true }), + }) + .then(res => res.json()) + .then(data => setProducts(data)) + .catch(err => console.error('Fetch error:', err)); + }, []); + return (
    @@ -13,24 +28,14 @@ const ProductSection = () => {
    - - - - MR. KYAI - - - - - - KEDAIMASTER - - - - - - MAYAGEN - - + {products.map((product, idx) => ( + + + + {product.name} + + + ))}
    @@ -39,4 +44,4 @@ const ProductSection = () => { ); }; -export default ProductSection; \ No newline at end of file +export default ProductSection; diff --git a/src/components/pages/Kedaimaster.js b/src/components/pages/Kedaimaster.js new file mode 100644 index 0000000..4ce49d0 --- /dev/null +++ b/src/components/pages/Kedaimaster.js @@ -0,0 +1,499 @@ +import React from 'react'; + +const KedaiMasterLanding = () => { + const styles = { + container: { + fontFamily: 'Arial, sans-serif', + margin: 0, + padding: 0, + background: 'linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 100%)', + minHeight: '100vh' + }, + header: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + padding: '1rem 2rem', + backgroundColor: 'rgba(255, 255, 255, 0.1)', + backdropFilter: 'blur(10px)' + }, + logo: { + display: 'flex', + alignItems: 'center', + gap: '0.5rem', + fontSize: '1.2rem', + fontWeight: 'bold', + color: '#2c3e50' + }, + nav: { + display: 'flex', + gap: '2rem', + listStyle: 'none', + margin: 0, + padding: 0 + }, + navLink: { + textDecoration: 'none', + color: '#2c3e50', + fontSize: '0.9rem', + transition: 'color 0.3s' + }, + ctaButton: { + backgroundColor: '#4a90e2', + color: 'white', + padding: '0.5rem 1.5rem', + border: 'none', + borderRadius: '25px', + fontSize: '0.9rem', + cursor: 'pointer', + transition: 'transform 0.3s' + }, + hero: { + display: 'flex', + alignItems: 'center', + padding: '4rem 2rem', + maxWidth: '1200px', + margin: '0 auto' + }, + heroContent: { + flex: 1, + paddingRight: '2rem' + }, + heroTitle: { + fontSize: '3rem', + fontWeight: 'bold', + color: '#2c3e50', + marginBottom: '1rem', + lineHeight: '1.2' + }, + heroText: { + fontSize: '1.1rem', + color: '#666', + lineHeight: '1.6', + marginBottom: '2rem' + }, + heroImage: { + flex: 1, + textAlign: 'center' + }, + coffeeIcon: { + fontSize: '8rem', + background: 'linear-gradient(45deg, #ffa726, #ff9800)', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', + padding: '2rem', + borderRadius: '20px', + backgroundColor: 'rgba(255, 167, 38, 0.1)' + }, + features: { + padding: '4rem 2rem', + maxWidth: '1200px', + margin: '0 auto' + }, + featuresTitle: { + textAlign: 'center', + fontSize: '2.5rem', + color: '#2c3e50', + marginBottom: '3rem' + }, + featuresGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', + gap: '2rem', + marginBottom: '4rem' + }, + featureCard: { + backgroundColor: 'rgba(255, 255, 255, 0.3)', + padding: '2rem', + borderRadius: '15px', + textAlign: 'center', + backdropFilter: 'blur(10px)', + border: '1px solid rgba(255, 255, 255, 0.2)', + transition: 'transform 0.3s' + }, + featureTitle: { + fontSize: '1.3rem', + fontWeight: 'bold', + color: '#2c3e50', + marginBottom: '1rem' + }, + featureText: { + color: '#666', + lineHeight: '1.5' + }, + appShowcase: { + display: 'flex', + alignItems: 'center', + gap: '3rem', + marginTop: '4rem' + }, + appContent: { + flex: 1 + }, + appTitle: { + fontSize: '1.5rem', + fontWeight: 'bold', + color: '#2c3e50', + marginBottom: '1rem' + }, + appText: { + color: '#666', + lineHeight: '1.6' + }, + appImages: { + flex: 1, + position: 'relative', + height: '300px' + }, + phoneScreen: { + width: '200px', + height: '350px', + backgroundColor: 'white', + borderRadius: '25px', + padding: '1rem', + boxShadow: '0 10px 30px rgba(0,0,0,0.2)', + position: 'absolute', + display: 'flex', + flexDirection: 'column', + gap: '0.5rem' + }, + phoneScreen1: { + left: '0', + top: '0', + zIndex: 2 + }, + phoneScreen2: { + right: '0', + top: '50px', + zIndex: 1 + }, + screenHeader: { + height: '40px', + backgroundColor: '#f0f0f0', + borderRadius: '10px', + marginBottom: '0.5rem' + }, + screenContent: { + flex: 1, + backgroundColor: '#f8f8f8', + borderRadius: '10px', + padding: '0.5rem' + }, + cta: { + textAlign: 'center', + padding: '4rem 2rem', + backgroundColor: 'rgba(255, 255, 255, 0.2)', + backdropFilter: 'blur(10px)' + }, + ctaTitle: { + fontSize: '2rem', + color: '#2c3e50', + marginBottom: '2rem' + }, + ctaButtonLarge: { + backgroundColor: '#8b4513', + color: 'white', + padding: '1rem 2rem', + border: 'none', + borderRadius: '30px', + fontSize: '1.1rem', + cursor: 'pointer', + transition: 'transform 0.3s' + }, + pricing: { + padding: '4rem 2rem', + background: 'linear-gradient(135deg, #ffa726 0%, #ff9800 100%)', + textAlign: 'center' + }, + pricingTitle: { + fontSize: '2.5rem', + color: 'white', + marginBottom: '3rem' + }, + pricingCards: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', + gap: '2rem', + maxWidth: '1000px', + margin: '0 auto' + }, + pricingCard: { + backgroundColor: 'rgba(255, 255, 255, 0.95)', + padding: '2rem', + borderRadius: '15px', + position: 'relative' + }, + pricingBadge: { + position: 'absolute', + top: '-10px', + left: '50%', + transform: 'translateX(-50%)', + backgroundColor: '#4caf50', + color: 'white', + padding: '0.5rem 1rem', + borderRadius: '20px', + fontSize: '0.8rem' + }, + pricingPlan: { + fontSize: '1.3rem', + fontWeight: 'bold', + color: '#2c3e50', + marginBottom: '1rem' + }, + pricingPrice: { + fontSize: '2rem', + fontWeight: 'bold', + color: '#4caf50', + marginBottom: '1.5rem' + }, + pricingFeatures: { + listStyle: 'none', + padding: 0, + marginBottom: '2rem' + }, + pricingFeature: { + padding: '0.5rem 0', + color: '#666', + borderBottom: '1px solid #eee' + }, + pricingButton: { + backgroundColor: '#4caf50', + color: 'white', + padding: '0.8rem 2rem', + border: 'none', + borderRadius: '25px', + cursor: 'pointer', + width: '100%', + fontSize: '1rem' + }, + footer: { + background: 'linear-gradient(135deg, #2196f3 0%, #21cbf3 100%)', + color: 'white', + padding: '4rem 2rem 2rem', + position: 'relative', + overflow: 'hidden' + }, + footerWave: { + position: 'absolute', + top: '-50px', + left: 0, + width: '100%', + height: '100px', + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '50% 50% 0 0' + }, + footerContent: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', + gap: '3rem', + maxWidth: '1200px', + margin: '0 auto', + position: 'relative', + zIndex: 1 + }, + footerSection: { + textAlign: 'left' + }, + footerTitle: { + fontSize: '1.5rem', + marginBottom: '1rem' + }, + footerText: { + lineHeight: '1.6', + opacity: 0.9 + }, + copyright: { + textAlign: 'center', + marginTop: '2rem', + paddingTop: '2rem', + borderTop: '1px solid rgba(255, 255, 255, 0.2)', + opacity: 0.7 + } + }; + + return ( +
    + {/* Header */} +
    +
    + 🏪 + TECHNORAMA +
    + + +
    + + {/* Hero Section */} +
    +
    +

    Kedai Master

    +

    + Platform Point of Sale terdepan yang dirancang khusus untuk meningkatkan + kepuasan operational kafe dan restoran milik KM. Dengan sistem yang fleksibel, + terpercaya, dan efisien. +

    +
    +
    +
    ☕
    +
    +
    + + {/* Features Section */} +
    +

    Fitur Unggulan

    +
    +
    +

    Manajemen Tenant & Kasir

    +

    + Sistem untuk mengatur dan mengoptimalkan kinerja seluruh tenant. +

    +
    +
    +

    QR Pemesanan di Meja

    +

    + Tamu restoran langsung dan mengoptimalkan waktu pemesanan dan pelayanan. +

    +
    +
    +

    Otomatisasi Pesanan & Keuangan

    +

    + Mengatur operasional anda dengan otomatisasi pesanan dan keuangan. +

    +
    +
    +

    Request & Voting Lagu

    +

    + Tamu dapat meminta lagu untuk diputar di restoran dan memberikan suasana. +

    +
    +
    + + {/* App Showcase */} +
    +
    +

    + Gak perlu repot anti jam kerja yang baik bozen lagi. + Tinggal scan QR yang ada di meja, langsung bisa udah langsung workflow +

    +

    + © 2025 KEDAIMASTERPBM.COM +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    Desain Menu Modern

    +

    + Tampilan menu yang familiar, menarik dan mudah dipahami sehingga customer bisa dengan mudah memahami visual yang menarik untuk pengalaman ordering yang maksimal untuk kafe dan restoran masa kini. +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + {/* CTA Section */} +
    +

    Siap Tingkatkan Bisnis Anda?

    + +
    + + {/* Pricing Section */} +
    +

    OUR PACK KEDAI MASTER

    +
    +
    +
    PAKET BASIC
    +

    Starter Pack

    +
    Rp 245.000
    +
      +
    • 1 user untuk admin
      • +
    • Support via email
      • +
    + +
    + +
    +
    PAKET SILVER
    +

    Business Pack

    +
    Rp 499.000
    +
      +
    • Integrasi Meja & Jemput
      • +
    • All permission & control
      • +
    • Unlimited locations for pemasangan
      • +
    + +
    + +
    +
    PAKET GOLD
    +

    Enterprise Pack

    +
    Rp 849.000
    +
      +
    • All benefits unlimited fitures &
      • +
    • Multi outlet & multi users
      • +
    • Integrasi fitur locations
      • +
    + +
    +
    +
    + + {/* Footer */} + +
    + ); +}; + +export default KedaiMasterLanding; \ No newline at end of file