<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Codepedia Indonesia | Solusi Digital & Teknologi untuk Bisnis</title>

    <meta name="description"
          content="Codepedia Indonesia membantu bisnis berkembang melalui website, aplikasi, sistem informasi, IT support, UI/UX design, digital marketing, dan solusi teknologi digital.">

    <meta name="keywords"
          content="Codepedia Indonesia, codepedia.id, jasa pembuatan website, jasa aplikasi, sistem informasi, IT support, UI UX design, digital marketing, software development">

    <meta name="author" content="Codepedia Indonesia">

    <link rel="canonical" href="https://codepedia.id/">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title"
          content="Codepedia Indonesia | Solusi Digital & Teknologi untuk Bisnis">
    <meta property="og:description"
          content="Membangun solusi digital yang membantu bisnis bekerja lebih efektif, terintegrasi, dan siap berkembang.">
    <meta property="og:url" content="https://codepedia.id/">
    <meta property="og:site_name" content="Codepedia Indonesia">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title"
          content="Codepedia Indonesia | Digital Technology Partner">
    <meta name="twitter:description"
          content="Website, aplikasi, sistem informasi, IT support, UI/UX dan digital marketing untuk bisnis.">

    <!-- Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
          rel="stylesheet">

    <style>

        :root {
            --bg: #050816;
            --bg-soft: #0a1022;
            --surface: #0d1428;
            --surface-2: #111a32;

            --text: #f8fafc;
            --muted: #94a3b8;

            --primary: #4f8cff;
            --primary-light: #70a7ff;
            --cyan: #22d3ee;

            --border: rgba(255,255,255,.09);

            --container: 1180px;

            --radius-lg: 28px;
            --radius-md: 18px;

            --shadow:
                0 20px 60px rgba(0,0,0,.25);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            width: min(92%, var(--container));
            margin: auto;
        }

        /* =========================
           NAVBAR
        ========================= */

        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;

            background:
                rgba(5,8,22,.72);

            backdrop-filter: blur(18px);

            border-bottom:
                1px solid rgba(255,255,255,.05);
        }

        .nav {
            height: 78px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 11px;

            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.7px;
        }

        .logo img {
            max-height: 40px;
            width: auto;
            object-fit: contain;
        }

        .nav-links {
            display: flex;
            gap: 30px;

            color: #cbd5e1;
            font-size: 14px;
            font-weight: 500;
        }

        .nav-links a {
            transition: .25s;
        }

        .nav-links a:hover {
            color: white;
        }

        .nav-cta {
            padding: 11px 18px;

            border-radius: 10px;

            background: white;
            color: #07101f;

            font-size: 13px;
            font-weight: 700;

            transition: .25s;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow:
                0 10px 30px rgba(255,255,255,.15);
        }

        /* =========================
           HERO
        ========================= */

        .hero {
            min-height: 100vh;

            display: flex;
            align-items: center;

            position: relative;

            padding-top: 120px;

            background:
                radial-gradient(
                    circle at 75% 25%,
                    rgba(79,140,255,.16),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 20% 80%,
                    rgba(34,211,238,.08),
                    transparent 30%
                );
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;

            gap: 80px;

            align-items: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;

            padding: 7px 12px;

            border:
                1px solid rgba(112,167,255,.25);

            border-radius: 999px;

            background:
                rgba(79,140,255,.08);

            color: #a9c8ff;

            font-size: 12px;
            font-weight: 600;

            margin-bottom: 25px;
        }

        .eyebrow-dot {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: var(--cyan);

            box-shadow:
                0 0 12px var(--cyan);
        }

        h1 {
            font-size: clamp(42px, 6vw, 76px);

            line-height: 1.04;

            letter-spacing: -3.5px;

            max-width: 760px;

            margin-bottom: 27px;
        }

        .gradient-text {
            background:
                linear-gradient(
                    90deg,
                    #ffffff,
                    #72a7ff,
                    #43e0ef
                );

            -webkit-background-clip: text;
            background-clip: text;

            color: transparent;
        }

        .hero-copy {
            color: var(--muted);

            font-size: 18px;

            max-width: 650px;

            margin-bottom: 34px;
        }

        .hero-actions {
            display: flex;
            gap: 13px;

            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            gap: 9px;

            padding: 14px 21px;

            border-radius: 12px;

            font-size: 14px;
            font-weight: 700;

            transition: .25s;
        }

        .btn-primary {
            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    #3971e8
                );

            box-shadow:
                0 12px 30px rgba(79,140,255,.25);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
        }

        .btn-secondary {
            border:
                1px solid var(--border);

            background:
                rgba(255,255,255,.025);

            color: #dbeafe;
        }

        .btn-secondary:hover {
            background:
                rgba(255,255,255,.06);
        }

        /* =========================
           TECH VISUAL
        ========================= */

        .hero-visual {
            position: relative;

            min-height: 460px;
        }

        .orb {
            position: absolute;

            width: 320px;
            height: 320px;

            border-radius: 50%;

            top: 50%;
            left: 50%;

            transform:
                translate(-50%, -50%);

            background:
                radial-gradient(
                    circle at 35% 30%,
                    rgba(112,167,255,.9),
                    rgba(79,140,255,.25) 35%,
                    transparent 68%
                );

            filter:
                blur(2px);

            opacity: .65;
        }

        .code-card {
            position: absolute;

            width: 390px;

            top: 50%;
            left: 50%;

            transform:
                translate(-50%, -50%)
                rotate(-3deg);

            padding: 25px;

            background:
                rgba(13,20,40,.85);

            backdrop-filter:
                blur(20px);

            border:
                1px solid rgba(255,255,255,.12);

            border-radius: 20px;

            box-shadow:
                0 35px 100px rgba(0,0,0,.45);
        }

        .terminal {
            display: flex;
            gap: 7px;

            margin-bottom: 20px;
        }

        .terminal span {
            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: #475569;
        }

        .code {
            font-family:
                "SFMono-Regular",
                Consolas,
                monospace;

            font-size: 13px;

            color: #94a3b8;

            line-height: 2;
        }

        .code .blue {
            color: #70a7ff;
        }

        .code .cyan {
            color: #4de1ed;
        }

        .code .green {
            color: #86efac;
        }

        /* =========================
           TRUST
        ========================= */

        .trust {
            padding: 28px 0;

            border-top:
                1px solid var(--border);

            border-bottom:
                1px solid var(--border);
        }

        .trust-inner {
            display: flex;

            justify-content:
                space-between;

            align-items: center;

            gap: 30px;

            flex-wrap: wrap;
        }

        .trust-label {
            color: #64748b;

            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 1.5px;
        }

        .trust-items {
            display: flex;
            gap: 35px;

            color: #64748b;

            font-weight: 700;

            font-size: 14px;
        }

        /* =========================
           SECTION
        ========================= */

        section {
            padding: 110px 0;
        }

        .section-heading {
            max-width: 700px;

            margin-bottom: 55px;
        }

        .section-label {
            color: var(--primary-light);

            font-size: 12px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            margin-bottom: 12px;
        }

        h2 {
            font-size:
                clamp(32px, 4vw, 52px);

            line-height: 1.1;

            letter-spacing: -2px;

            margin-bottom: 18px;
        }

        .section-description {
            color: var(--muted);

            font-size: 16px;
        }

        /* =========================
           ABOUT
        ========================= */

        .about-grid {
            display: grid;

            grid-template-columns:
                .8fr 1.2fr;

            gap: 80px;

            align-items: center;
        }

        .about-card {
            padding: 35px;

            border:
                1px solid var(--border);

            border-radius: var(--radius-lg);

            background:
                linear-gradient(
                    145deg,
                    rgba(79,140,255,.09),
                    rgba(255,255,255,.02)
                );
        }

        .about-number {
            font-size: 80px;

            line-height: 1;

            font-weight: 800;

            letter-spacing: -5px;

            background:
                linear-gradient(
                    135deg,
                    #fff,
                    #548eff
                );

            -webkit-background-clip: text;
            color: transparent;
        }

        .about-small {
            color: var(--muted);

            font-size: 14px;

            margin-top: 12px;
        }

        .about-content p {
            color: var(--muted);

            margin-bottom: 20px;
        }

        /* =========================
           SERVICES
        ========================= */

        .services {
            background:
                #070c1b;
        }

        .services-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 18px;
        }

        .service {
            padding: 30px;

            min-height: 250px;

            border:
                1px solid var(--border);

            border-radius:
                var(--radius-md);

            background:
                rgba(255,255,255,.018);

            transition:
                transform .3s,
                border-color .3s,
                background .3s;
        }

        .service:hover {
            transform:
                translateY(-7px);

            border-color:
                rgba(79,140,255,.4);

            background:
                rgba(79,140,255,.045);
        }

        .service-icon {
            width: 48px;
            height: 48px;

            display: grid;
            place-items: center;

            margin-bottom: 30px;

            border-radius: 13px;

            background:
                rgba(79,140,255,.1);

            border:
                1px solid rgba(79,140,255,.16);

            color: var(--primary-light);

            font-size: 20px;
        }

        .service h3 {
            font-size: 19px;

            margin-bottom: 10px;
        }

        .service p {
            color: var(--muted);

            font-size: 14px;
        }

        /* =========================
           WHY
        ========================= */

        .why-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 20px;
        }

        .why-card {
            padding: 30px;

            border:
                1px solid var(--border);

            border-radius:
                var(--radius-md);

            background:
                var(--surface);
        }

        .why-card strong {
            display: block;

            font-size: 17px;

            margin-bottom: 10px;
        }

        .why-card p {
            color: var(--muted);

            font-size: 14px;
        }

        /* =========================
           CLIENTS
        ========================= */

        .clients {
            background:
                #070c1b;
        }

        .client-grid {
            display: grid;

            grid-template-columns:
                repeat(5, 1fr);

            gap: 14px;
        }

        .client {
            min-height: 120px;

            display: flex;

            align-items: center;
            justify-content: center;

            text-align: center;

            padding: 20px;

            border:
                1px solid var(--border);

            border-radius:
                16px;

            background:
                rgba(255,255,255,.02);

            color: #cbd5e1;

            font-weight: 700;

            font-size: 13px;

            transition: .25s;
        }

        .client img {
            max-width: 100%;
            max-height: 60px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }

        .client:hover {
            border-color:
                rgba(79,140,255,.35);

            transform:
                translateY(-3px);
        }

        /* =========================
           TESTIMONIAL
        ========================= */

        .testimonial-grid {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 18px;
        }

        .testimonial {
            padding: 35px;

            border:
                1px solid var(--border);

            border-radius:
                var(--radius-md);

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.035),
                    rgba(255,255,255,.012)
                );
        }

        .quote {
            font-size: 36px;

            color: var(--primary);

            line-height: 1;

            margin-bottom: 15px;
        }

        .testimonial p {
            color: #cbd5e1;

            font-size: 15px;

            margin-bottom: 25px;
        }

        .testimonial strong {
            font-size: 13px;
        }

        /* =========================
           PROCESS
        ========================= */

        .process {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 18px;

            counter-reset: process;
        }

        .step {
            position: relative;

            padding: 30px;

            border:
                1px solid var(--border);

            border-radius:
                var(--radius-md);

            background:
                var(--surface);
        }

        .step-number {
            width: 42px;
            height: 42px;

            display: grid;
            place-items: center;

            border-radius: 50%;

            background:
                rgba(79,140,255,.1);

            color: var(--primary-light);

            font-size: 13px;

            font-weight: 800;

            margin-bottom: 30px;
        }

        .step h3 {
            font-size: 17px;

            margin-bottom: 8px;
        }

        .step p {
            color: var(--muted);

            font-size: 13px;
        }

        /* =========================
           BLOG
        ========================= */

        .blog-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 18px;
        }

        .article {
            overflow: hidden;

            border:
                1px solid var(--border);

            border-radius:
                var(--radius-md);

            background:
                var(--surface);
        }

        .article-image {
            height: 180px;

            background:
                linear-gradient(
                    135deg,
                    #101c3a,
                    #172554
                );

            display: grid;

            place-items: center;

            font-size: 40px;

            color: #70a7ff;
        }

        .article-content {
            padding: 25px;
        }

        .article-meta {
            color: var(--primary-light);

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 10px;
        }

        .article h3 {
            font-size: 17px;

            line-height: 1.4;

            margin-bottom: 10px;
        }

        .article p {
            color: var(--muted);

            font-size: 13px;
        }

        /* =========================
           FAQ
        ========================= */

        .faq {
            max-width: 850px;

            margin: auto;
        }

        details {
            padding: 20px 0;

            border-bottom:
                1px solid var(--border);
        }

        summary {
            cursor: pointer;

            font-weight: 600;

            list-style: none;

            display: flex;

            justify-content:
                space-between;

            gap: 20px;
        }

        summary::after {
            content: "+";

            color: var(--primary-light);

            font-size: 20px;
        }

        details[open] summary::after {
            content: "−";
        }

        details p {
            color: var(--muted);

            font-size: 14px;

            padding-top: 15px;

            max-width: 750px;
        }

        /* =========================
           CTA
        ========================= */

        .cta {
            padding: 100px 0;
        }

        .cta-box {
            position: relative;

            overflow: hidden;

            padding: 75px 60px;

            border-radius:
                32px;

            background:
                linear-gradient(
                    135deg,
                    #10245b,
                    #081426
                );

            border:
                1px solid rgba(112,167,255,.22);

            text-align: center;
        }

        .cta-box::before {
            content: "";

            position: absolute;

            width: 350px;
            height: 350px;

            border-radius: 50%;

            background:
                rgba(79,140,255,.16);

            filter: blur(70px);

            top: -150px;
            right: -100px;
        }

        .cta-box > * {
            position: relative;
            z-index: 1;
        }

        .cta-box h2 {
            max-width: 800px;

            margin:
                0 auto 18px;
        }

        .cta-box p {
            color: #b8c7dc;

            max-width: 650px;

            margin:
                0 auto 30px;
        }

        /* =========================
           FOOTER
        ========================= */

        footer {
            padding:
                70px 0 30px;

            border-top:
                1px solid var(--border);
        }

        .footer-grid {
            display: grid;

            grid-template-columns:
                1.5fr 1fr 1fr;

            gap: 60px;

            padding-bottom: 60px;
        }

        .footer-brand p {
            color: var(--muted);

            max-width: 430px;

            margin-top: 15px;

            font-size: 14px;
        }

        footer h3 {
            font-size: 14px;

            margin-bottom: 18px;
        }

        .footer-links {
            display: grid;

            gap: 10px;

            color: var(--muted);

            font-size: 13px;
        }

        .footer-links a:hover {
            color: white;
        }

        .copyright {
            padding-top: 25px;

            border-top:
                1px solid var(--border);

            color: #64748b;

            font-size: 12px;

            display: flex;

            justify-content:
                space-between;

            gap: 20px;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 900px) {

            .nav-links {
                display: none;
            }

            .hero-grid,
            .about-grid {
                grid-template-columns: 1fr;

            }

            .hero {
                padding-top: 150px;
            }

            .hero-visual {
                min-height: 380px;
            }

            .services-grid,
            .why-grid,
            .blog-grid {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .client-grid {
                grid-template-columns:
                    repeat(3, 1fr);
            }

            .process {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 600px) {

            section {
                padding: 80px 0;
            }

            h1 {
                letter-spacing: -2px;
            }

            .hero-copy {
                font-size: 16px;
            }

            .code-card {
                width: 92%;

                padding: 20px;
            }

            .orb {
                width: 250px;
                height: 250px;
            }

            .services-grid,
            .why-grid,
            .testimonial-grid,
            .blog-grid,
            .process {
                grid-template-columns: 1fr;
            }

            .client-grid {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .trust-items {
                gap: 15px;

                flex-wrap: wrap;
            }

            .cta-box {
                padding: 50px 25px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .copyright {
                flex-direction: column;
            }
        }

    </style>

    <!-- Organization Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Codepedia Indonesia",
      "url": "https://codepedia.id/",
      "description": "Digital technology partner yang menyediakan website, aplikasi, sistem informasi, IT support, UI/UX design, digital marketing, workshop dan seminar.",
      "sameAs": [
        "https://instagram.com/erfianjunianto"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "customer service",
        "telephone": "+62-857-7700-8801",
        "availableLanguage": "Indonesian"
      }
    }
    </script>

    <!-- Services Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": "Layanan Codepedia Indonesia",
      "itemListElement": [
        {
          "@type": "Service",
          "name": "Pembuatan Website"
        },
        {
          "@type": "Service",
          "name": "Pembuatan Aplikasi"
        },
        {
          "@type": "Service",
          "name": "IT Support"
        },
        {
          "@type": "Service",
          "name": "Analisis Sistem"
        },
        {
          "@type": "Service",
          "name": "Workshop dan Seminar"
        },
        {
          "@type": "Service",
          "name": "UI/UX Design"
        },
        {
          "@type": "Service",
          "name": "Digital Marketing"
        }
      ]
    }
    </script>

</head>

<body>

<header>

    <div class="container nav">

        <a href="#home" class="logo" aria-label="Codepedia Indonesia">
            <img src="https://codepedia.id/wp-content/uploads/2023/11/cropped-logo-landscape-putih200x100.png" alt="Codepedia" width="120" height="60">
            <!-- <span>codepedia<span style="color:#70a7ff">.id</span></span> -->
        </a>

        <nav class="nav-links" aria-label="Navigasi utama">
            <a href="#about">Tentang</a>
            <a href="#services">Layanan</a>
            <a href="#clients">Klien</a>
            <a href="#testimonials">Testimonial</a>
            <a href="#insights">Insight</a>
            <a href="#contact">Kontak</a>
        </nav>

        <a
            class="nav-cta"
            href="https://wa.me/6285777008801"
            target="_blank"
            rel="noopener"
        >
            Konsultasi
        </a>

    </div>

</header>


<main>

<!-- ================= HERO ================= -->

<section class="hero" id="home">

    <div class="container hero-grid">

        <div>

            <div class="eyebrow">
                <span class="eyebrow-dot"></span>
                Digital Technology Partner
            </div>

            <h1>
                Transformasikan bisnis
                <span class="gradient-text">
                    dengan teknologi.
                </span>
            </h1>

            <p class="hero-copy">
                Codepedia Indonesia membantu bisnis membangun,
                mengembangkan, dan mengoptimalkan solusi digital —
                dari website dan aplikasi hingga sistem informasi,
                UI/UX, IT support, dan digital marketing.
            </p>

            <div class="hero-actions">

                <a
                    href="https://wa.me/6285777008801?text=Codepedia.id%20-%20Saya%20ingin%20berkonsultasi%20seputar%20produk%20dan%20jasa"
                    class="btn btn-primary"
                    target="_blank"
                    rel="noopener"
                >
                    Mulai Konsultasi →
                </a>

                <a
                    href="#services"
                    class="btn btn-secondary"
                >
                    Jelajahi Layanan
                </a>

            </div>

        </div>


        <div class="hero-visual" aria-hidden="true">

            <div class="orb"></div>

            <div class="code-card">

                <div class="terminal">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <div class="code">

                    <div>
                        <span class="blue">const</span>
                        business =
                        <span class="cyan">"your_business"</span>;
                    </div>

                    <div>
                        business.<span class="green">transform</span>({
                    </div>

                    <div>
                        &nbsp;&nbsp;website:
                        <span class="cyan">true</span>,
                    </div>

                    <div>
                        &nbsp;&nbsp;system:
                        <span class="cyan">true</span>,
                    </div>

                    <div>
                        &nbsp;&nbsp;automation:
                        <span class="cyan">true</span>,
                    </div>

                    <div>
                        &nbsp;&nbsp;digitalMarketing:
                        <span class="cyan">true</span>
                    </div>

                    <div>});</div>

                    <br>

                    <div>
                        <span class="green">
                            ✓ Digital transformation ready
                        </span>
                    </div>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- ================= TRUST ================= -->

<div class="trust">

    <div class="container trust-inner">

        <span class="trust-label">
            Dipercaya oleh bisnis dan organisasi
        </span>

        <div class="trust-items">
            <span>BUSINESS</span>
            <span>HEALTHCARE</span>
            <span>NETWORKING</span>
            <span>RETAIL</span>
            <span>MANUFACTURING</span>
        </div>

    </div>

</div>


<!-- ================= ABOUT ================= -->

<section id="about">

    <div class="container about-grid">

        <div class="about-card">

            <div class="about-number">
                2016
            </div>

            <div class="about-small">
                Pengalaman kolaborasi dengan
                berbagai kebutuhan bisnis digital.
            </div>

        </div>

        <div class="about-content">

            <div class="section-label">
                Tentang Codepedia
            </div>

            <h2>
                Teknologi bukan sekadar
                alat. Teknologi harus
                menghasilkan dampak.
            </h2>

            <p>
                Codepedia Indonesia hadir untuk membantu bisnis
                memanfaatkan teknologi secara lebih efektif.
                Kami menggabungkan pengembangan teknologi,
                analisis sistem, desain pengalaman pengguna,
                dan strategi digital untuk menghasilkan solusi
                yang relevan dengan kebutuhan bisnis.
            </p>

            <p>
                Pendekatan kami tidak berhenti pada pembuatan
                website atau aplikasi. Kami membantu memahami
                kebutuhan, merancang solusi, mengembangkan sistem,
                hingga membantu bisnis mengoptimalkan kehadiran
                digitalnya.
            </p>

        </div>

    </div>

</section>


<!-- ================= SERVICES ================= -->

<section class="services" id="services">

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Layanan
            </div>

            <h2>
                Solusi digital dari ide
                hingga implementasi.
            </h2>

            <p class="section-description">
                Satu partner untuk berbagai kebutuhan teknologi
                dan transformasi digital bisnis Anda.
            </p>

        </div>


        <div class="services-grid">

            <article class="service">

                <div class="service-icon">⌘</div>

                <h3>
                    Website Development
                </h3>

                <p>
                    Website bisnis yang profesional, cepat,
                    responsif, SEO-friendly, dan dirancang
                    untuk meningkatkan kredibilitas bisnis.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">▣</div>

                <h3>
                    Application Development
                </h3>

                <p>
                    Pengembangan aplikasi untuk membantu
                    otomatisasi proses bisnis dan memudahkan
                    pemantauan bisnis dari mana saja.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">⌁</div>

                <h3>
                    IT Support
                </h3>

                <p>
                    Pengelolaan dan monitoring perangkat
                    teknologi informasi, mulai dari server
                    hingga aplikasi.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">⌬</div>

                <h3>
                    System Analysis
                </h3>

                <p>
                    Analisis kebutuhan dan perancangan solusi
                    sistem untuk membantu bisnis melakukan
                    otomatisasi dengan teknologi yang tepat.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">◇</div>

                <h3>
                    UI/UX Design
                </h3>

                <p>
                    Perancangan alur dan antarmuka sistem
                    yang efektif, mudah digunakan, dan
                    sesuai kebutuhan pengguna maupun bisnis.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">↗</div>

                <h3>
                    Digital Marketing
                </h3>

                <p>
                    Strategi pemasaran digital melalui media
                    sosial dan berbagai platform digital untuk
                    meningkatkan jangkauan bisnis.
                </p>

            </article>


            <article class="service">

                <div class="service-icon">◉</div>

                <h3>
                    Workshop & Seminar
                </h3>

                <p>
                    Berbagi pengetahuan dan pengalaman melalui
                    workshop, seminar, dan kegiatan pembelajaran
                    teknologi digital.
                </p>

            </article>

        </div>

    </div>

</section>


<!-- ================= WHY CODEPEDIA ================= -->

<section>

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Mengapa Codepedia?
            </div>

            <h2>
                Solusi yang dirancang
                untuk kebutuhan nyata.
            </h2>

        </div>


        <div class="why-grid">

            <div class="why-card">

                <strong>
                    Technology Driven
                </strong>

                <p>
                    Menggunakan pendekatan teknologi yang
                    relevan dengan kebutuhan dan perkembangan
                    bisnis digital.
                </p>

            </div>


            <div class="why-card">

                <strong>
                    Business Oriented
                </strong>

                <p>
                    Teknologi dikembangkan berdasarkan masalah
                    dan proses bisnis, bukan sekadar mengikuti
                    tren teknologi.
                </p>

            </div>


            <div class="why-card">

                <strong>
                    Flexible Collaboration
                </strong>

                <p>
                    Model kerja sama fleksibel dengan pendekatan
                    solusi yang dapat disesuaikan dengan kebutuhan
                    dan kemampuan bisnis.
                </p>

            </div>

        </div>

    </div>

</section>


<!-- ================= CLIENTS ================= -->

<section class="clients" id="clients">

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Client & Partner
            </div>

            <h2>
                Dipercaya untuk membangun
                solusi digital.
            </h2>

            <p class="section-description">
                Beberapa bisnis yang telah mempercayakan
                kebutuhan teknologi dan digital mereka
                kepada Codepedia.
            </p>

        </div>


        <div class="client-grid">

            <div class="client">
                <a href="https://ars.ac.id" target="_blank" rel="noopener noreferrer">
                    <img src="https://codepedia.id/wp-content/uploads/2024/12/640px-Logo-ars.png" alt="ARS" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="http://liongbest.co.id/home/index.php" target="_blank" rel="noopener noreferrer">
                    <img src="https://codepedia.id/wp-content/uploads/2019/01/logo-internasional.jpg" alt="PT. Liongbest Internasional" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="http://nusatrans.co.id/" target="_blank" rel="noopener noreferrer">
                    <img src="https://codepedia.id/wp-content/uploads/2019/01/logo-nusatrans.png" alt="PT. Jaya Nusa Transindo" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="http://pakarkonveksi.com/" target="_blank" rel="noopener noreferrer">
                    <img src="https://codepedia.id/wp-content/uploads/2019/01/cropped-logo-192x192.png" alt="CV. hendri Jaya Collection" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <img src="https://codepedia.id/wp-content/uploads/2019/01/Logo-Avatar.png" alt="Klinik Utama Nur Khadijah" width="80" height="80" style="max-width:80px;max-height:80px;">
            </div>

            <div class="client">
                <a href="https://dprd.bandung.go.id/" target="_blank" rel="noopener noreferrer">
                    <img src="https://asset-2.tstatic.net/jabar/foto/bank/images/logo-dprd-kota-bandung.jpg" alt="DPRD Kota Bandung" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="https://notiva.id" target="_blank" rel="noopener noreferrer">
                    <img src="https://codepedia.id/wp-content/uploads/2024/12/Logo-Notiva-1024x1024.png" alt="Notiva" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="https://daafi.id" target="_blank" rel="noopener noreferrer">
                    <img src="https://daafi.id/wp-content/uploads/2023/08/logo-daafi-landscape-1536x428.jpg" alt="Daafi" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <a href="https://www.yoosaihiro.com/" target="_blank" rel="noopener noreferrer">
                    <img src="https://new-manajemen.yoosaihiro.com/images/logo.jpg" alt="Yoosaihiro" width="80" height="80" style="max-width:80px;max-height:80px;">
                </a>
            </div>

            <div class="client">
                <img src="https://codepedia.id/wp-content/uploads/2024/12/Logo-Haffafa-edited.jpeg" alt="Haffafa" width="80" height="80" style="max-width:80px;max-height:80px;">
            </div>

            <div class="client">
                <img src="https://codepedia.id/wp-content/uploads/2024/12/logo-ibu-1024x412.png" alt="Logo IBU" width="80" height="80" style="max-width:80px;max-height:80px;">
            </div>

        </div>

    </div>

</section>


<!-- ================= TESTIMONIAL ================= -->

<section id="testimonials">

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Testimonial
            </div>

            <h2>
                Cerita dari mereka
                yang telah bekerja bersama kami.
            </h2>

        </div>


        <div class="testimonial-grid">

            <article class="testimonial">

                <div class="quote">
                    “
                </div>

                <p>
                    Sudah sejak tahun 2016 kami menjalin
                    kerjasama dengan team codepedia.id.
                    Sangat memuaskan, respon cepat, dan juga
                    ikut memberikan arahan-arahan agar
                    perusahaan tidak merugi.
                </p>

                <strong>
                    PT. Liongbest Internasional
                </strong>

            </article>


            <article class="testimonial">

                <div class="quote">
                    “
                </div>

                <p>
                    SEO merupakan bagian penting dari bisnis
                    digital. Team codepedia.id membantu kami
                    untuk memenangkan pangsa pasar yang
                    cukup ketat.
                </p>

                <strong>
                    PT. Jaya Nusa Transindo
                </strong>

            </article>


            <article class="testimonial">

                <div class="quote">
                    “
                </div>

                <p>
                    Team codepedia.id memberikan solusi
                    sekaligus dalam satu paket. Sistem
                    memiliki jangkauan luas, ketahanan
                    sistem yang mumpuni, serta dapat
                    dikontrol dengan mudah.
                </p>

                <strong>
                    PT. Penawar Legenda Maju
                </strong>

            </article>


            <article class="testimonial">

                <div class="quote">
                    “
                </div>

                <p>
                    Team codepedia.id memberikan paket web
                    design sekaligus dengan pengelolaan
                    content serta SEO. Hal tersebut sangat
                    kami butuhkan untuk menghadapi persaingan
                    bisnis.
                </p>

                <strong>
                    CV. Hendri Jaya Collection
                </strong>

            </article>


            <article class="testimonial">

                <div class="quote">
                    “
                </div>

                <p>
                    Kami membangun sistem informasi
                    terintegrasi yang cukup kompleks,
                    namun mudah dipahami.
                </p>

                <strong>
                    Klinik Utama Nur Khadijah
                </strong>

            </article>

        </div>

    </div>

</section>


<!-- ================= PROCESS ================= -->

<section>

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Cara Kerja
            </div>

            <h2>
                Dari masalah menjadi
                solusi digital.
            </h2>

        </div>


        <div class="process">

            <div class="step">

                <div class="step-number">
                    01
                </div>

                <h3>
                    Discovery
                </h3>

                <p>
                    Memahami kebutuhan, masalah,
                    tujuan, dan proses bisnis.
                </p>

            </div>


            <div class="step">

                <div class="step-number">
                    02
                </div>

                <h3>
                    Strategy
                </h3>

                <p>
                    Menentukan pendekatan teknologi
                    dan solusi yang paling relevan.
                </p>

            </div>


            <div class="step">

                <div class="step-number">
                    03
                </div>

                <h3>
                    Development
                </h3>

                <p>
                    Merancang dan mengembangkan
                    solusi secara terukur.
                </p>

            </div>


            <div class="step">

                <div class="step-number">
                    04
                </div>

                <h3>
                    Optimization
                </h3>

                <p>
                    Melakukan evaluasi dan optimasi
                    agar solusi terus memberikan dampak.
                </p>

            </div>

        </div>

    </div>

</section>


<!-- ================= INSIGHTS ================= -->

<section class="services" id="insights">

    <div class="container">

        <div class="section-heading">

            <div class="section-label">
                Codepedia Insight
            </div>

            <h2>
                Insight untuk membantu
                bisnis berkembang secara digital.
            </h2>

        </div>


        <div class="blog-grid">

            <article class="article">

                <div class="article-image">
                    SEO
                </div>

                <div class="article-content">

                    <div class="article-meta">
                        Digital Marketing
                    </div>

                    <h3>
                        Cara Riset Keyword Gratis dan Efektif
                        untuk Optimalisasi SEO
                    </h3>

                    <p>
                        Memahami pentingnya keyword dalam
                        meningkatkan visibilitas bisnis
                        di mesin pencari.
                    </p>

                </div>

            </article>


            <article class="article">

                <div class="article-image">
                    AI
                </div>

                <div class="article-content">

                    <div class="article-meta">
                        Artificial Intelligence
                    </div>

                    <h3>
                        Cara Menggunakan AI untuk
                        Mempermudah Pekerjaan
                    </h3>

                    <p>
                        Memanfaatkan perkembangan AI untuk
                        meningkatkan produktivitas dan
                        peluang bisnis.
                    </p>

                </div>

            </article>


            <article class="article">

                <div class="article-image">
                    SM
                </div>

                <div class="article-content">

                    <div class="article-meta">
                        Digital Marketing
                    </div>

                    <h3>
                        Content Planner untuk
                        Strategi Social Media
                    </h3>

                    <p>
                        Menyusun content pillar dan
                        content calendar agar komunikasi
                        digital lebih terarah.
                    </p>

                </div>

            </article>

        </div>

    </div>

</section>


<!-- ================= FAQ ================= -->

<section>

    <div class="container">

        <div class="section-heading"
             style="margin-left:auto;margin-right:auto;text-align:center;">

            <div class="section-label">
                FAQ
            </div>

            <h2>
                Pertanyaan yang sering
                ditanyakan.
            </h2>

        </div>


        <div class="faq">

            <details>

                <summary>
                    Apa saja layanan Codepedia Indonesia?
                </summary>

                <p>
                    Codepedia menyediakan layanan pembuatan
                    website, aplikasi, IT support, analisis
                    sistem, UI/UX design, digital marketing,
                    serta workshop dan seminar.
                </p>

            </details>


            <details>

                <summary>
                    Apakah Codepedia melayani pembuatan
                    sistem informasi?
                </summary>

                <p>
                    Ya. Codepedia dapat membantu menganalisis
                    kebutuhan bisnis dan merancang solusi
                    sistem informasi yang sesuai dengan
                    kebutuhan organisasi.
                </p>

            </details>


            <details>

                <summary>
                    Apakah tersedia layanan SEO?
                </summary>

                <p>
                    SEO menjadi bagian dari layanan digital
                    Codepedia, termasuk pengelolaan konten
                    dan optimalisasi website.
                </p>

            </details>


            <details>

                <summary>
                    Bagaimana cara berkonsultasi?
                </summary>

                <p>
                    Anda dapat menghubungi Codepedia Indonesia
                    melalui WhatsApp untuk mendiskusikan
                    kebutuhan proyek dan solusi digital.
                </p>

            </details>

        </div>

    </div>

</section>


<!-- ================= CTA ================= -->

<section class="cta" id="contact">

    <div class="container">

        <div class="cta-box">

            <div class="section-label">
                Let's Build Something
            </div>

            <h2>
                Punya ide atau masalah
                yang ingin diselesaikan?
            </h2>

            <p>
                Ceritakan kebutuhan bisnis Anda.
                Mari diskusikan bagaimana teknologi
                dapat membantu membuat proses bisnis
                lebih efektif dan berkembang.
            </p>

            <a
                href="https://wa.me/6285777008801?text=Halo%20Codepedia%2C%20saya%20ingin%20berkonsultasi%20mengenai%20kebutuhan%20digital%20bisnis%20saya."
                class="btn btn-primary"
                target="_blank"
                rel="noopener"
            >
                Konsultasi via WhatsApp →
            </a>

        </div>

    </div>

</section>

</main>


<!-- ================= FOOTER ================= -->

<footer>

    <div class="container">

        <div class="footer-grid">

            <div class="footer-brand">

                <div class="logo">
                    <img src="https://codepedia.id/wp-content/uploads/2023/11/cropped-logo-landscape-putih200x100.png" alt="Codepedia" width="120" height="60">
                    <!-- <span>codepedia<span style="color:#70a7ff">.id</span></span> -->
                </div>

                <p>
                    Codepedia Indonesia — digital technology
                    partner untuk membantu bisnis membangun
                    dan mengoptimalkan solusi teknologi.
                </p>

            </div>


            <div>

                <h3>
                    Navigasi
                </h3>

                <div class="footer-links">

                    <a href="#about">
                        Tentang
                    </a>

                    <a href="#services">
                        Layanan
                    </a>

                    <a href="#clients">
                        Klien
                    </a>

                    <a href="#testimonials">
                        Testimonial
                    </a>

                    <a href="#insights">
                        Insight
                    </a>

                </div>

            </div>


            <div>

                <h3>
                    Hubungi Kami
                </h3>

                <div class="footer-links">

                    <a
                        href="https://wa.me/6285777008801"
                        target="_blank"
                        rel="noopener"
                    >
                        WhatsApp
                    </a>

                    <a
                        href="https://instagram.com/erfianjunianto"
                        target="_blank"
                        rel="noopener"
                    >
                        Instagram
                    </a>

                    <a href="mailto:info@codepedia.id">
                        Email
                    </a>

                    <span>
                        Indonesia
                    </span>

                </div>

            </div>

        </div>


        <div class="copyright">

            <span>
                © 2026 Codepedia Indonesia.
                All rights reserved.
            </span>

            <span>
                Technology · Digital · Innovation
            </span>

        </div>

    </div>

</footer>


<!-- Minimal JS -->

<script>

    // Smooth navigation for internal links
    document.querySelectorAll(
        'a[href^="#"]'
    ).forEach(link => {

        link.addEventListener(
            "click",
            function(e) {

                const target =
                    document.querySelector(
                        this.getAttribute("href")
                    );

                if (target) {

                    e.preventDefault();

                    target.scrollIntoView({
                        behavior: "smooth",
                        block: "start"
                    });

                }

            }
        );

    });

</script>

</body>
</html>