File Manager

✏️ /

<?php
/**
 * DECOPAINT Company Profile - B2B & Corporate Credibility Hub
 * Strategic Goal: Build professional digital presence + drive qualified leads
 * Target: Conversion Rate 25% minimum | Lead Response Time < 15 minutes
 * Design: Elegant, Modern, & Conversion-Optimized
 */

// Simulating header data - replace with actual database queries
$company = [
    'name' => 'DECOPAINT',
    'tagline' => 'Solusi Cat Dekoratif Profesional untuk Transformasi Hunian & Bisnis',
    'phone' => '+62 XXX XXXX XXXX',
    'whatsapp' => 'https://wa.me/62XXXXXXXXXX',
    'email' => 'info@decopaint.co.id',
    'address' => 'Jl. Raya [Address], Jakarta, Indonesia',
    'hours' => 'Mon-Fri: 08:00-18:00 | Sat: 08:00-16:00 | Night Shift: 19:00-22:00'
];

$products = [
    [
        'id' => 1,
        'name' => 'Premium Interior Paint',
        'category' => 'Interior',
        'color' => '#E8B4B8',
        'features' => ['Anti-Fungal', 'Easy to Clean', 'Long-lasting'],
        'stock' => 45,
        'image' => '/assets/products/interior-premium.jpg'
    ],
    [
        'id' => 2,
        'name' => 'Exterior Protective Coating',
        'category' => 'Eksterior',
        'color' => '#D4A574',
        'features' => ['UV Protection', 'Weather Resistant', 'Eco-Friendly'],
        'stock' => 12,
        'image' => '/assets/products/exterior-coating.jpg'
    ],
    [
        'id' => 3,
        'name' => 'Furniture Specialty Finish',
        'category' => 'Furniture',
        'color' => '#B8956A',
        'features' => ['Smooth Finish', 'Durable', 'Professional Grade'],
        'stock' => 8,
        'image' => '/assets/products/furniture-finish.jpg'
    ]
];

$testimonials = [
    [
        'client' => 'PT. Indomura',
        'rating' => 5,
        'review' => 'Layanan profesional dan hasil berkualitas tinggi. Merekomendasikan untuk semua proyek besar.',
        'project' => 'Commercial Office Building - Jakarta Selatan',
        'icon' => '🏢'
    ],
    [
        'client' => 'Budi Residence',
        'rating' => 4.8,
        'review' => 'Timnya cepat, produknya awet, harganya kompetitif. Sangat puas!',
        'project' => 'Residential Complex - Tangerang',
        'icon' => '🏠'
    ]
];

$portfolio_projects = [
    ['title' => 'Modern Office Complex', 'location' => 'Jakarta Selatan', 'year' => 2024, 'color' => '#FF6B6B'],
    ['title' => 'Luxury Residential Tower', 'location' => 'Tangerang', 'year' => 2023, 'color' => '#4ECDC4'],
    ['title' => 'Retail Shopping Mall', 'location' => 'Jakarta Pusat', 'year' => 2023, 'color' => '#FFE66D']
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="DECOPAINT - Solusi Cat Dekoratif Profesional untuk Hunian & Bisnis. Produk berkualitas dengan tim ahli berpengalaman.">
    <title>DECOPAINT - Solusi Cat Dekoratif Profesional</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary: #8A1538;
            --primary-dark: #5A0E25;
            --accent: #D4AF37;
            --accent-light: #F4E8C1;
            --text-dark: #111111;
            --text-light: #555555;
            --bg-light: #F8F9FA;
            --bg-white: #FFFFFF;
            --shadow-sm: 0 4px 12px rgba(0,0,0,0.04);
            --shadow-md: 0 12px 32px rgba(0,0,0,0.08);
            --shadow-lg: 0 24px 48px rgba(0,0,0,0.12);
            --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            --radius-md: 12px;
            --radius-lg: 24px;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--bg-light);
            overflow-x: hidden;
        }

/* ============ HEADER & NAVIGATION ============ */
        header {
            background: var(--bg-white);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, #B81D4A 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -1px;
        }

.nav-menu {
            display: flex;
            gap: 3rem;
            list-style: none;
            align-items: center;
        }

.nav-menu a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            font-size: 0.95rem;
            position: relative;
            transition: var(--transition);
        }

.nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width 0.3s ease;
        }

.nav-menu a:hover::after {
            width: 50%;
        }

.cta-btn {
            background: var(--primary);
            color: white;
            padding: 0.8rem 2rem;
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
        }

.cta-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transition: left 0.3s ease;
        }

.cta-btn:hover::before {
            left: 100%;
        }

.cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(138, 21, 56, 0.25);
            background: var(--primary-dark);
        }

/* ============ HERO SECTION ============ */
        .hero {
            background: linear-gradient(135deg, #1A040A 0%, #3D0A18 100%);
            color: white;
            padding: 8rem 2rem;
            text-align: center;
            min-height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
            border-radius: 50%;
        }

.hero::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -5%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
            border-radius: 50%;
        }

.hero-content {
            position: relative;
            z-index: 10;
            max-width: 700px;
            animation: slideUp 0.8s ease;
        }

@keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 4rem;
            margin-bottom: 1rem;
            line-height: 1.2;
            font-weight: 800;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
            font-weight: 300;
            letter-spacing: 0.5px;
            opacity: 0.95;
        }

.hero-cta {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }

.hero-cta button, .hero-cta a {
            padding: 1rem 2.5rem;
            font-size: 1rem;
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow-lg);
        }

.hero-cta .primary {
            background-color: var(--accent);
            color: var(--text-dark);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

.hero-cta .primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 32px rgba(212, 175, 55, 0.3);
        }

.hero-cta .secondary {
            background-color: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
            box-shadow: none;
        }

.hero-cta .secondary:hover {
            background-color: rgba(212, 175, 55, 0.1);
            transform: translateY(-3px);
        }

/* ============ VALUE PROPOSITION ============ */
        .value-proposition {
            padding: 5rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

.section-title {
            font-family: 'Playfair Display', serif;
            text-align: center;
            font-size: 2.8rem;
            margin-bottom: 1rem;
            color: var(--text-dark);
            font-weight: 800;
        }

.section-subtitle {
            text-align: center;
            color: var(--text-light);
            font-size: 1.1rem;
            margin-bottom: 3rem;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 300;
        }

.values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
        }

.value-card {
            background: var(--bg-white);
            padding: 3rem 2.5rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            text-align: center;
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.03);
            position: relative;
            overflow: hidden;
        }

.value-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 4px;
            background: var(--accent);
            transition: left 0.3s ease;
        }

.value-card:hover::before {
            left: 100%;
        }

.value-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

.value-card h3 {
            color: var(--primary);
            font-size: 1.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }

.value-card p {
            color: var(--text-light);
            line-height: 1.8;
        }

/* ============ PRODUCTS SHOWCASE ============ */
        .products {
            background: var(--bg-light);
            padding: 6rem 2rem;
        }

.products-content {
            max-width: 1400px;
            margin: 0 auto;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }

.product-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border: 1px solid rgba(0,0,0,0.03);
        }

.product-card:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-lg);
        }

.product-image {
            width: 100%;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 3rem;
            position: relative;
            overflow: hidden;
        }

.product-image::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

.product-details {
            padding: 2rem;
        }

.product-category {
            color: var(--primary);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

.product-details h3 {
            color: var(--text-dark);
            margin-bottom: 0.5rem;
            font-weight: 700;
            font-size: 1.3rem;
        }

.product-features {
            list-style: none;
            margin-bottom: 1.5rem;
            margin-top: 1rem;
        }

.product-features li {
            color: var(--text-light);
            padding: 0.5rem 0;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }

.product-features li::before {
            content: '✓';
            color: var(--primary);
            font-weight: bold;
            font-size: 1.2rem;
        }

.stock-label {
            display: inline-block;
            background: rgba(212, 175, 55, 0.15);
            color: #A08018;
            padding: 0.4rem 1rem;
            border-radius: var(--radius-md);
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

.product-actions {
            display: flex;
            gap: 0.7rem;
        }

.product-actions button, .product-actions a {
            flex: 1;
            padding: 0.85rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            text-align: center;
            font-size: 0.95rem;
        }

.btn-buy {
            background: var(--primary);
            color: white;
            box-shadow: var(--shadow-md);
        }

.btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(138, 21, 56, 0.3);
            background: var(--primary-dark);
        }

.btn-whatsapp {
            background: transparent;
            color: var(--text-dark);
            border: 1px solid #E0E0E0;
        }

.btn-whatsapp:hover {
            transform: translateY(-2px);
            border-color: #25D366;
            color: #25D366;
        }

/* ============ PORTFOLIO / PROJECT SHOWCASE ============ */
        .portfolio {
            padding: 6rem 2rem;
            background: var(--bg-white);
        }

.portfolio-content {
            max-width: 1400px;
            margin: 0 auto;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }

.project-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            border: 1px solid rgba(0,0,0,0.03);
        }

.project-card:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-lg);
        }

.project-image {
            width: 100%;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 2.5rem;
            position: relative;
            overflow: hidden;
        }

.project-image::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.1);
            transition: var(--transition);
        }

.project-card:hover .project-image::before {
            background: rgba(0,0,0,0.3);
        }

.project-info {
            padding: 2rem;
        }

.project-info h3 {
            color: var(--text-dark);
            margin-bottom: 0.7rem;
            font-weight: 700;
            font-size: 1.3rem;
        }

.project-info p {
            color: var(--text-light);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

/* ============ TESTIMONIALS / SOCIAL PROOF ============ */
        .testimonials {
            padding: 6rem 2rem;
            background: var(--bg-light);
        }

.testimonials-wrapper {
            max-width: 1400px;
            margin: 0 auto;
        }

.testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }

.testimonial-card {
            background: var(--bg-white);
            padding: 3rem 2.5rem;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.03);
        }

.testimonial-card::before {
            content: '❝';
            position: absolute;
            top: -10px;
            right: 15px;
            font-size: 4rem;
            color: rgba(212, 175, 55, 0.1);
            font-family: Georgia, serif;
        }

.testimonial-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

.testimonial-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

.stars {
            color: #FFB300;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            letter-spacing: 2px;
        }

.testimonial-text {
            color: var(--text-light);
            font-style: italic;
            margin-bottom: 1.5rem;
            line-height: 1.8;
            font-weight: 300;
        }

.testimonial-author {
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.3rem;
            font-size: 1.05rem;
        }

.testimonial-project {
            color: var(--text-light);
            font-size: 0.85rem;
        }

/* ============ CTA SECTION ============ */
        .cta-section {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
            color: white;
            padding: 5rem 2rem;
            text-align: center;
            margin: 5rem 2rem;
            border-radius: var(--radius-lg);
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            box-shadow: var(--shadow-lg);
        }

.cta-section::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -5%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
            border-radius: 50%;
        }

.cta-section-content {
            position: relative;
            z-index: 10;
        }

.cta-section h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem;
            margin-bottom: 1rem;
            font-weight: 800;
        }

.cta-section p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            font-weight: 300;
            opacity: 0.95;
        }
        
        .cta-section .cta-btn {
            background: white;
            color: var(--primary);
        }
        
        .cta-section .cta-btn:hover {
            background: var(--bg-light);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }

/* ============ FOOTER ============ */
        footer {
            background-color: #111111;
            color: white;
            padding: 5rem 2rem 1rem;
        }

.footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

.footer-section h3 {
            margin-bottom: 1rem;
            color: var(--bg-white);
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 1px;
        }

.footer-section p, .footer-section a {
            font-size: 0.9rem;
            line-height: 2.2;
            color: #aaa;
            text-decoration: none;
            transition: var(--transition);
        }

.footer-section a:hover {
            color: var(--bg-white);
        }

.footer-divider {
            border-top: 1px solid rgba(255,255,255,0.05);
            padding-top: 2rem;
            margin-top: 3rem;
            text-align: center;
            font-size: 0.85rem;
            color: #555;
        }

/* ============ RESPONSIVE ============ */
        @media (max-width: 768px) {
            .nav-menu {
                gap: 1.5rem;
            }

.hero h1 {
                font-size: 2.2rem;
            }

.hero p {
                font-size: 1rem;
            }

.section-title {
                font-size: 2rem;
            }

.cta-section h2 {
                font-size: 1.8rem;
            }

.hero-cta {
                flex-direction: column;
            }

.hero-cta button, .hero-cta a {
                width: 100%;
            }
        }

/* ============ ANIMATIONS ============ */
        .fade-in {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }
        .delay-5 { transition-delay: 0.5s; }
        .delay-6 { transition-delay: 0.6s; }
    </style>
</head>
<body>
    
    <header>
        <nav>
            <div class="logo">DECOPAINT</div>
            <ul class="nav-menu">
                <li><a href="#products">Produk</a></li>
                <li><a href="#portfolio">Proyek</a></li>
                <li><a href="#about">Tentang Kami</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
            <a href="<?php echo $company['whatsapp']; ?>" class="cta-btn">📞 Konsultasi Gratis</a>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h1><?php echo htmlspecialchars($company['tagline']); ?></h1>
            <p>Transformasi Ruang Anda dengan Solusi Cat Premium yang Tahan Lama & Estetik</p>
            <div class="hero-cta">
                <button class="primary" onclick="document.getElementById('products').scrollIntoView({behavior: 'smooth'})">🎨 Lihat Katalog</button>
                <a href="<?php echo $company['whatsapp']; ?>" class="secondary">💬 Konsultasi Gratis</a>
            </div>
        </div>
    </section>

<section class="value-proposition" id="about">
        <h2 class="section-title fade-in">Mengapa Pilih DECOPAINT?</h2>
        <p class="section-subtitle fade-in delay-1">Kami menghadirkan solusi cat dekoratif terbaik dengan teknologi modern dan layanan profesional</p>
        <div class="values-grid">
            <div class="value-card fade-in delay-1">
                <h3>🛡️ Anti-Fungal & Anti-Bakteri</h3>
                <p>Teknologi canggih melindungi dari jamur dan bakteri, tahan lama hingga 10 tahun di segala cuaca</p>
            </div>
            <div class="value-card fade-in delay-2">
                <h3>🧹 Mudah Dibersihkan</h3>
                <p>Permukaan halus yang tahan terhadap noda dan debu, mempertahankan estetika lebih lama</p>
            </div>
            <div class="value-card fade-in delay-3">
                <h3>⚡ Cepat Kering</h3>
                <p>Formula khusus memungkinkan pengeringan optimal dalam 24 jam, pekerjaan selesai lebih cepat</p>
            </div>
            <div class="value-card fade-in delay-4">
                <h3>🌍 Eco-Friendly</h3>
                <p>Ramah lingkungan dengan VOC rendah, aman untuk keluarga, hewan peliharaan, dan alam</p>
            </div>
            <div class="value-card fade-in delay-5">
                <h3>💰 Harga Kompetitif</h3>
                <p>Kualitas premium dengan harga terjangkau untuk semua segmen pasar, promo menarik setiap bulan</p>
            </div>
            <div class="value-card fade-in delay-6">
                <h3>👥 Tim Profesional</h3>
                <p>Teknisi bersertifikat siap memberikan konsultasi gratis dan aplikasi terbaik sesuai kebutuhan</p>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="products-content">
            <h2 class="section-title fade-in">Katalog Produk Premium</h2>
            <p class="section-subtitle fade-in delay-1">Pilih produk terbaik untuk kebutuhan spesifik Anda</p>
            <div class="products-grid">
                <?php $delay = 1; foreach ($products as $product): ?>
                <div class="product-card fade-in delay-<?php echo $delay; ?>">
                    <div class="product-image" style="background: linear-gradient(135deg, <?php echo $product['color']; ?> 0%, <?php echo $product['color']; ?>dd 100%);">
                        🎨
                    </div>
                    <div class="product-details">
                        <div class="product-category"><?php echo htmlspecialchars($product['category']); ?></div>
                        <h3><?php echo htmlspecialchars($product['name']); ?></h3>
                        
                        <?php if ($product['stock'] < 15): ?>
                        <span class="stock-label">⚡ Stok Terbatas (<?php echo $product['stock']; ?> unit)</span>
                        <?php endif; ?>

<div class="product-actions">
                            <button class="btn-buy" onclick="alert('Fitur checkout sedang dalam pengembangan')">🛒 Beli</button>
                            <a href="<?php echo $company['whatsapp']; ?>" class="btn-whatsapp">💬 Tanya</a>
                        </div>
                    </div>
                </div>
                <?php $delay++; endforeach; ?>
            </div>
        </div>
    </section>

<section class="portfolio" id="portfolio">
        <div class="portfolio-content">
            <h2 class="section-title fade-in">Proyek Unggulan Kami</h2>
            <p class="section-subtitle fade-in delay-1">Lihat hasil kerja profesional kami di berbagai proyek besar</p>
            <div class="projects-grid">
                <?php $delay = 1; foreach ($portfolio_projects as $project): ?>
                <div class="project-card fade-in delay-<?php echo $delay; ?>">
                    <div class="project-image" style="background: linear-gradient(135deg, <?php echo $project['color']; ?> 0%, <?php echo $project['color']; ?>dd 100%);">
                        📸
                    </div>
                    <div class="project-info">
                        <h3><?php echo htmlspecialchars($project['title']); ?></h3>
                        <p>📍 <?php echo htmlspecialchars($project['location']); ?></p>
                        <p>📅 Tahun <?php echo $project['year']; ?></p>
                    </div>
                </div>
                <?php $delay++; endforeach; ?>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="testimonials-wrapper">
            <h2 class="section-title fade-in">Kepuasan Klien Kami</h2>
            <p class="section-subtitle fade-in delay-1">Testimoni nyata dari klien yang telah merasakan kualitas layanan DECOPAINT</p>
            <div class="testimonials-grid">
                <?php $delay = 1; foreach ($testimonials as $testimonial): ?>
                <div class="testimonial-card fade-in delay-<?php echo $delay; ?>">
                    <div class="testimonial-icon"><?php echo $testimonial['icon']; ?></div>
                    <div class="stars">
                        <?php 
                        for ($i = 0; $i < floor($testimonial['rating']); $i++) {
                            echo '★';
                        }
                        if ($testimonial['rating'] - floor($testimonial['rating']) >= 0.5) {
                            echo '★';
                        }
                        echo " " . $testimonial['rating'];
                        ?>
                    </div>
                    <div class="testimonial-text">"<?php echo htmlspecialchars($testimonial['review']); ?>"</div>
                    <div class="testimonial-author">— <?php echo htmlspecialchars($testimonial['client']); ?></div>
                    <div class="testimonial-project">📌 <?php echo htmlspecialchars($testimonial['project']); ?></div>
                </div>
                <?php $delay++; endforeach; ?>
            </div>
        </div>
    </section>

<section class="cta-section">
        <div class="cta-section-content fade-in">
            <h2>Siap Transformasi Ruang Anda?</h2>
            <p>Hubungi tim kami sekarang untuk konsultasi gratis dan penawaran spesial</p>
            <a href="<?php echo $company['whatsapp']; ?>" class="cta-btn">💬 Chat via WhatsApp (Golden Hour 18:00-22:00)</a>
        </div>
    </section>

<footer id="contact" style="background: #0A0A0A; padding: 5rem 2rem 1rem; position: relative; overflow: hidden; margin-top: 3rem; border-top: 4px solid var(--primary);">
        <div class="footer-content" style="position: relative; z-index: 1;">
            <div class="footer-section">
                <h3>🎨 DECOPAINT</h3>
                <p><?php echo htmlspecialchars($company['tagline']); ?></p>
                <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
                    <a href="#" style="color: white; background: rgba(255,255,255,0.05); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s;">f</a>
                    <a href="#" style="color: white; background: rgba(255,255,255,0.05); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s;">in</a>
                    <a href="#" style="color: white; background: rgba(255,255,255,0.05); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s;">ig</a>
                </div>
            </div>
            <div class="footer-section">
                <h3>☎️ Hubungi Kami</h3>
                <p><a href="tel:<?php echo str_replace([' ', '-'], '', $company['phone']); ?>" style="display: flex; align-items: center; gap: 0.5rem;">📞 <?php echo htmlspecialchars($company['phone']); ?></a></p>
                <p><a href="mailto:<?php echo htmlspecialchars($company['email']); ?>" style="display: flex; align-items: center; gap: 0.5rem;">✉️ <?php echo htmlspecialchars($company['email']); ?></a></p>
                <p style="display: flex; align-items: center; gap: 0.5rem;">📍 <?php echo htmlspecialchars($company['address']); ?></p>
            </div>
            <div class="footer-section">
                <h3>⏰ Jam Operasional</h3>
                <p>Senin-Jumat: 08:00-18:00</p>
                <p>Sabtu: 08:00-16:00</p>
                <p>🌙 Night Shift: 19:00-22:00</p>
            </div>
            <div class="footer-section">
                <h3>🔗 Navigasi Cepat</h3>
                <p><a href="#products">Katalog Produk</a></p>
                <p><a href="#portfolio">Proyek Kami</a></p>
                <p><a href="#about">Tentang Kami</a></p>
                <p><a href="#">Kebijakan Privasi</a></p>
            </div>
        </div>
        <div class="footer-divider">
            <p>&copy; <?php echo date('Y'); ?> DECOPAINT - Solusi Cat Dekoratif Profesional Untuk Indonesia. Semua Hak Dilindungi.</p>
        </div>
    </footer>

// Fade In Animation on Scroll (Intersection Observer)
        const fadeElements = document.querySelectorAll('.fade-in');
        const fadeObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target); // Stop observing once visible
                }
            });
        }, {
            root: null,
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

fadeElements.forEach(el => fadeObserver.observe(el));

// Golden Hour notification (18:00-22:00)
        const currentHour = new Date().getHours();
        if (currentHour >= 18 && currentHour < 22) {
            console.log('🌙 GOLDEN HOUR: Tim sales kami siap melayani dengan response time < 15 menit!');
        }

// Conversion tracking
        console.log('📊 Conversion Target: 25% | Lead Response: < 15 min | Quality Score: 95%');
    </script>
</body>
</html>

Batal

⬅ decopaint.co.id 17 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁OLD	dir	—	2026-06-12 18:15	📂 Buka
📁admin	dir	—	2026-09-15 04:12	📂 Buka
📁api	dir	—	2026-08-10 16:36	📂 Buka
📁inc	dir	—	2026-08-06 11:38	📂 Buka
📁uploads	dir	—	2026-09-01 04:07	📂 Buka
🐘company.php	php	36.8 KB	2026-06-12 18:48	✏️ 👁️
🐘config.php	php	1.1 KB	2026-08-01 11:23	✏️ 👁️
🌐decopaint-admin-login.html	html	10 KB	2026-09-15 03:20	✏️ 👁️
📄error_log	file	846 B	2026-08-16 11:21	✏️ 👁️
🖼️icon.png	png	28.4 KB	2026-07-05 22:38	✏️ 👁️
🐘index.php	php	137.8 KB	2026-09-15 03:16	✏️ 👁️
🐘index_old.php	php	96.2 KB	2026-07-12 17:21	✏️ 👁️
🐘login.php	php	3.5 KB	2026-08-05 18:57	✏️ 👁️
🐘logout.php	php	103 B	2026-08-01 11:49	✏️ 👁️
🌐permintaan.html	html	81.2 KB	2026-09-01 04:53	✏️ 👁️
🐘ss.php	php	36.7 KB	2026-09-13 09:27	✏️ 👁️
🐘visitor_log.php	php	3 KB	2026-09-01 04:52	✏️ 👁️

✏️ Rename