import React, { useState, useEffect } from ‘react’;
import {
Factory,
Phone,
Package,
Info,
ChevronRight,
CheckCircle,
MessageCircle,
ChevronLeft,
Settings,
ShieldCheck,
Zap
} from ‘lucide-react’;

const App = () => {
const [activeTab, setActiveTab] = useState(‘home’);
const [showContact, setShowContact] = useState(false);
const [currentSlide, setCurrentSlide] = useState(0);

const slides = [
{
badge: “PROMO KHUSUS”,
title: “Mixer Sicoma Kini Lebih Canggih!”,
description: “Solusi terbaik untuk proyek beton Anda dengan teknologi pencampuran tersinkronisasi untuk hasil maksimal.”,
image: “https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “READY STOCK”,
title: “Kapasitas 2 Sampai 4 Kubik”,
description: “Kami menyediakan stok siap kirim untuk mendukung kelancaran proyek infrastruktur Anda tanpa menunggu lama.”,
image: “https://images.unsplash.com/photo-1541888946425-d81bb19480c5?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “MITRA RESMI”,
title: “Bandang Rejeki Lestari”,
description: “Distributor terpercaya untuk memastikan Anda mendapatkan unit Sicoma original dengan layanan purna jual terbaik.”,
image: “https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1000&auto=format&fit=crop”
},
{
badge: “HARGA TERBAIK”,
title: “Miliki Sekarang Juga!”,
description: “Dapatkan penawaran harga kompetitif dan konsultasi teknis gratis dari tim ahli kami sekarang juga.”,
image: “https://images.unsplash.com/photo-1589939705384-5185138a0470?q=80&w=1000&auto=format&fit=crop”
}
];

// Auto-play slider
useEffect(() => {
if (activeTab === ‘home’) {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
}, 5000);
return () => clearInterval(timer);
}
}, [activeTab]);

const products = [
{
size: “MAO 2000/3000 (2m³)”,
type: “Twin Shaft Concrete Mixer”,
specs: { capacity: “3000/2000 L”, motor: “2 x 37 kW”, weight: “8200 kg” },
features: [“Sinkronisasi Gearbox”, “Sistem Pelumasan Otomatis”, “Ready Stock”],
image: “https://images.unsplash.com/photo-1541888946425-d81bb19480c5?q=80&w=800&auto=format&fit=crop”
},
{
size: “MAO 3000/4500 (3m³)”,
type: “Twin Shaft Concrete Mixer”,
specs: { capacity: “4500/3000 L”, motor: “2 x 55 kW”, weight: “10500 kg” },
features: [“Teknologi Italy”, “Tahan Abrasi Tinggi”, “Ready Stock”],
image: “https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=800&auto=format&fit=crop”
},
{
size: “MAO 4000/6000 (4m³)”,
type: “Twin Shaft Concrete Mixer”,
specs: { capacity: “6000/4000 L”, motor: “2 x 75 kW”, weight: “12800 kg” },
features: [“Kapasitas Industri Besar”, “Double Discharge Door”, “Ready Stock”],
image: “https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=800&auto=format&fit=crop”
}
];

const handleContactClick = () => {
setShowContact(true);
};

return (

{/* Header / Navigation */}

{/* Hero Section with Slider */}
{activeTab === ‘home’ && (

{/* Content Side */}

{slides[currentSlide].badge}

{slides[currentSlide].title.split(” “).map((word, i) =>
word.toLowerCase() === “canggih!” || word.toLowerCase() === “sekarang” ?
{word} : word + ” ”
)}

{slides[currentSlide].description}

setActiveTab(‘products’)}
className=”bg-black text-white px-8 py-4 rounded-xl font-bold hover:bg-gray-800 transition-all shadow-lg flex items-center gap-2″
>
Cek Katalog


Konsultasi Gratis

{/* Slider Indicators */}

{slides.map((_, idx) => (
setCurrentSlide(idx)}
className={`h-2 rounded-full transition-all duration-300 ${currentSlide === idx ? ‘w-8 bg-yellow-400’ : ‘w-2 bg-gray-200 hover:bg-gray-300’}`}
/>
))}

{/* Image Side */}

{/* Slider Controls */}
setCurrentSlide((prev) => (prev – 1 + slides.length) % slides.length)}
className=”absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-md p-2 rounded-full text-white transition-all opacity-0 group-hover:opacity-100″
>

setCurrentSlide((prev) => (prev + 1) % slides.length)}
className=”absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 backdrop-blur-md p-2 rounded-full text-white transition-all opacity-0 group-hover:opacity-100″
>

Produk Unggulan

Sicoma Twin Shaft Mixer

)}

{/* Stats Section */}
{activeTab === ‘home’ && (

2-4m³

Ready Stock

100%

Suku Cadang Asli

24/7

Dukungan Teknis

Premium

Kualitas Standar Dunia

)}

{/* Products Page Content */}
{activeTab === ‘products’ && (

{/* Product Header */}

Lini Produk Mixer Sicoma

Peralatan pencampuran beton kelas dunia yang dirancang untuk daya tahan maksimal dan efisiensi operasional tinggi di Indonesia.

{/* Value Props for Products */}

{[
{ icon: , title: “Presisi Tinggi”, desc: “Sistem pencampuran tersinkronisasi sempurna.” },
{ icon: , title: “Garansi Resmi”, desc: “Layanan purna jual resmi Sicoma Indo Perkasa.” },
{ icon: , title: “Hemat Energi”, desc: “Optimasi konsumsi daya motor pada beban puncak.” }
].map((prop, i) => (

{prop.icon}

{prop.title}

{prop.desc}

))}

{/* Product Cards */}

{products.map((item, idx) => (

{/* Product Image */}

READY STOCK

{/* Product Info */}

{item.type}

{item.size}

{/* Specs Grid */}

Kapasitas

{item.specs.capacity}

Power Motor

{item.specs.motor}

Berat Unit

{item.specs.weight}

{item.features.map((f, i) => (

{f}

))}

Minta Penawaran Harga


Download Brosur

))}

)}

{/* About Section */}
{activeTab === ‘about’ && (

PT SICOMA INDO PERKASA

Sole Distributor of Sicoma Italy in Indonesia

“Kami hadir untuk memastikan setiap proyek pembangunan di Indonesia didukung oleh teknologi pencampuran beton kelas dunia yang efisien dan andal.”

Visi Kami

Terus berinovasi menghadirkan mesin industri yang mampu meningkatkan produktivitas serta menjaga standar kualitas beton yang presisi.

Distribusi Nasional

Bekerjasama erat dengan mitra strategis seperti **Bandang Rejeki Lestari** untuk menjangkau seluruh pelosok negeri.

)}

{/* Modal Contact */}
{showContact && (

setShowContact(false)}
className=”absolute top-4 right-4 bg-black/10 hover:bg-black/20 p-1 rounded-full transition-all”
>
✕

Hubungi Kami Sekarang

Konsultasi Harga & Stok 2-4m³

WhatsApp Sales

+62 812-3456-7890

 

Email Marketing

sales@sicomaindoperkasa.id

)}

{/* Footer */}

);
};

export default App;