Segera hadir
Mari bersama ciptakan hal-hal baru
import React, { useState, useEffect, useRef } from ‘react’;
import {
Wand2,
Layers,
Zap,
Shield,
Clock,
Sparkles,
Image as ImageIcon,
ChevronRight,
Star,
CheckCircle,
Menu,
X,
MessageCircle,
ArrowRight,
History,
Maximize
} from ‘lucide-react’;
const App = () => {
const [sliderPos, setSliderPos] = useState(50);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeFaq, setActiveFaq] = useState(null);
const sliderRef = useRef(null);
const handleMove = (e) => {
if (!sliderRef.current) return;
const rect = sliderRef.current.getBoundingClientRect();
const x = e.clientX || (e.touches && e.touches[0].clientX);
if (!x) return;
const position = ((x – rect.left) / rect.width) * 100;
setSliderPos(Math.max(0, Math.min(100, position)));
};
const services = [
{
title: “Restorasi Foto Tua”,
icon: <History className=”w-6 h-6″ />,
desc: “Menghapus noda, memperbaiki bagian sobek, dan menajamkan wajah dari foto tahun 1900-an.”,
color: “from-blue-500 to-cyan-400”
},
{
title: “AI Upscaling 8K”,
icon: <Maximize className=”w-6 h-6″ />,
desc: “Ubah foto kecil/pecah dari HP jadul menjadi resolusi tinggi yang siap cetak ukuran poster.”,
color: “from-purple-500 to-pink-400”
},
{
title: “Pewarnaan Otomatis”,
icon: <Layers className=”w-6 h-6″ />,
desc: “Memberikan warna alami pada foto Hitam Putih dengan akurasi historis berbasis AI.”,
color: “from-orange-500 to-red-400”
},
{
title: “Retouching Beauty”,
icon: <Sparkles className=”w-6 h-6″ />,
desc: “Edit wajah profesional tanpa menghilangkan tekstur kulit alami. Cocok untuk portofolio.”,
color: “from-emerald-500 to-teal-400”
}
];
const faqs = [
{ q: “Berapa lama proses pengerjaannya?”, a: “Tergantung tingkat kesulitan, namun rata-rata selesai dalam 3-12 jam kerja.” },
{ q: “Bagaimana cara mengirim fotonya?”, a: “Anda bisa mengirim via WhatsApp dokumen atau link Google Drive untuk menjaga kualitas resolusi.” },
{ q: “Apakah ada jaminan uang kembali?”, a: “Ya, kami memberikan garansi revisi sepuasnya atau uang kembali jika hasil tidak sesuai brief.” }
];
return (
<div className=”min-h-screen bg-[#020617] text-slate-200 font-sans selection:bg-blue-500/30 selection:text-blue-200″>
{/* Navigation */}
<nav className=”fixed w-full z-50 bg-[#020617]/80 backdrop-blur-xl border-b border-white/5″>
<div className=”max-w-7xl mx-auto px-6 h-20 flex items-center justify-between”>
<div className=”flex items-center gap-3″>
<div className=”w-10 h-10 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20″>
<Wand2 className=”text-white w-6 h-6″ />
</div>
<span className=”text-xl font-black tracking-tighter text-white uppercase”>Gem AI</span>
</div>
<div className=”hidden md:flex items-center gap-10″>
{[‘Layanan’, ‘Hasil Edit’, ‘Harga’, ‘FAQ’].map(item => (
<a key={item} href={`#${item.toLowerCase()}`} className=”text-sm font-medium hover:text-blue-400 transition-colors uppercase tracking-widest”>{item}</a>
))}
<button className=”bg-white text-black px-6 py-2.5 rounded-full text-sm font-bold hover:bg-blue-400 hover:text-white transition-all transform hover:-translate-y-0.5 active:scale-95″>
MULAI EDIT
</button>
</div>
<button className=”md:hidden text-white” onClick={() => setIsMenuOpen(!isMenuOpen)}>
{isMenuOpen ? <X /> : <Menu />}
</button>
</div>
</nav>
{/* Hero Section */}
<section className=”relative pt-40 pb-20 px-6 overflow-hidden”>
<div className=”absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10″></div>
<div className=”max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center”>
<div className=”space-y-8″>
<div className=”inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-widest”>
<Zap className=”w-3 h-3 fill-current” /> Next-Gen Photo Restoration
</div>
<h1 className=”text-5xl lg:text-7xl font-bold text-white leading-[1.1]”>
Sempurnakan <span className=”bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent”>Memori Anda</span> Dengan AI.
</h1>
<p className=”text-xl text-slate-400 leading-relaxed max-w-lg”>
Teknologi Neural Engine terbaru kami menghidupkan kembali foto usang dan menyempurnakan setiap piksel dengan presisi luar biasa.
</p>
<div className=”flex flex-col sm:flex-row gap-4 pt-4″>
<button className=”px-8 py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold text-lg transition-all flex items-center justify-center gap-3 group shadow-2xl shadow-blue-500/20″>
Pesan Lewat WA <MessageCircle className=”w-6 h-6 group-hover:rotate-12 transition-transform” />
</button>
<button className=”px-8 py-5 bg-white/5 hover:bg-white/10 text-white border border-white/10 rounded-2xl font-bold text-lg transition-all”>
Lihat Portfolio
</button>
</div>
<div className=”flex items-center gap-8 pt-6″>
<div className=”flex -space-x-3″>
{[1,2,3,4].map(i => (
<div key={i} className=”w-10 h-10 rounded-full border-2 border-[#020617] overflow-hidden”>
<img src={`https://i.pravatar.cc/100?u=${i}`} alt=”user” />
</div>
))}
</div>
<p className=”text-sm text-slate-500″><span className=”text-white font-bold”>1,200+</span> foto telah direstorasi bulan ini</p>
</div>
</div>
{/* Before/After Slider */}
<div className=”relative group”>
<div className=”absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-[2.5rem] blur opacity-25 group-hover:opacity-40 transition duration-1000″></div>
<div
ref={sliderRef}
className=”relative aspect-[4/5] sm:aspect-square bg-slate-900 rounded-[2rem] overflow-hidden cursor-ew-resize shadow-2xl select-none”
onMouseMove={handleMove}
onTouchMove={handleMove}
>
{/* After Image */}
<div className=”absolute inset-0″>
<img
src=”https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1000″
className=”w-full h-full object-cover”
alt=”After Edit”
/>
<div className=”absolute bottom-6 right-6 bg-blue-600 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest shadow-xl”>SESUDAH GEM AI</div>
</div>
{/* Before Image Overlay */}
<div
className=”absolute inset-0 overflow-hidden”
style={{ width: `${sliderPos}%`, borderRight: ‘2px solid white’ }}
>
<img
src=”https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1000″
className=”w-[calc(100*100%/var(–pos))] h-full object-cover grayscale brightness-50 contrast-125″
style={{ width: `${100 * 100 / sliderPos}%` }}
alt=”Before Edit”
/>
<div className=”absolute bottom-6 left-6 bg-black/50 backdrop-blur-md text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest”>FOTO ASLI</div>
</div>
{/* Slider Handle */}
<div
className=”absolute top-0 bottom-0 w-1 bg-white z-10 flex items-center justify-center”
style={{ left: `${sliderPos}%` }}
>
<div className=”w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-2xl”>
<div className=”flex gap-0.5″>
<div className=”w-1 h-3 bg-blue-600 rounded-full”></div>
<div className=”w-1 h-3 bg-blue-600 rounded-full”></div>
</div>
</div>
</div>
</div>
<p className=”text-center mt-4 text-xs text-slate-500 font-medium uppercase tracking-[0.2em]”>Geser lingkaran untuk melihat keajaiban</p>
</div>
</div>
</section>
{/* Services Grid */}
<section id=”layanan” className=”py-32 px-6″>
<div className=”max-w-7xl mx-auto”>
<div className=”flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16″>
<div className=”max-w-2xl”>
<h2 className=”text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight”>Apa yang Bisa Kami Lakukan?</h2>
<p className=”text-lg text-slate-400″>Dari masalah teknis seperti resolusi rendah hingga masalah estetika seperti warna yang kusam.</p>
</div>
<button className=”text-blue-400 font-bold flex items-center gap-2 hover:gap-3 transition-all mb-2″>
LIHAT SEMUA LAYANAN <ArrowRight className=”w-5 h-5″ />
</button>
</div>
<div className=”grid md:grid-cols-2 lg:grid-cols-4 gap-6″>
{services.map((item, idx) => (
<div key={idx} className=”group p-8 rounded-[2rem] bg-white/5 border border-white/5 hover:bg-white/[0.08] hover:border-white/10 transition-all duration-500″>
<div className={`w-14 h-14 rounded-2xl bg-gradient-to-tr ${item.color} flex items-center justify-center text-white mb-8 shadow-lg group-hover:scale-110 transition-transform duration-500`}>
{item.icon}
</div>
<h3 className=”text-xl font-bold text-white mb-4″>{item.title}</h3>
<p className=”text-slate-400 text-sm leading-relaxed”>{item.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* Trust Badges */}
<div className=”bg-white/5 py-10 border-y border-white/5″>
<div className=”max-w-7xl mx-auto px-6 overflow-hidden flex flex-wrap justify-center md:justify-between items-center gap-12 opacity-30 grayscale hover:opacity-60 transition-opacity”>
<div className=”flex items-center gap-2 font-bold text-2xl tracking-tighter italic”>FUJIFILM</div>
<div className=”flex items-center gap-2 font-bold text-2xl tracking-tighter italic”>ADOBE</div>
<div className=”flex items-center gap-2 font-bold text-2xl tracking-tighter italic”>KODAK</div>
<div className=”flex items-center gap-2 font-bold text-2xl tracking-tighter italic”>EPSON</div>
<div className=”flex items-center gap-2 font-bold text-2xl tracking-tighter italic”>CANON</div>
</div>
</div>
{/* Pricing Section */}
<section id=”harga” className=”py-32 px-6 relative”>
<div className=”absolute bottom-0 right-0 w-[500px] h-[500px] bg-purple-600/5 blur-[120px] rounded-full -z-10″></div>
<div className=”max-w-7xl mx-auto text-center mb-20″>
<h2 className=”text-4xl font-bold text-white mb-4″>Investasi Kenangan</h2>
<p className=”text-slate-400″>Harga transparan tanpa biaya tersembunyi.</p>
</div>
<div className=”max-w-5xl mx-auto grid md:grid-cols-3 gap-8″>
{[
{
name: “Essential”,
price: “45K”,
features: [“1 Foto Restoration”, “Natural Upscaling”, “Selesai 12 Jam”, “1x Revisi”],
highlight: false
},
{
name: “Professional”,
price: “125K”,
features: [“3 Foto Restoration”, “Advanced Retouching”, “Colorization”, “Selesai 6 Jam”, “Unlimited Revisi”],
highlight: true
},
{
name: “Family Heritage”,
price: “350K”,
features: [“10 Foto Restoration”, “Full HD Upscaling”, “Format Cetak Ready”, “Express 3 Jam”, “Priority Support”],
highlight: false
}
].map((plan, i) => (
<div key={i} className={`p-10 rounded-[2.5rem] border ${plan.highlight ? ‘bg-blue-600 border-blue-500 shadow-2xl shadow-blue-500/20 scale-105’ : ‘bg-white/5 border-white/10’} transition-all`}>
<h4 className={`text-lg font-bold mb-1 ${plan.highlight ? ‘text-white’ : ‘text-blue-400’}`}>{plan.name}</h4>
<div className=”flex items-baseline gap-1 mb-8″>
<span className=”text-4xl font-black text-white”>Rp {plan.price}</span>
<span className={plan.highlight ? ‘text-blue-100’ : ‘text-slate-500’}>/paket</span>
</div>
<ul className=”space-y-4 mb-10 text-left”>
{plan.features.map((f, j) => (
<li key={j} className=”flex items-center gap-3 text-sm”>
<CheckCircle className={`w-4 h-4 ${plan.highlight ? ‘text-blue-200’ : ‘text-blue-500’}`} />
<span className={plan.highlight ? ‘text-white’ : ‘text-slate-400’}>{f}</span>
</li>
))}
</ul>
<button className={`w-full py-4 rounded-2xl font-black uppercase tracking-widest text-sm transition-all ${plan.highlight ? ‘bg-white text-blue-600 hover:shadow-xl’ : ‘bg-white/10 text-white hover:bg-white/20’}`}>
Pilih Paket
</button>
</div>
))}
</div>
</section>
{/* FAQ Section */}
<section id=”faq” className=”py-32 px-6″>
<div className=”max-w-3xl mx-auto”>
<h2 className=”text-3xl font-bold text-white text-center mb-12″>Pertanyaan Populer</h2>
<div className=”space-y-4″>
{faqs.map((faq, i) => (
<div key={i} className=”border border-white/5 rounded-2xl overflow-hidden bg-white/[0.02]”>
<button
onClick={() => setActiveFaq(activeFaq === i ? null : i)}
className=”w-full p-6 text-left flex justify-between items-center hover:bg-white/[0.03] transition-colors”
>
<span className=”font-bold text-white”>{faq.q}</span>
<ChevronRight className={`w-5 h-5 text-blue-500 transition-transform ${activeFaq === i ? ‘rotate-90’ : ”}`} />
</button>
{activeFaq === i && (
<div className=”px-6 pb-6 text-slate-400 text-sm leading-relaxed animate-in slide-in-from-top-2 duration-300″>
{faq.a}
</div>
)}
</div>
))}
</div>
</div>
</section>
{/* Final CTA */}
<section className=”py-24 px-6″>
<div className=”max-w-7xl mx-auto rounded-[3rem] bg-gradient-to-br from-indigo-600 to-blue-700 p-12 lg:p-24 text-center relative overflow-hidden shadow-3xl”>
<div className=”absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none”>
<svg width=”100%” height=”100%” viewBox=”0 0 100 100″ preserveAspectRatio=”none”>
<pattern id=”grid” width=”10″ height=”10″ patternUnits=”userSpaceOnUse”>
<path d=”M 10 0 L 0 0 0 10″ fill=”none” stroke=”white” strokeWidth=”0.5″/>
</pattern>
<rect width=”100″ height=”100″ fill=”url(#grid)” />
</svg>
</div>
<h2 className=”text-4xl lg:text-6xl font-black text-white mb-8 tracking-tighter”>FOTO RUSAK? KAMI PERBAIKI.</h2>
<p className=”text-blue-100 text-xl max-w-2xl mx-auto mb-12″>
Jangan biarkan kenangan berharga Anda pudar dimakan waktu. Klik tombol di bawah dan konsultasikan foto Anda gratis sekarang juga.
</p>
<div className=”flex flex-col sm:flex-row justify-center gap-4″>
<button className=”px-10 py-5 bg-white text-blue-600 rounded-2xl font-black text-xl hover:scale-105 active:scale-95 transition-all shadow-2xl”>
KONSULTASI VIA WA
</button>
<div className=”flex items-center justify-center gap-2 text-white/80 font-bold px-6″>
<Star className=”w-5 h-5 fill-yellow-400 text-yellow-400″ /> 4.9/5 Rating Pelanggan
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className=”pt-20 pb-10 px-6 border-t border-white/5″>
<div className=”max-w-7xl mx-auto”>
<div className=”grid grid-cols-2 md:grid-cols-4 gap-12 mb-20″>
<div className=”col-span-2 md:col-span-1 space-y-6″>
<div className=”flex items-center gap-3″>
<div className=”w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center”>
<Wand2 className=”text-white w-5 h-5″ />
</div>
<span className=”text-xl font-black text-white tracking-tighter uppercase”>Gem AI</span>
</div>
<p className=”text-sm text-slate-500 leading-relaxed”>
Platform restorasi foto berbasis AI yang menggabungkan presisi mesin dengan estetika manusia.
</p>
</div>
<div>
<h5 className=”font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]”>Navigasi</h5>
<ul className=”space-y-4 text-sm text-slate-500 font-medium”>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Portofolio</a></li>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Cara Kerja</a></li>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Harga Paket</a></li>
</ul>
</div>
<div>
<h5 className=”font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]”>Legal</h5>
<ul className=”space-y-4 text-sm text-slate-500 font-medium”>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Privacy Policy</a></li>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Terms of Service</a></li>
<li><a href=”#” className=”hover:text-blue-400 transition-colors”>Cookie Policy</a></li>
</ul>
</div>
<div>
<h5 className=”font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]”>Ikuti Kami</h5>
<div className=”flex gap-4″>
{[1,2,3].map(i => (
<div key={i} className=”w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center hover:border-blue-500/50 hover:text-blue-400 transition-all cursor-pointer”>
<Star className=”w-4 h-4″ />
</div>
))}
</div>
</div>
</div>
<div className=”flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 gap-4″>
<p className=”text-xs text-slate-600 font-medium”>© 2024 GEM AI PHOTO STUDIO. ALL RIGHTS RESERVED.</p>
<div className=”flex items-center gap-2 text-xs text-slate-600″>
MADE WITH <Zap className=”w-3 h-3 text-yellow-500 fill-current” /> IN INDONESIA
</div>
</div>
</div>
</footer>
{/* Mobile Floating Action Button */}
<div className=”fixed bottom-6 right-6 md:hidden z-50″>
<button className=”w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-2xl text-white”>
<MessageCircle className=”w-8 h-8″ />
</button>
</div>
</div>
);
};
export default App;
