@extends('layouts.app')
@section('title', 'AI Tools for Your Content & Business')
@section('content')
@include('partials.header')

<style>
 
/* =========================================================
   CREASY VIDEO CTA
========================================================= */

.creasy-video-section {

    padding:
        35px 0 60px;

}


/* =========================================================
   VIDEO BANNER
========================================================= */

.creasy-video-banner {

    position: relative;

    width: 100%;

    min-height: 420px;

    overflow: hidden;

    border-radius: 24px;

    background:
        #020b11;

    border:
        1px solid rgba(34, 207, 228, 0.20);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

}


/* =========================================================
   BACKGROUND VIDEO
========================================================= */

.creasy-bg-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 0.8s ease;

}

.creasy-bg-video.active {

    opacity: 1;

}


/* =========================================================
   OVERLAY
========================================================= */

.creasy-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 17, 0.94) 0%,
            rgba(2, 11, 17, 0.70) 38%,
            rgba(2, 11, 17, 0.25) 75%,
            rgba(2, 11, 17, 0.40) 100%
        );

}


/* =========================================================
   CONTENT
========================================================= */

.creasy-video-content {

    position: relative;

    z-index: 3;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    max-width: 560px;

    padding:
        50px;

}


.creasy-video-content .section-kicker {

    color:
        #20d9e8;

    margin-bottom: 10px;

}


.creasy-video-content h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing:
        -1.5px;

}


.creasy-video-content h2 span {

    background:
        linear-gradient(
            90deg,
            #22cfe4,
            #8ceff7
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


.creasy-video-content p {

    margin:
        18px 0 25px;

    max-width: 460px;

    color:
        rgba(255,255,255,0.78);

    font-size:
        1rem;

    line-height: 1.6;

}


/* =========================================================
   CREATE BUTTON
========================================================= */

.creasy-create-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 155px;

    padding:
        12px 23px;

    border-radius: 12px;

    text-decoration: none;

    color: #001317 !important;

    background:
        linear-gradient(
            135deg,
            #2ce8ef,
            #11cfe2
        );

    font-size:
        0.95rem;

    font-weight: 800;

    border:
        1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 0 22px
        rgba(21, 220, 235, 0.28);

    transition:
        all 0.25s ease;

}


.creasy-create-btn:hover {

    color: #001317 !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 32px
        rgba(21, 220, 235, 0.48);

}


.creasy-create-btn i {

    transition:
        transform 0.25s ease;

}


.creasy-create-btn:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   VIDEO DOTS
========================================================= */

.creasy-video-dots {

    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 20px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 7px;

}


.video-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.35);

    transition:
        all 0.3s ease;

}


.video-dot.active {

    width: 24px;

    border-radius: 10px;

    background:
        #20dce9;

    box-shadow:
        0 0 10px
        rgba(32,220,233,0.65);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .creasy-video-section {

        padding:
            25px 0 45px;

    }

    .creasy-video-banner {

        min-height:
            430px;

        border-radius:
            18px;

    }

    .creasy-video-content {

        min-height:
            430px;

        padding:
            35px 25px;

        justify-content:
            flex-end;

        padding-bottom:
            55px;

    }

    .creasy-video-content h2 {

        font-size:
            2rem;

    }

    .creasy-video-content p {

        font-size:
            0.9rem;

    }

    .creasy-video-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(2,11,17,0.15) 0%,
                rgba(2,11,17,0.30) 35%,
                rgba(2,11,17,0.94) 100%
            );

    }

}

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

.creasy-why-section {

    position: relative;

    padding:
        85px 0 70px;

    overflow: hidden;

}


/* subtle ambient glow */

.creasy-why-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -260px;

    top: 40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 220, 240, 0.10) 0%,
            rgba(0, 220, 240, 0.03) 35%,
            transparent 70%
        );

    pointer-events: none;

}


.creasy-why-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -250px;

    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(90, 80, 255, 0.08) 0%,
            transparent 70%
        );

    pointer-events: none;

}


/* =========================================================
   HEADING
========================================================= */

.creasy-why-heading {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin:
        0 auto 45px;

    text-align: center;

}


.creasy-why-heading .section-kicker {

    margin-bottom: 10px;

}


.creasy-why-heading .section-title {

    margin-bottom: 12px;

}


.creasy-why-heading .section-desc {

    max-width: 620px;

    margin:
        0 auto;

}


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

.creasy-why-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 16px;

}


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

.creasy-why-card {

    position: relative;

    min-height: 235px;

    padding: 26px 23px 24px;

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7, 48, 61, 0.78),
            rgba(3, 22, 30, 0.94)
        );

    border:
        1px solid rgba(34, 207, 228, 0.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 12px 35px rgba(0,0,0,0.18);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.creasy-why-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(40,235,242,0.55),
            transparent
        );

    opacity: 0;

    transition:
        opacity .35s ease;

}


.creasy-why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(34, 220, 235, 0.40);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.28),
        0 0 28px rgba(0,220,240,0.08);

}


.creasy-why-card:hover::before {

    opacity: 1;

}


/* =========================================================
   ICON
========================================================= */

.creasy-why-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(30,235,239,0.18),
            rgba(0,145,180,0.08)
        );

    border:
        1px solid rgba(40,230,240,0.22);

    color:
        #24e1eb;

    font-size:
        1.35rem;

    box-shadow:
        0 0 20px rgba(0,220,240,0.08);

}


.creasy-why-card h4 {

    margin:
        0 0 9px;

    color:
        #ffffff;

    font-size:
        1.08rem;

    font-weight:
        800;

    letter-spacing:
        -0.2px;

}


.creasy-why-card p {

    margin:
        0;

    color:
        rgba(255,255,255,0.63);

    font-size:
        0.84rem;

    line-height:
        1.65;

}


/* =========================================================
   NUMBER / DECORATION
========================================================= */

.creasy-why-number {

    position: absolute;

    right: 18px;

    top: 14px;

    color:
        rgba(255,255,255,0.035);

    font-size:
        4.5rem;

    line-height:
        1;

    font-weight:
        900;

    pointer-events:
        none;

}


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

.creasy-final-cta {

    position: relative;

    padding:
        20px 0 95px;

}


.creasy-final-cta-box {

    position: relative;

    overflow: hidden;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        55px 30px;

    border-radius:
        26px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(23,225,238,0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(7,48,61,0.95),
            rgba(2,17,24,0.98)
        );

    border:
        1px solid rgba(34,207,228,0.25);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.38),
        0 0 45px rgba(0,220,240,0.06);

}


.creasy-final-cta-box::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: -120px;

    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,230,240,0.12),
            transparent 70%
        );

}


.creasy-final-cta-box::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -100px;

    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,70,255,0.10),
            transparent 70%
        );

}


.creasy-final-cta-box > * {

    position: relative;

    z-index: 2;

}


.creasy-final-cta-box .section-kicker {

    margin-bottom:
        12px;

}


.creasy-final-cta-box h2 {

    margin:
        0;

    max-width:
        760px;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 5vw, 3.5rem);

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -1.8px;

}


.creasy-final-cta-box h2 span {

    display:
        inline-block;

    background:
        linear-gradient(
            90deg,
            #22cfe4,
            #8ceff7,
            #22cfe4
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

    animation:
        creasyGradientMove 4s linear infinite;

}


@keyframes creasyGradientMove {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }

}


.creasy-final-cta-box p {

    max-width:
        570px;

    margin:
        17px auto 26px;

    color:
        rgba(255,255,255,0.68);

    font-size:
        0.95rem;

    line-height:
        1.65;

}


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

.creasy-final-cta-box .creasy-create-btn {

    min-width:
        175px;

    padding:
        13px 26px;

    border-radius:
        13px;

    font-size:
        0.96rem;

}


/* =========================================================
   SMALL TRUST TEXT
========================================================= */

.creasy-cta-note {

    margin-top:
        16px;

    color:
        rgba(255,255,255,0.42);

    font-size:
        0.72rem;

}


.creasy-cta-note i {

    color:
        #22dce8;

    margin-right:
        4px;

}


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

@media (max-width: 991px) {

    .creasy-why-grid {

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

    }

}


@media (max-width: 575px) {

    .creasy-why-section {

        padding:
            65px 0 45px;

    }

    .creasy-why-heading {

        margin-bottom:
            32px;

    }

    .creasy-why-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }

    .creasy-why-card {

        min-height:
            auto;

        padding:
            23px 21px;

    }

    .creasy-why-icon {

        margin-bottom:
            17px;

    }

    .creasy-final-cta {

        padding:
            15px 0 65px;

    }

    .creasy-final-cta-box {

        min-height:
            370px;

        padding:
            45px 22px;

        border-radius:
            20px;

    }

    .creasy-final-cta-box h2 {

        font-size:
            2.15rem;

    }

    .creasy-final-cta-box p {

        font-size:
            0.88rem;

    }

}

/* =========================================================
   CREASY HERO VIDEO
========================================================= */

.hero-video-stage {

    position: relative;

    width: 100%;

    min-height: 460px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 28px;

    background:
        #020b11;

    border:
        1px solid rgba(34, 207, 228, 0.14);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.22);

}


/* =========================================================
   VIDEO
========================================================= */

.hero-main-video {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 460px;

    object-fit: cover;

    object-position: center;

    border-radius: 28px;

}


/* =========================================================
   SUBTLE EDGE GLOW
========================================================= */

.hero-video-stage::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    border:
        1px solid rgba(34, 207, 228, 0.10);

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

    .hero-video-stage {

        min-height: 480px;

        transform:
            translateY(-5px);

    }

    .hero-main-video {

        min-height: 480px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hero-video-stage {

        min-height: 420px;

        margin-top: 25px;

    }

    .hero-main-video {

        min-height: 420px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .hero-video-stage {

        min-height: 330px;

        margin-top: 20px;

        border-radius: 20px;

    }

    .hero-main-video {

        min-height: 330px;

        border-radius: 20px;

    }

}

/* =========================================================
   HERO VIDEO SOUND BUTTON
========================================================= */

.hero-video-sound-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;

    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;

    background: rgba(3, 12, 17, 0.72);

    color: rgba(255,255,255,0.92);

    font-size: 0.72rem;
    font-weight: 500;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.hero-video-sound-btn i {
    font-size: 0.95rem;
    color: #4de4e9;
}

.hero-video-sound-btn:hover {
    background: rgba(3, 18, 24, 0.9);
    border-color: rgba(34,207,228,0.35);
    transform: translateY(-2px);
}

.hero-video-sound-btn.is-unmuted {
    border-color: rgba(34,207,228,0.35);
}

@media (max-width: 575px) {

    .hero-video-sound-btn {
        right: 12px;
        bottom: 12px;

        padding: 8px 10px;
    }

    .hero-video-sound-btn span {
        display: none;
    }

    .hero-video-sound-btn i {
        font-size: 1rem;
    }
}

</style>
<body>

<main id="home">

 <section class="hero pt-4">

    <div class="container container-main">

        <div class="row align-items-center g-4">

            <div class="col-lg-5">

                <h1>
                    From Idea<br>
                    <span class="gradient-text">
                        to Amazing Visuals.
                    </span>
                </h1>

                <p>
                    Bikin konten profesional dalam hitungan menit.<br>
                    Tanpa ribet, tanpa skill khusus.
                </p>

                <ul class="feature-list">

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Multimedia dalam satu platform
                    </li>

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Hasil berkualitas tinggi
                    </li>

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Cocok untuk bisnis, kreator, dan personal
                    </li>

                </ul>

                <div class="d-flex gap-3 flex-wrap">

                    <a href="{{ route('login') }}">

                        <button class="btn-glow">

                            Mulai Gratis

                            <i class="bi bi-arrow-right ms-2"></i>

                        </button>

                    </a>


                    <button class="btn-outline-glow">

                        <i class="bi bi-play-fill me-2"></i>

                        Tonton Demo

                    </button>

                </div>

            </div>


            <div class="col-lg-7">

                <div class="hero-video-stage">

                   <video
                    id="heroMainVideo"
                    class="hero-main-video"
                    autoplay
                    muted
                    loop
                    playsinline
                    preload="auto"
                >

                        <source
                            src="{{ asset('bgv-3.mp4') }}"
                            type="video/mp4"
                        >

                        Browser kamu tidak mendukung video HTML5.

                    </video>
                    <button type="button" id="heroVideoSoundBtn" class="hero-video-sound-btn">
                        <i class="bi bi-volume-mute-fill"></i>
                        <span>Sound Off</span>
                    </button>

                </div>

            </div>

        </div>

    </div>

</section>

  <section id="services">
    <div class="container container-main">
     

      <div class="horizontal-slider service-slider mt-1">
        <div class="slider-fade-left"></div>
        <div class="horizontal-track">
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-image"></i></div><h6>Bikin Gambar</h6><p>Foto produk, makanan, orang, poster, dll.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-camera-reels"></i></div><h6>Bikin Video</h6><p>Konten promosi, iklan, cinematic, dll.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-person-circle"></i></div><h6>Avatar Jualan</h6><p>AI presenter untuk brand kamu.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-music-note-beamed"></i></div><h6>Bikin Jingle</h6><p>Lagu brand, iklan, atau soundtrack.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-soundwave"></i></div><h6>Bikin Composer</h6><p>Musik original dengan AI composer.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon"><i class="bi bi-card-checklist"></i></div><h6>Desain Poster</h6><p>Poster, banner, konten event, dll.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon pink"><i class="bi bi-instagram"></i></div><h6>Konten Social Media</h6><p>Siap upload ke Instagram, TikTok, dll.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
          <div class="service-slide"><a href="#" class="service-card d-block"><div class="service-icon pink"><i class="bi bi-stars"></i></div><h6>Custom</h6><p>Punya ide lain? Kita bisa bantu.</p><span class="service-arrow"><i class="bi bi-arrow-right"></i></span></a></div>
        </div>
        <div class="slider-fade-right"></div>
      </div>
    </div>
  </section>

  
  
  
   <!-- =========================================================
     CREASY VIDEO CTA
========================================================= -->

 <section class="hero pt-4">
    <div class="container container-main">
      <div class="row align-items-center">
        <div class="col-lg-5">
          
          <div class="section-kicker">
                    CREATE WITHOUT LIMITS
                </div>

                <h2>
                    Turn Your Ideas<br>
                    <span>Into Amazing Visuals.</span>
                </h2>

                <p>
                    Buat gambar, video, dan musik dengan AI
                    dalam satu platform.
                </p>

                <a
                    href="{{ route('login') }}"
                    class="creasy-create-btn"
                >
                    Create Now
                    <i class="bi bi-arrow-right"></i>
                </a>

          <div class="rating d-flex align-items-center mt-3">
            
            <div>
              
             
            </div>
          </div>
        </div>

        <div class="col-lg-7">
          <div class="visual-stage">
            <!-- Semua URL gambar di bawah dapat diganti -->
            <div class="creative-card c1">
              <img src="konten/img-9.png">
              <span class="label">Foto Produk</span>
            </div>
            <div class="creative-card c2">
              <img src="konten/img-8.png" alt="Foto Makanan">
              <span class="label">Foto Makanan</span>
            </div>
            <div class="creative-card c3">
              <img src="konten/img-7.jpeg" alt="Foto Orang Jualan">
              <span class="label">Foto Orang Jualan</span>
            </div>
            <div class="creative-card c4">
              <img src="konten/img-10.png" alt="Avatar AI">
              <span class="label">Avatar AI</span>
            </div>
            <div class="creative-card c5">
              <img src="konten/img-11.png" alt="Video Musik">
              <span class="label">Video & Musik</span>
            </div>
            <div class="hand-note">Satu ide.<br>Banyak kemungkinan.</div>
          </div>
        </div>
      </div>
    </div>
  </section>




<section id="portfolio">
    <div class="container container-main">
      <div class="d-flex justify-content-between align-items-end">
        <div>
          <div class="section-kicker">CONTOH HASIL KARYA</div>
          <h2 class="section-title">Dari berbagai ide, jadi karya nyata.</h2>
          <p class="section-desc">Lihat bagaimana Creasy membantu mewujudkan ide jadi visual yang memukau.</p>
        </div>
        <a href="#" class="view-all">Lihat lebih banyak <i class="bi bi-arrow-right"></i></a>
      </div>

      <div class="horizontal-slider gallery-slider mt-2">
        <div class="slider-fade-left"></div>
        <div class="horizontal-track">
          <!-- URL gambar dapat diganti -->
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-1.png" alt="Produk"></div></div>
      
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-3.png" alt="Bisnis"></div></div>
           <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-12.png" alt="Music"></div></div>
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-2.png" alt="Poster"></div></div>
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-5.png" alt="Avatar"></div></div>
           <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-4.png" alt="Produk"></div></div>
        </div>
        <div class="slider-fade-right"></div>
      </div>
    </div>
  </section>

<!-- =========================================================
     price
========================================================= -->

 
<div id="autoPricing"></div>
 
 <!-- =========================================================
     WHY CREASY
========================================================= -->

<section class="creasy-why-section">

    <div class="container container-main">

        <div class="creasy-why-heading">

            <div class="section-kicker">
                KENAPA CREASY?
            </div>

            <h2 class="section-title">
                Satu platform.
                <br>
                Semua kebutuhan kreatif.
            </h2>

            <p class="section-desc">
                Bukan sekadar membuat konten.
                Creasy membantu kamu mengubah ide menjadi sesuatu
                yang siap dilihat, dibagikan, dan digunakan.
            </p>

        </div>


        <div class="creasy-why-grid">

            <!-- 01 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    01
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-lightning-charge-fill"></i>

                </div>

                <h4>
                    Cepat dari Ide
                </h4>

                <p>
                    Tidak perlu mulai dari halaman kosong.
                    Tulis idemu, pilih kebutuhanmu,
                    dan biarkan AI membantu mewujudkannya.
                </p>

            </div>


            <!-- 02 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    02
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-stars"></i>

                </div>

                <h4>
                    Semua dalam Satu
                </h4>

                <p>
                    Gambar, video, musik, avatar,
                    sampai kebutuhan konten bisnis
                    bisa dibuat dari satu platform.
                </p>

            </div>


            <!-- 03 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    03
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-briefcase-fill"></i>

                </div>

                <h4>
                    Siap untuk Bisnis
                </h4>

                <p>
                    Bangun visual produk, materi promosi,
                    konten sosial media, hingga kebutuhan
                    brand dengan lebih praktis.
                </p>

            </div>


            <!-- 04 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    04
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-credit-card-2-front-fill"></i>

                </div>

                <h4>
                    Credits Transparan
                </h4>

                <p>
                    Gunakan Creative Credits sesuai kebutuhan.
                    Jelas, fleksibel, dan kamu tetap punya
                    kendali atas penggunaanmu.
                </p>

            </div>

        </div>

    </div>

</section>


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

<section class="creasy-final-cta">

    <div class="container container-main">

        <div class="creasy-final-cta-box">

            <div class="section-kicker">
                READY TO CREATE?
            </div>

            <h2>
                Punya ide?
                <br>
                <span>Wujudkan sekarang.</span>
            </h2>

            <p>
                Tidak perlu jago desain.
                Tidak perlu bingung mulai dari mana.
                Cukup bawa idemu — Creasy membantu mengubahnya
                menjadi karya.
            </p>

            <a
                href="{{ route('login') }}"
                class="creasy-create-btn"
            >
                Create Now
                <i class="bi bi-arrow-right"></i>
            </a>

            <div class="creasy-cta-note">

                <i class="bi bi-stars"></i>

                Your idea is the starting point.

            </div>

        </div>

    </div>

</section>


</body>

<script>
   

document.addEventListener('DOMContentLoaded', function () {

    const video1 = document.getElementById('creasyBgVideo1');
    const video2 = document.getElementById('creasyBgVideo2');

    const dot1 = document.querySelector(
        '.video-dot[data-video="1"]'
    );

    const dot2 = document.querySelector(
        '.video-dot[data-video="2"]'
    );

    if (!video1 || !video2) {
        return;
    }


    let currentVideo = 1;


    /* =====================================================
       PLAY VIDEO
    ====================================================== */

    function playVideo(video) {

        const promise = video.play();

        if (promise !== undefined) {

            promise.catch(function () {

                /*
                 * Browser mungkin memblokir autoplay.
                 * Karena video muted, biasanya tetap diizinkan.
                 */

            });

        }

    }


    /* =====================================================
       SWITCH VIDEO
    ====================================================== */

    function switchVideo(nextVideo) {

        if (nextVideo === currentVideo) {
            return;
        }


        const current =
            currentVideo === 1
                ? video1
                : video2;

        const next =
            nextVideo === 1
                ? video1
                : video2;


        current.classList.remove('active');

        next.classList.add('active');


        next.currentTime = 0;

        playVideo(next);


        current.pause();


        currentVideo =
            nextVideo;


        /* DOT */

        document
            .querySelectorAll('.video-dot')
            .forEach(function (dot) {

                dot.classList.remove('active');

            });


        const activeDot =
            document.querySelector(
                '.video-dot[data-video="' +
                nextVideo +
                '"]'
            );


        if (activeDot) {
            activeDot.classList.add('active');
        }

    }


    /* =====================================================
       VIDEO 1 SELESAI
    ====================================================== */

    video1.addEventListener(
        'ended',
        function () {

            switchVideo(2);

        }
    );


    /* =====================================================
       VIDEO 2 SELESAI
    ====================================================== */

    video2.addEventListener(
        'ended',
        function () {

            switchVideo(1);

        }
    );


    /* =====================================================
       DOT CLICK
    ====================================================== */

    if (dot1) {

        dot1.addEventListener(
            'click',
            function () {

                switchVideo(1);

            }
        );

    }


    if (dot2) {

        dot2.addEventListener(
            'click',
            function () {

                switchVideo(2);

            }
        );

    }


    /* =====================================================
       START
    ====================================================== */

    video1.classList.add('active');

    video2.classList.remove('active');

    playVideo(video1);

});


</script>

@section('scripts')
<script>
$(document).ready(function () {

    const pricingContainer = $('#autoPricing');

    if (!pricingContainer.length) {
        return;
    }

    pricingContainer.load('{{ route('ajax.pricing') }}', function (response, status, xhr) {

        if (status === 'error') {

            console.error('Gagal memuat pricing:', xhr.status, xhr.statusText);

            pricingContainer.html(`
                <div class="text-center py-5">
                    <div class="text-muted">
                        Gagal memuat paket harga.
                    </div>
                </div>
            `);

        } else {

            console.log('Pricing berhasil dimuat.');

        }

    });

});
</script>
<script>
$(document).ready(function () {

    const heroVideo = document.getElementById('heroMainVideo');
    const soundBtn = document.getElementById('heroVideoSoundBtn');

    if (!heroVideo || !soundBtn) return;

    soundBtn.addEventListener('click', function () {

        heroVideo.muted = !heroVideo.muted;

        const icon = soundBtn.querySelector('i');
        const text = soundBtn.querySelector('span');

        if (heroVideo.muted) {

            icon.className = 'bi bi-volume-mute-fill';
            text.textContent = 'Sound Off';

            soundBtn.classList.remove('is-unmuted');

        } else {

            icon.className = 'bi bi-volume-up-fill';
            text.textContent = 'Sound On';

            soundBtn.classList.add('is-unmuted');

        }

    });

});
</script>
@endsection



</html>