<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>O Nama - Naša Priča</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-900">

    <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-md z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <div class="text-2xl font-bold text-blue-600 flex items-center hover:scale-105 transition-transform">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 animate-pulse">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                    Aurashop.fn
                </div>
            </div>
            <nav class="navbar">
               
                <a href="#" class="toggle-button">
                  <span class="bar"></span>
                  <span class="bar"></span>
                  <span class="bar"></span>
                </a>
                <div class="navbar-links">
                  <ul>
                    <li><a href="/">Početna</a></li>
                    <li><a href="/about">O nama</a></li>
                    <li><a href="/usluge">Usluge</a></li>
                    <li><a href="/contact">Kontakt</a></li>
                    <li><a href="/convert">Konverter</a></li>
                  </ul>
                </div>
              </nav>
            
            <div class="md:hidden">
                <button id="mobile-menu-toggle" class="text-white-600 hover:text-blue-600">
                    <lucide-menu />
                </button>
            </div>
        </div>
    </nav>

    <header class="pt-24 pb-20 text-center bg-gradient-to-br from-blue-500 to-purple-600 text-white">
        <div class="container mx-auto px-4 animate__animated animate__fadeIn">
            <h1 class="text-6xl font-bold mb-5">Naša Priča</h1>
            <p class="text-xl mb-8">Vizionari koji transformiraju poslovni svijet</p>
        </div>
    </header>

    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 max-w-4xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-blue-600 mb-4">Naša Misija</h2>
                <p class="text-xl text-gray-700">
                    Posvećeni smo pružanju inovativnih rješenja koja olakšavaju i unapređuju život naših klijenata. 
                    Naš tim stručnjaka konstantno teži izvrsnosti i stvaranju revolucionarnih strategija.
                </p>
            </div>
        </div>
    </section>

    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 text-blue-600">Naš Tim</h2>
            <div id="teamMembers" class="grid md:grid-cols-3 gap-8">
            
            </div>
        </div>
    </section>

    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 text-blue-600">Naše Vrijednosti</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center p-6 bg-blue-50 rounded-lg hover:shadow-lg transition">
                    <h3 class="text-xl font-semibold mb-4 text-blue-600">Inovacija</h3>
                    <p>Kontinuirano tražimo nove načine rješavanja kompleksnih izazova.</p>
                </div>
                <div class="text-center p-6 bg-green-50 rounded-lg hover:shadow-lg transition">
                    <h3 class="text-xl font-semibold mb-4 text-green-600">Transparentnost</h3>
                    <p>Otvorena komunikacija i poštenje su temelji našeg poslovanja.</p>
                </div>
                <div class="text-center p-6 bg-purple-50 rounded-lg hover:shadow-lg transition">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">Partnerstvo</h3>
                    <p>Gradimo dugoročne odnose utemeljene na povjerenju i mutual uspjehu.</p>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 text-center">
            © 2024 Aurashop.fn
        </div>
    </footer>
<style>
              .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
padding: 10px 20px;
  
}

.brand {
  color: #2563eb;
  font-size: 1.0rem;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  
}

.navbar-links li {
  list-style: none;
}
/* ovo je za slova u nav baru */
.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: 1rem;
  display: block;
  color: #2563eb;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul {
    flex-direction: column;
    width: 100%;
  }

  .navbar-links li {
    text-align: center;
  }

  .navbar-links.active {
    display: flex;
  }
}
</style>
    <script>
        const toggleButton = document.querySelector('.toggle-button');
const navbarLinks = document.querySelector('.navbar-links');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
});
        const teamMembers = [
            { 
                name: "Owner", 
                role: "CEO & Founder", 
                description: "Ekspert sa 10+ godina iskustva u svom poslu. Pokrenuo shop u 2019. godini",
                image: "/placeholder/marko.jpg"
            },
            { 
                name: "Co-Owner", 
                role: "Second CEO", 
                description: "Stručnjak za strateško planiranje i poslovni razvoj.",
                image: "/placeholder/ana.jpg"
            },
            { 
                name: "Marketing Team", 
                role: "Technical Director", 
                description: "Tehnološka osoba sa fokusom na inovativna rješenja, glavni za brigu radnika.",
                image: "/placeholder/test.jpg"
            },
            { 
                name: "Radnici", 
                role: "Workers", 
                description: "Osobe koje primaju i rješavaju uplate.",
                image: "/placeholder/test.jpg"
            },
            { 
                name: "Supplier", 
                role: "Main Distributer", 
                description: "Osobe koje se brinu za sigurnost vaših podataka i akaunta",
                image: "/placeholder/test.jpg"
            },
            { 
                name: "Designer", 
                role: "", 
                description: "Osoba koja se brine da stranica izgleda lijepo kreiranjem lijepih i inovativnih logo-a, designova i slično.",
                image: "/placeholder/test.jpg"
            },
        ];

        const teamMembersContainer = document.getElementById('teamMembers');

        teamMembers.forEach(member => {
            const memberCard = document.createElement('div');
            memberCard.className = 'bg-white rounded-lg shadow-md overflow-hidden transform transition hover:scale-105';
            memberCard.innerHTML = `
                <div class="p-6 text-center">
                    <div class="w-32 h-32 mx-auto mb-4 bg-blue-500 rounded-full"></div>
                    <h3 class="text-xl font-bold text-blue-600">${member.name}</h3>
                    <p class="text-gray-600 mb-2">${member.role}</p>
                    <p class="text-gray-700">${member.description}</p>
                </div>
            `;
            teamMembersContainer.appendChild(memberCard);
        });
    </script>
</body>
</html>