<?php
include('includes/config.php'); // koneksi database
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tentang Kami - Alfateeh Sepatuku</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:#f5f7fa;color:#333;}


nav{display:flex;justify-content:space-between;align-items:center;padding:15px 40px;background:#1e88e5;color:#fff;position:sticky;top:0;z-index:1000;}
nav a{color:#fff;text-decoration:none;margin-left:20px;font-weight:500;transition:.3s;}
nav a:hover{color:#ffeb3b;}
nav .logo{font-size:1.8rem;font-weight:800;letter-spacing:1px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}


.banner-tentang{
    position:relative;
    width:100%;
    height:60vh;
    background:url('assets/img/background-tentang.jpg') no-repeat center center;
    background-size:cover;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}
.banner-tentang::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(30,136,229,0.5);
}
.banner-tentang .banner-text{
    position:relative;
    color:#fff;
    z-index:1;
    max-width:800px;
}
.banner-tentang h1{
    font-size:3rem;
    margin-bottom:15px;
    text-shadow:2px 2px 8px rgba(0,0,0,0.6);
    animation:fadeInDown 1s ease forwards;
}
.banner-tentang p{
    font-size:1.2rem;
    text-shadow:1px 1px 5px rgba(0,0,0,0.5);
    animation:fadeInUp 1s ease forwards;
    animation-delay:0.3s;
}


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


.container{
    width:90%;
    max-width:1000px;
    margin:40px auto;
    text-align:center;
}
.container h2{color:#1e88e5;margin-bottom:25px;font-size:2.2rem; text-shadow:1px 1px 3px rgba(0,0,0,0.2);}
.container p{color:#333;font-size:1.1rem;line-height:1.8;margin-bottom:15px;}


.card-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin-top:40px;
}
.card{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    flex:1 1 250px;
    transition:transform .3s, box-shadow .3s;
}
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.card i{
    font-size:2.5rem;
    margin-bottom:10px;
    color:#1e88e5;
}
.card h3{color:#1e88e5;margin-bottom:10px;}
.card p{color:#333;font-size:1rem;line-height:1.6;}


footer{
    background:#1e88e5;
    color:#fff;
    text-align:center;
    padding:20px;
    margin-top:40px;
    font-size:.9rem;
}


@media screen and (max-width:768px){
    .banner-tentang h1{font-size:2rem;}
    .banner-tentang p{font-size:1rem;}
    .card-container{flex-direction:column; align-items:center;}
}
</style>
</head>
<body>

<nav>
  <div class="logo">ALFATEEH SEPATUKU</div>
  <div>
      <a href="index.php">Beranda</a>
      <a href="tentang.php">Tentang Kami</a>
      <a href="kontak.php">Kontak</a>
  </div>
</nav>

<section class="banner-tentang">
    <div class="banner-text">
        <h1>Tentang Alfateeh Sepatuku</h1>
        <p>Menyatukan warisan budaya dan inovasi modern dalam setiap langkah yang Anda ambil</p>
    </div>
</section>

<div class="container">
    <h2>Visi & Misi Kami</h2>
    <p>Kami percaya sepatu bukan hanya pelindung kaki, tetapi juga cerminan gaya hidup, tradisi, dan inovasi. Setiap desain mencerminkan perpaduan estetika klasik Turki dengan kenyamanan modern.</p>
    <p>Filosofi kami: <strong>"Langkah kecil, cerita besar."</strong> Setiap langkah yang diambil dengan Alfateeh adalah bagian dari perjalanan hidup yang berarti.</p>
    <p>Selain kualitas, kami menekankan keberlanjutan dan tanggung jawab sosial, memastikan setiap produk dibuat secara etis dan peduli lingkungan.</p>

    <div class="card-container">
        <div class="card">
            <i class="fas fa-shoe-prints"></i>
            <h3>Kenyamanan</h3>
            <p>Setiap produk dirancang agar nyaman dipakai sepanjang hari, tanpa mengorbankan gaya.</p>
        </div>
        <div class="card">
            <i class="fas fa-globe"></i>
            <h3>Inovasi</h3>
            <p>Perpaduan desain klasik dan modern memastikan produk selalu relevan dan stylish.</p>
        </div>
        <div class="card">
            <i class="fas fa-leaf"></i>
            <h3>Keberlanjutan</h3>
            <p>Kami peduli lingkungan dengan produksi etis dan material ramah lingkungan.</p>
        </div>
    </div>
</div>

<footer>
    <p>© 2025 AlfateehSepatuku.com - Semua Hak Dilindungi</p>
</footer>

</body>
</html>
