@extends('landingpage.layouts.main')

@section('title', 'Tentang Kami')
@section('navTentang', 'active')

@section('content')

<style>
body{
    background:#f8f3eb;
}
.pp-about{
    position:relative;
    overflow:hidden;
    background:#f8f3eb;
    padding-top:80px;
    color:#2a241d;
}
.pp-about::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(
            rgba(248,243,235,.94),
            rgba(248,243,235,.97)
        ),
        url('/storage/image.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.pp-about > *{
    position:relative;
    z-index:1;
}
.pp-section{
    padding:80px 0;
}
.pp-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 25px;
}
.pp-badge{
    display:inline-block;
    padding:7px 17px;
    margin-bottom:18px;
    border:1px solid #d8bd8c;
    border-radius:50px;
    background:#faf5ec;
    color:#a67832;
    font-size:12px;
    letter-spacing:1.5px;
    font-weight:500;
}
.pp-title{
    margin-bottom:25px;
    color:#1b1b1b;
    font-size:34px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:.3px;
}
.pp-text{
    color:#6d6253;
    font-size:15px;
    line-height:1.9;
    margin-bottom:18px;
}
.pp-profile{
    padding:70px 0;
}
.pp-profile-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:65px;
}
.pp-main-image{
    width:100%;
    height:520px;
    overflow:hidden;
    border-radius:0 45px 0 45px;
    border:1px solid #dfc99f;
    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}
.pp-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}
.pp-main-image:hover img{
    transform:scale(1.04);
}
.pp-profile-list{
    list-style:none;
    padding:0;
    margin:28px 0 0;
}
.pp-profile-list li{
    margin-bottom:13px;
    color:#6d6253;
    font-size:14px;
}
.pp-profile-list li::before{
    content:"✦";
    margin-right:10px;
    color:#c89a4b;
}
.pp-story{
    padding:90px 0;
}
.pp-story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.pp-story-image{
    width:100%;
    height:500px;
    overflow:hidden;
    border-radius:30px;
    border:1px solid #dfc99f;
    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}
.pp-story-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}
.pp-story-image:hover img{
    transform:scale(1.06);
}
.pp-highlight{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:28px;
    padding:20px 22px;
    background:#fffaf2;
    border-left:3px solid #c89a4b;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.pp-highlight-icon{
    font-size:32px;
    color:#c89a4b;
}
.pp-highlight-title{
    display:block;
    color:#27221c;
    font-size:16px;
    font-weight:700;
}
.pp-highlight-text{
    margin:4px 0 0;
    color:#7b6d5b;
    font-size:14px;
}
.pp-philosophy{
    padding:90px 0;
}
.pp-philosophy-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.pp-banner{
    padding:90px 0;
}
.pp-banner-image{
    position:relative;
    width:100%;
    height:460px;
    overflow:hidden;
    border-radius:32px;
    box-shadow:
        0 25px 60px rgba(0,0,0,.15);
}
.pp-banner-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.pp-banner-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
    background:
        linear-gradient(
            rgba(0,0,0,.10),
            rgba(0,0,0,.65)
        );
}
.pp-banner-small{
    color:#e1bd76;
    font-size:13px;
    font-weight:600;
    letter-spacing:4px;
}
.pp-banner-title{
    margin:14px 0;
    color:#fff;
    font-size:48px;
    font-weight:700;
}
.pp-banner-text{
    color:#f5eee3;
    font-size:16px;
    letter-spacing:2px;
}
.pp-experience{
    padding:90px 0;
}
.pp-heading-center{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px;
}
.pp-heading-center .pp-title{
    margin-bottom:15px;
}
.pp-image-card{
    position:relative;
    height:430px;
    overflow:hidden;
    border-radius:28px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.12);
}
.pp-image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}
.pp-image-card:hover img{
    transform:scale(1.08);
}
.pp-image-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:70px 25px 25px;
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.85)
        );
}
.pp-image-caption h5{
    margin:0 0 7px;
    color:#fff;
    font-size:23px;
    font-weight:700;
}
.pp-image-caption p{
    margin:0;
    color:#eee;
    font-size:14px;
    line-height:1.6;
}
.pp-commitment{
    padding:90px 0;
}
.pp-commit-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}
.pp-commit-card{
    padding:40px 28px;
    text-align:center;
    background:#fffdf9;
    border:1px solid #e8d9bf;
    border-radius:24px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
    transition:.4s ease;
}
.pp-commit-card:hover{
    transform:translateY(-8px);
    border-color:#c89a4b;
    box-shadow:
        0 25px 50px rgba(0,0,0,.12);
}
.pp-commit-icon{
    font-size:42px;
    color:#c89a4b;
}
.pp-commit-card h5{
    margin:18px 0 12px;
    color:#25211c;
    font-size:18px;
}
.pp-commit-card p{
    margin:0;
    color:#726858;
    line-height:1.8;
    font-size:14px;
}
.pp-stats{
    padding:90px 0;
}
.pp-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.pp-stat{
    position:relative;
    padding:42px 20px;
    text-align:center;
    background:#fff;
    border:1px solid #e9d7b6;
    border-radius:26px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
    overflow:hidden;
    transition:.4s ease;
}
.pp-stat::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:
        linear-gradient(
            to right,
            #c89a4b,
            #f5e6c8,
            #c89a4b
        );
}
.pp-stat:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 45px rgba(0,0,0,.12);
}
.pp-stat-icon{
    width:75px;
    height:75px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fcf6ed;
    border:1px solid #e9d7b6;
}
.pp-stat-icon i{
    color:#c89a4b;
    font-size:32px;
}
.pp-stat h2{
    margin:0 0 8px;
    color:#111;
    font-size:40px;
    font-weight:700;
}
.pp-stat span{
    color:#7a6c57;
    font-size:14px;
    letter-spacing:1px;
}
.pp-quote{
    padding:90px 0;
}
.pp-quote-box{
    position:relative;
    max-width:950px;
    margin:0 auto;
    padding:65px 45px;
    text-align:center;
    background:#fffdf9;
    border:1px solid #e8d9bf;
    border-radius:30px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.08);
}
.pp-quote-mark{
    position:absolute;
    top:15px;
    left:30px;
    color:rgba(200,154,75,.18);
    font-size:80px;
}
.pp-quote-text{
    position:relative;
    margin:0;
    color:#25211c;
    font-size:31px;
    line-height:1.6;
    font-style:italic;
    font-weight:400;
}
.pp-quote-author{
    margin-top:20px;
    color:#a67832;
    font-size:14px;
    letter-spacing:1px;
}
.pp-vision{
    padding:90px 0;
}
.pp-vision-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}
.pp-vision-card{
    padding:40px;
    background:#fffdf9;
    border:1px solid #e8d9bf;
    border-radius:25px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
}
.pp-vision-card h5{
    margin-bottom:18px;
    color:#222;
    font-size:22px;
}
.pp-vision-card p,
.pp-vision-card li{
    color:#6d6253;
    line-height:1.9;
    font-size:14px;
}
.pp-vision-card ul{
    padding-left:20px;
}
.pp-vision-card li{
    margin-bottom:10px;
}
.pp-cta{
    padding:90px 0;
}
.pp-cta-box{
    padding:65px 30px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #f6ecdc
        );
    border:1px solid #e3cda8;
    border-radius:30px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.08);
}
.pp-cta-box h2{
    margin-bottom:15px;
    color:#1c1915;
    font-size:34px;
}
.pp-cta-box p{
    max-width:650px;
    margin:0 auto 28px;
    color:#6d6253;
    line-height:1.8;
}
.pp-btn{
    display:inline-block;
    padding:14px 36px;
    border-radius:50px;
    background:#c89a4b;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s ease;
}
.pp-btn:hover{
    background:#ad7d31;
    color:#fff;
    transform:translateY(-3px);
}
.pp-location{
    padding:90px 0 110px;
}
.pp-location-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:stretch;
}
.pp-location-info{
    padding:40px;
    background:#fffdf9;
    border:1px solid #e8d9bf;
    border-radius:25px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
}
.pp-location-info h5{
    margin-bottom:20px;
    color:#222;
    font-size:21px;
}
.pp-location-info p{
    color:#6d6253;
    line-height:1.9;
    font-size:14px;
}
.pp-map{
    width:100%;
    height:100%;
    min-height:350px;
    overflow:hidden;
    border-radius:25px;
    box-shadow:
        0 15px 35px rgba(0,0,0,.10);
}
.pp-map iframe{
    width:100%;
    height:100%;
    min-height:350px;
    border:0;
    display:block;
    filter:
        grayscale(15%)
        contrast(1.05);
}
@media(max-width:991px){
    .pp-profile-wrapper,
    .pp-story-grid,
    .pp-philosophy-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .pp-main-image{
        height:430px;
    }
    .pp-story-image{
        height:430px;
    }
    .pp-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .pp-commit-grid{
        grid-template-columns:1fr;
    }
    .pp-location-grid{
        grid-template-columns:1fr;
    }
    .pp-map{
        min-height:350px;
    }
}
@media(max-width:767px){

    .pp-about{
        padding-top:50px;
    }
    .pp-section,
    .pp-profile,
    .pp-story,
    .pp-philosophy,
    .pp-banner,
    .pp-experience,
    .pp-commitment,
    .pp-stats,
    .pp-quote,
    .pp-vision,
    .pp-cta,
    .pp-location{
        padding:60px 0;
    }
    .pp-container{
        padding:0 18px;
    }
    .pp-title{
        font-size:27px;
    }
    .pp-text{
        font-size:14px;
    }
    .pp-main-image{
        height:350px;

        border-radius:22px;
    }
    .pp-story-image{
        height:350px;

        border-radius:22px;
    }
    .pp-banner-image{
        height:320px;

        border-radius:22px;
    }
    .pp-banner-title{
        font-size:30px;
    }

    .pp-banner-small{
        font-size:10px;
        letter-spacing:3px;
    }
    .pp-banner-text{
        font-size:13px;
    }
    .pp-image-card{
        height:380px;

        border-radius:22px;
    }
    .pp-stats-grid{
        grid-template-columns:1fr 1fr;

        gap:14px;
    }
    .pp-stat{
        padding:30px 12px;
    }
    .pp-stat h2{
        font-size:30px;
    }
    .pp-stat span{
        font-size:11px;
    }
    .pp-stat-icon{
        width:60px;
        height:60px;
    }
    .pp-stat-icon i{
        font-size:25px;
    }
    .pp-quote-box{
        padding:55px 25px;
    }
    .pp-quote-text{
        font-size:23px;
    }
    .pp-vision-card{
        padding:28px 23px;
    }
    .pp-cta-box{
        padding:45px 22px;
    }
    .pp-cta-box h2{
        font-size:27px;
    }
    .pp-location-info{
        padding:28px 23px;
    }
}
</style>


<div class="pp-about">


    {{-- =================================================
         PROFILE
    ================================================== --}}

    <section class="pp-profile">

        <div class="pp-container">

            <div class="pp-profile-wrapper">

                {{-- IMAGE --}}

                <div class="pp-main-image">

                    <img
                        src="{{ asset('storage/kanan.png') }}"
                        alt="Pekanbaru Perfumery"
                    >

                </div>


                {{-- TEXT --}}

                <div>

                    <span class="pp-badge">
                        Luxury Fragrance
                    </span>

                    <h2 class="pp-title">
                        Tentang Pekanbaru Perfumery
                    </h2>

                    <p class="pp-text">
                        <strong>Pekanbaru Perfumery</strong> merupakan butik
                        parfum premium yang menghadirkan berbagai pilihan aroma
                        berkualitas tinggi untuk pria maupun wanita.
                    </p>

                    <p class="pp-text">
                        Kami percaya bahwa parfum bukan hanya sekadar wewangian,
                        tetapi juga bagian dari karakter, kepercayaan diri,
                        dan gaya hidup seseorang.
                    </p>

                    <p class="pp-text">
                        Dengan menghadirkan koleksi fragrance pilihan, kami
                        berkomitmen memberikan pengalaman terbaik melalui produk
                        berkualitas, pelayanan profesional, dan harga yang kompetitif.
                    </p>

                    <ul class="pp-profile-list">

                        <li>
                            Parfum premium berkualitas tinggi
                        </li>

                        <li>
                            Aroma tahan lama
                        </li>

                        <li>
                            Koleksi pria & wanita
                        </li>

                        <li>
                            Lebih dari 100 pilihan fragrance
                        </li>

                        <li>
                            Pelayanan profesional & terpercaya
                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </section>



    {{-- =================================================
         OUR STORY
    ================================================== --}}

    <section class="pp-story">

        <div class="pp-container">

            <div class="pp-story-grid">

                {{-- IMAGE --}}

                <div class="pp-story-image">

                    <img
                        src="{{ asset('storage/mery1.png') }}"
                        alt="Pekanbaru Perfumery Store"
                    >

                </div>


                {{-- TEXT --}}

                <div>

                    <span class="pp-badge">
                        Our Story
                    </span>

                    <h2 class="pp-title">
                        Sebuah Perjalanan Dalam Dunia Fragrance
                    </h2>

                    <p class="pp-text">
                        Pekanbaru Perfumery hadir untuk memberikan pengalaman
                        berbeda dalam menikmati dunia parfum. Kami percaya bahwa
                        parfum bukan hanya sekadar wewangian, tetapi juga menjadi
                        bagian dari karakter dan identitas seseorang.
                    </p>

                    <p class="pp-text">
                        Setiap aroma memiliki karakter tersendiri. Ada aroma yang
                        memberikan kesan fresh, elegan, misterius, hingga sensual.
                        Karena itu, kami menghadirkan beragam pilihan fragrance
                        agar setiap pelanggan dapat menemukan aroma yang paling
                        sesuai dengan dirinya.
                    </p>

                    <p class="pp-text">
                        Dengan mengutamakan kualitas produk dan pelayanan yang baik,
                        Pekanbaru Perfumery terus berusaha memberikan pengalaman
                        fragrance yang berkesan bagi setiap pelanggan.
                    </p>

                </div>

            </div>

        </div>

    </section>



    {{-- =================================================
         PHILOSOPHY
    ================================================== --}}

    <section class="pp-philosophy">

        <div class="pp-container">

            <div class="pp-philosophy-grid">

                {{-- TEXT --}}

                <div>

                    <span class="pp-badge">
                        Our Philosophy
                    </span>

                    <h2 class="pp-title">
                        Aroma Yang Menjadi Identitas
                    </h2>

                    <p class="pp-text">
                        Kami percaya bahwa aroma dapat menjadi bagian dari cara
                        seseorang memperkenalkan dirinya kepada dunia.
                    </p>

                    <p class="pp-text">
                        Sebuah parfum dapat menciptakan kesan pertama, mengingatkan
                        seseorang pada sebuah momen, bahkan menjadi signature scent
                        yang melekat pada karakter seseorang.
                    </p>

                    <p class="pp-text">
                        Oleh karena itu, kami tidak hanya menyediakan parfum,
                        tetapi juga membantu pelanggan menemukan aroma yang dapat
                        merepresentasikan kepribadian dan gaya mereka.
                    </p>


                    <div class="pp-highlight">

                        <i class="bi bi-stars pp-highlight-icon"></i>

                        <div>

                            <span class="pp-highlight-title">
                                Find Your Signature Scent
                            </span>

                            <p class="pp-highlight-text">
                                Temukan aroma yang terasa seperti diri Anda.
                            </p>

                        </div>

                    </div>

                </div>
                <div class="pp-story-image">

                    <img
                        src="{{ asset('storage/mery2.png') }}"
                        alt="Luxury Fragrance"
                    >

                </div>

            </div>

        </div>

    </section>



    {{-- =================================================
         BANNER
    ================================================== --}}

    <section class="pp-banner">

        <div class="pp-container">

            <div class="pp-banner-image">

                <img
                    src="{{ asset('storage/abo2.png') }}"
                    alt="Pekanbaru Perfumery Collection"
                >

                <div class="pp-banner-overlay">

                    <div>

                        <span class="pp-banner-small">
                            PEKANBARU PERFUMERY
                        </span>

                        <h2 class="pp-banner-title">
                            The Art of Fragrance
                        </h2>

                        <p class="pp-banner-text">
                            Elegance in every drop.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </section>



    {{-- =================================================
         FRAGRANCE EXPERIENCE
    ================================================== --}}

    <section class="pp-experience">

        <div class="pp-container">

            <div class="pp-heading-center">

                <span class="pp-badge">
                    Fragrance Experience
                </span>

                <h2 class="pp-title">
                    Temukan Aroma Favorit Anda
                </h2>

                <p class="pp-text">
                    Setiap aroma memiliki karakter dan cerita yang berbeda.
                    Temukan fragrance yang paling sesuai dengan diri Anda.
                </p>

            </div>


            <div class="row g-4">

                {{-- CARD 1 --}}

                <div class="col-md-4">

                    <div class="pp-image-card">

                        <img
                            src="{{ asset('storage/abo1.png') }}"
                            alt="Elegant Fragrance"
                        >

                        <div class="pp-image-caption">

                            <h5>
                                Elegant
                            </h5>

                            <p>
                                Aroma elegan untuk menciptakan kesan berkelas.
                            </p>

                        </div>

                    </div>

                </div>


                {{-- CARD 2 --}}

                <div class="col-md-4">

                    <div class="pp-image-card">

                        <img
                            src="{{ asset('storage/abo3.png') }}"
                            alt="Signature Fragrance"
                        >

                        <div class="pp-image-caption">

                            <h5>
                                Signature
                            </h5>

                            <p>
                                Temukan aroma yang menjadi identitas Anda.
                            </p>

                        </div>

                    </div>

                </div>


                {{-- CARD 3 --}}

                <div class="col-md-4">

                    <div class="pp-image-card">

                        <img
                            src="{{ asset('storage/abo2.png') }}"
                            alt="Premium Fragrance"
                        >

                        <div class="pp-image-caption">

                            <h5>
                                Confidence
                            </h5>

                            <p>
                                Aroma yang meningkatkan rasa percaya diri.
                            </p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>



    {{-- =================================================
         KOMITMEN
    ================================================== --}}

    <section class="pp-commitment">

        <div class="pp-container">

            <div class="pp-heading-center">

                <span class="pp-badge">
                    Our Commitment
                </span>

                <h2 class="pp-title">
                    Komitmen Kami
                </h2>

            </div>


            <div class="pp-commit-grid">


                <div class="pp-commit-card">

                    <i class="bi bi-stars pp-commit-icon"></i>

                    <h5>
                        Kualitas Premium
                    </h5>

                    <p>
                        Menghadirkan parfum berkualitas dengan aroma
                        eksklusif dan elegan.
                    </p>

                </div>


                <div class="pp-commit-card">

                    <i class="bi bi-heart pp-commit-icon"></i>

                    <h5>
                        Kepuasan Pelanggan
                    </h5>

                    <p>
                        Memberikan pelayanan terbaik untuk pengalaman
                        belanja parfum yang nyaman dan menyenangkan.
                    </p>

                </div>


                <div class="pp-commit-card">

                    <i class="bi bi-gem pp-commit-icon"></i>

                    <h5>
                        Elegan & Berkelas
                    </h5>

                    <p>
                        Menyediakan aroma yang memberi kesan mewah
                        dan meningkatkan rasa percaya diri.
                    </p>

                </div>


            </div>

        </div>

    </section>



    {{-- =================================================
         STATS
    ================================================== --}}

    <section class="pp-stats">

        <div class="pp-container">

            <div class="pp-heading-center">

                <span class="pp-badge">
                    Our Achievement
                </span>

                <h2 class="pp-title">
                    Pekanbaru Perfumery in Numbers
                </h2>

            </div>


            <div class="pp-stats-grid">


                <div class="pp-stat">

                    <div class="pp-stat-icon">
                        <i class="bi bi-stars"></i>
                    </div>

                    <h2>
                        100+
                    </h2>

                    <span>
                        Varian Aroma
                    </span>

                </div>


                <div class="pp-stat">

                    <div class="pp-stat-icon">
                        <i class="bi bi-shop"></i>
                    </div>

                    <h2>
                        2
                    </h2>

                    <span>
                        Boutique Store
                    </span>

                </div>


                <div class="pp-stat">

                    <div class="pp-stat-icon">
                        <i class="bi bi-people-fill"></i>
                    </div>

                    <h2>
                        10K+
                    </h2>

                    <span>
                        Pelanggan Puas
                    </span>

                </div>


                <div class="pp-stat">

                    <div class="pp-stat-icon">
                        <i class="bi bi-gem"></i>
                    </div>

                    <h2>
                        100%
                    </h2>

                    <span>
                        Premium Quality
                    </span>

                </div>


            </div>

        </div>

    </section>



    {{-- =================================================
         QUOTE
    ================================================== --}}

    <section class="pp-quote">

        <div class="pp-container">

            <div class="pp-quote-box">

                <span class="pp-quote-mark">
                    ❝
                </span>

                <p class="pp-quote-text">
                    "The Right Solution
                    To Be More Confident"
                </p>

                <p class="pp-quote-author">
                    — Pekanbaru Perfumery
                </p>

            </div>

        </div>

    </section>



    {{-- =================================================
         VISI MISI
    ================================================== --}}

    <section class="pp-vision">

        <div class="pp-container">

            <div class="pp-heading-center">

                <span class="pp-badge">
                    Our Direction
                </span>

                <h2 class="pp-title">
                    Visi & Misi Kami
                </h2>

            </div>


            <div class="pp-vision-grid">


                {{-- VISI --}}

                <div class="pp-vision-card">

                    <h5>
                        <i class="bi bi-eye me-2"
                           style="color:#c89a4b;"></i>

                        Visi
                    </h5>

                    <p>
                        Menjadi butik parfum premium terpercaya di Indonesia
                        yang menghadirkan koleksi fragrance berkualitas tinggi
                        dengan pelayanan terbaik serta pengalaman berbelanja
                        yang elegan.
                    </p>

                </div>


                {{-- MISI --}}

                <div class="pp-vision-card">

                    <h5>
                        <i class="bi bi-bullseye me-2"
                           style="color:#c89a4b;"></i>

                        Misi
                    </h5>

                    <ul>

                        <li>
                            Menyediakan parfum original dan berkualitas.
                        </li>

                        <li>
                            Menghadirkan koleksi aroma terbaik
                            untuk berbagai karakter.
                        </li>

                        <li>
                            Memberikan pelayanan yang profesional
                            dan ramah.
                        </li>

                        <li>
                            Terus menghadirkan inovasi
                            dalam dunia fragrance.
                        </li>

                    </ul>

                </div>


            </div>

        </div>

    </section>



    {{-- =================================================
         CTA
    ================================================== --}}

    <section class="pp-cta">

        <div class="pp-container">

            <div class="pp-cta-box">

                <h2>
                    Temukan Aroma Favorit Anda
                </h2>

                <p>
                    Jelajahi koleksi parfum premium Pekanbaru Perfumery
                    dan temukan aroma yang paling sesuai dengan karakter
                    dan gaya Anda.
                </p>

                <a href="/semuaproduk" class="pp-btn">
                    Belanja Sekarang
                </a>

            </div>

        </div>

    </section>



    {{-- =================================================
         LOCATION
    ================================================== --}}

    <section class="pp-location">

        <div class="pp-container">

            <div class="pp-heading-center">

                <span class="pp-badge">
                    Visit Us
                </span>

                <h2 class="pp-title">
                    Pekanbaru Perfumery Boutique
                </h2>

            </div>


            <div class="pp-location-grid">


                {{-- INFO --}}

                <div class="pp-location-info">

                    <h5>
                        Informasi Lokasi
                    </h5>

                    <p>

                        <strong>
                            Pekanbaru Perfumery Boutique
                        </strong>

                        <br><br>

                        Kunjungi butik kami untuk mencoba berbagai
                        koleksi parfum premium secara langsung dan
                        dapatkan rekomendasi aroma yang sesuai dengan
                        kepribadian Anda.

                        <br><br>

                        <strong>
                            Jam Operasional:
                        </strong>

                        <br>

                        Setiap Hari 08.00 - 22.00

                        <br><br>

                        <strong>
                            Customer Service:
                        </strong>

                        <br>

                        082170174812

                    </p>

                </div>


                {{-- MAP --}}

                <div class="pp-map">

                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d127670.00042732456!2d101.4204!3d0.46395700000000006!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31d5a9f1d224a70d%3A0xe4279bb08becad2a!2sPekanbaru%20Perfumery%20Adi%20Sucipto!5e0!3m2!1sid!2sid!4v1785919538182!5m2!1sid!2sid"
                        allowfullscreen
                        loading="lazy"
                        referrerpolicy="strict-origin-when-cross-origin">
                    </iframe>

                </div>


            </div>

        </div>

    </section>


</div>

@endsection