<!DOCTYPE html>
<html lang="hu">
<head>
    <!--=== METADATA ===-->
    <meta charset="UTF-8">
    <title>JUPITR &dash; Innovatív Technológiai Megoldások</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://cdn.spotsync.hu/jupitr/LogoInvertWhite.png" type="image/x-icon">

    <!--=== GOOGLE 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&family=Archivo+Black&display=swap"
        rel="stylesheet"
    />

    <!--=== KINÉZET ===-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com/"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

    <!--=== SEO ===-->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <meta name="description" content="💻 JUPITR | Innovatív Technológiai Megoldások">
    <meta name="keywords" content="jupitr, olcso, weboldal, webshop, spotsync, alkalmazas, cica, kutya">
    <meta name="author" content="JUPITR TEAM"> 
    <meta name="robots" content="index, follow"> 
    <meta name="googlebot" content="index, follow"> 

    <style>
        html{
            scroll-behavior: smooth;
        }

        body{
            font-family: 'Inter', 'system-ui', -apple-system, sans-serif;
        }

        .font-family-logo{
            font-family: 'Archivo Black', 'system-ui', -apple-system, sans-serif;
        }

        .blob {
            animation: move 10s infinite linear;
            filter: blur(60px);
        }
        
        .blueprint-bg {
            background-image: radial-gradient(#2563eb 1px, transparent 1px);
            background-size: 20px 20px;
        }
        
        @keyframes move {
            0% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(100px, 50px) rotate(180deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }

        .hover-card:hover {
            transform: translateY(-5px);
        }

        .tech-container {
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .tech-scroll {
            display: flex;
            gap: 2rem;
            animation: scroll 40s linear infinite;
        }

        .tech-scroll a {
            flex-shrink: 0;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @media (max-width: 768px) {
            .tech-scroll {
                gap: 1rem;
                animation-duration: 30s;
            }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh);
            }
        }
        .snowflake {
            animation: fall linear infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        .service-card {
            transition: all 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="bg-slate-900 text-white min-h-screen relative overflow-x-hidden">
    <!-- Background elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="blob absolute top-0 left-0 w-96 h-96 bg-orange-800/20 rounded-full"></div>
        <div class="blob absolute bottom-0 right-0 w-96 h-96 bg-orange-500/20 rounded-full"></div>
    </div>
    <div class="fixed inset-0 blueprint-bg opacity-5 pointer-events-none"></div>
    <div id="snow-container" class="fixed inset-0 pointer-events-none"></div>

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 backdrop-blur-xl border-b border-slate-800/50 bg-slate-900/80">
        <div class="container mx-auto px-4 md:px-6 py-3 md:py-4">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center gap-2">
                    <img src="https://cdn.spotsync.hu/jupitr/LogoTransparentColor.svg" alt="Jupitr logó" class="h-8 md:h-12">
                    <span class="text-xl md:text-2xl font-bold text-[#D48735] font-family-logo">Jupitr</span>
                </div>
                
                <!-- Desktop Menu -->
                <div class="hidden md:flex items-center gap-8">
                    <a href="#szolgaltatasok" class="text-slate-200 hover:text-[#D48735] transition-all duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 hover:after:w-full after:bg-[#D48735] after:transition-all after:duration-300">
                        Szolgáltatások
                    </a>
                    <a href="#projektek" class="text-slate-200 hover:text-[#D48735] transition-all duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 hover:after:w-full after:bg-[#D48735] after:transition-all after:duration-300">
                        Projektek
                    </a>
                    <a href="#technologiak" class="text-slate-200 hover:text-[#D48735] transition-all duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 hover:after:w-full after:bg-[#D48735] after:transition-all after:duration-300">
                        Technológiák
                    </a>
                    <a href="#kapcsolat" class="bg-[#D48735] px-6 py-2 rounded-lg hover:bg-[#D48735]/90 transition-all duration-300 shadow-lg hover:shadow-[#D48735]/20 flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                        </svg>
                        Kapcsolat
                    </a>
                </div>
                
                <!-- Mobile Menu Button -->
                <button id="mobile-menu-button" class="md:hidden p-2 hover:bg-slate-800/50 rounded-lg transition-colors" aria-label="Menü">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                        <line x1="4" x2="20" y1="12" y2="12"/>
                        <line x1="4" x2="20" y1="6" y2="6"/>
                        <line x1="4" x2="20" y1="18" y2="18"/>
                    </svg>
                </button>
            </div>
            
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden mt-4 rounded-xl p-4 backdrop-blur-xl">
                <div class="flex flex-col gap-4">
                    <a href="#szolgaltatasok" class="text-slate-200 py-2 px-4 hover:bg-slate-700/50 rounded-lg transition-all duration-300">
                        Szolgáltatások
                    </a>
                    <a href="#projektek" class="text-slate-200 py-2 px-4 hover:bg-slate-700/50 rounded-lg transition-all duration-300">
                        Projektek
                    </a>
                    <a href="#technologiak" class="text-slate-200 py-2 px-4 hover:bg-slate-700/50 rounded-lg transition-all duration-300">
                        Technológiák
                    </a>
                    <a href="#kapcsolat" class="bg-[#D48735] py-2 px-4 rounded-lg hover:bg-[#D48735]/90 transition-all duration-300 text-center shadow-lg hover:shadow-[#D48735]/20">
                        Kapcsolat
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="relative z-10 container mx-auto px-4 md:px-6 pt-8 md:pt-16 pb-16 md:pb-26">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <div class="inline-flex items-center gap-2 bg-[#D48735]/10 px-4 py-2 rounded-full text-[#D48735] mb-6 backdrop-blur-sm text-sm md:text-base">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                        <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                        <path d="M5 3v4"/>
                        <path d="M19 17v4"/>
                        <path d="M3 5h4"/>
                        <path d="M17 19h4"/>
                    </svg>
                    <span>Innovatív Technológiai Megoldások</span>
                </div>
                <h1 class="text-5xl font-bold mb-6">
                    Alakítsuk együtt a <span class="text-[#D48735]">jövő</span> technológiáját
                </h1>
                <div class="space-y-4 text-slate-300 text-lg mb-8">
                    <p>A Jupitr több mint egy fejlesztő csapat - mi vagyunk a híd a jelenlegi technológiák és a jövő innovációi között.</p>
                    <ul class="space-y-2">
                        <li class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5 text-[#D48735]"></i>
                            <span>99.9% uptime szolgáltatásaink között</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5 text-[#D48735]"></i>
                            <span>Közel egy évtizednyi tapasztalat</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5 text-[#D48735]"></i>
                            <span>Legmodernebb technológiai megoldások</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5 text-[#D48735]"></i>
                            <span>Rugalmas árak</span>
                        </li>
                    </ul>
                </div>
                <div class="flex flex-wrap gap-4">
                    <a href="#kapcsolat" class="bg-[#D48735] px-8 py-3 rounded-lg hover:bg-[#D48735]/80 transition-colors flex items-center gap-2">
                        <i data-lucide="rocket" class="w-5 h-5"></i>
                        Kezdjük el
                    </a>
                    <a href="#projektek" class="border border-slate-700 px-8 py-3 rounded-lg hover:bg-slate-800/40 transition-colors flex items-center gap-2">
                        <i data-lucide="lightbulb" class="w-5 h-5"></i>
                        Referenciák
                    </a>
                </div>
                <div class="mt-12 flex items-center gap-8">
                    <div>
                        <div class="text-3xl font-bold text-[#D48735]">5+</div>
                        <div class="text-slate-300">Sikeres projekt</div>
                    </div>
                    <div class="w-px h-12 bg-slate-700"></div>
                    <div>
                        <div class="text-3xl font-bold text-[#D48735]">15E+</div>
                        <div class="text-slate-300">Fejlesztői óra</div>
                    </div>
                    <div class="w-px h-12 bg-slate-700"></div>
                    <div>
                        <div class="text-3xl font-bold text-[#D48735]">100%</div>
                        <div class="text-slate-300">Elégedettség</div>
                    </div>
                </div>
            </div>
            <div class="relative hidden sm:block">
                <div class="absolute inset-0 bg-gradient-to-r from-slate-900 to-transparent z-10"></div>
                <img src="https://cdn.spotsync.hu/jupitr/code.png" alt="Üdvözlőkép">
            </div>
        </div>
    </header>

    <!-- Services Section -->
    <section id="szolgaltatasok" class="relative z-10 py-24 overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="container mx-auto px-4 md:px-6">
                <div class="flex flex-col items-center text-center mb-8 md:mb-16">
                    <h2 class="text-3xl md:text-5xl font-bold mb-4 text-white">Szolgáltatásaink</h2>
                    <p class="text-slate-300 text-base md:text-lg max-w-sm md:max-w-2xl">
                        Komplex megoldásokat kínálunk minden fejlesztési igényre, a kezdeti tervezéstől a folyamatos támogatásig.
                    </p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="code" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">Egyedi Szoftverfejlesztés</h3>
                    <p class="text-slate-300 mb-4">Személyre szabott alkalmazások fejlesztése modern technológiákkal, skálázható architektúrával.</p>
                    
                </div>
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="smartphone" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">Mobilalkalmazás Fejlesztés</h3>
                    <p class="text-slate-300 mb-4">iOS és Android platformokra optimalizált, natív és cross-platform megoldások.</p>
                    
                </div>
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="database" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">Adatbázis Tervezés</h3>
                    <p class="text-slate-300 mb-4">Hatékony, biztonságos és skálázható adatbázis struktúrák tervezése és implementálása.</p>
                    
                </div>
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="cloud" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">Cloud Megoldások</h3>
                    <p class="text-slate-300 mb-4">Felhő alapú infrastruktúra tervezése és implementálása, Github és CloudFlare platformokon.</p>
                    
                </div>
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="shield" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">Biztonsági rendszerek</h3>
                    <p class="text-slate-300 mb-4">Átfogó biztonsági ellenőrzés és tanácsadás, sebezhetőségi tesztek végzése.</p>
                    
                </div>
                <div class="service-card bg-slate-800/40 p-8 rounded-xl backdrop-blur-md">
                    <i data-lucide="brain" class="text-[#D48735] w-16 h-16 mb-6 floating-icon"></i>
                    <h3 class="text-2xl font-bold mb-4">AI Integráció</h3>
                    <p class="text-slate-300 mb-4">Mesterséges intelligencia és gépi tanulási megoldások implementálása.</p>
                    
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projektek" class="relative z-10 py-24">
        <div class="container mx-auto px-6">
            <h2 class="text-4xl font-bold mb-16">Kiemelt Projektjeink</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="group bg-slate-800/40 rounded-xl overflow-hidden hover-card transition-all duration-300">
                <div class="relative">
                    <img src="https://cdn.spotsync.hu/jupitr/spotsync.png" alt="SpotSync" class="w-full opacity-50">
                </div>    
                <div class="p-6">
                    <a href="https://spotsync.hu" target="_blank" class="inline-flex items-center">
                        <h3 class="text-xl font-bold mb-2 hover:text-[#D48735] transition-colors duration-300 flex items-center">
                            SpotSync 
                            <i data-lucide="link" class="h-4 w-4 ml-2 transition-transform duration-300 transform"></i>
                        </h3>
                    </a>

                    <p class="text-slate-300 mb-4">Valós idejű helymegosztás egyszerűen és biztonságosan. Találkozz barátaiddal stressz nélkül.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-flutter"></i></span>
                        <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-python"></i></span>
                        <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-node"></i></span>
                        <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-js"></i></span>
                        <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-php"></i></span>
                    </div>
                </div>
            </div>
                <div class="group bg-slate-800/40 rounded-xl overflow-hidden hover-card transition-all duration-300">
                    <div class="relative">
                        <img src="https://cdn.spotsync.hu/jupitr/tintakod.png" alt="Tintakód" class="w-full opacity-50">
                    </div>
                    <div class="p-6">
                        <a href="https://tintakod.hu" target="_blank" class="inline-flex items-center">
                            <h3 class="text-xl font-bold mb-2 hover:text-[#D48735] transition-colors duration-300 flex items-center">
                                Tintakód 
                                <i data-lucide="link" class="h-4 w-4 ml-2 transition-transform duration-300 transform"></i>
                            </h3>
                        </a>
                        <p class="text-slate-300 mb-4">Modern, felhasználóbarát webshop, amely lehetővé teszi új és használt elektronikai termékek gyors és egyszerű vásárlását.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-react"></i></span>
                            <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-js"></i></span>
                            <span class="bg-slate-700 px-3 py-1 rounded-full text-sm"><i class="fa-brands fa-php"></i></span>
                        </div>
                    </div>
                </div>
                <div class="group bg-slate-800/40 rounded-xl overflow-hidden hover-card transition-all duration-300 w-full max-w-md mx-auto">
                    <div class="p-4 md:p-6 relative min-h-[200px] flex justify-center items-center">
                        <div class="absolute inset-0 bg-opacity-100 z-10 blur-sm"></div>
                        <div class="relative text-center text-white z-20 w-full px-2 md:px-4">
                            <p class="flex flex-col items-center gap-2">
                                <span class="text-slate-300 text-sm md:text-base">Ez a projekt jelenleg nem létezik.</span>
                                <span class="text-sm md:text-base">Ha szeretnéd, hogy a te projekted is szerepeljen itt,</span>
                                <a href="#kapcsolat" class="inline-flex items-center bg-[#D48735] text-white py-2 mt-3 px-4 rounded-lg text-sm font-semibold hover:bg-[#D48735]/80 transition-all duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                                        <path d="M22 2L11 13"></path>
                                        <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
                                    </svg>
                                    Lépj kapcsolatba velünk!
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technologies Section -->
    <section id="technologiak" class="relative z-10 py-16 overflow-hidden">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-10">Technológiai Megoldásaink</h2>
            
            <div class="tech-container">
                <div class="tech-scroll">
                    <!-- Eredeti elemek -->
                    <a href="https://javascript.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/javascript.png" alt="JavaScript" class="h-8 md:h-10"></a>
                    <a href="https://typescriptlang.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/typescript.png" alt="TypeScript" class="h-8 md:h-10"></a>
                    <a href="https://nodejs.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nodejsnobg.png" alt="Node.js" class="h-8 md:h-10"></a>
                    <a href="https://python.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/pythonnobg.png" alt="Python" class="h-8 md:h-10"></a>
                    <a href="https://java.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/java.png" alt="Java" class="h-8 md:h-10"></a>
                    <a href="https://kotlinglang.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/kotlin.png" alt="Kotlin" class="h-8 md:h-10"></a>
                    <a href="https://swift.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/swift.png" alt="Swift" class="h-8 md:h-10"></a>
                    <a href="https://flutter.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/flutternobg.png" alt="Flutter" class="h-8 md:h-10"></a>
                    <a href="https://dart.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/dart.png" alt="Dart" class="h-8 md:h-10"></a>
                    <a href="https://debian.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/debian.png" alt="Debian" class="h-8 md:h-10"></a>
                    <a href="https://php.net" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/php.png" alt="PHP" class="h-8 md:h-10"></a>
                    <a href="https://w3.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/html.png" alt="Html" class="h-8 md:h-10"></a>
                    <a href="https://tailwindcss.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/tailwindcss.png" alt="TailwindCSS" class="h-8 md:h-10"></a>
                    <a href="https://react.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/react.png" alt="React" class="h-8 md:h-10"></a>
                    <a href="https://nextjs.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nextjswhite.png" alt="NextJs" class="h-8 md:h-10"></a>
                    <a href="https://mysql.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/mysqlgood.png" alt="MySQL" class="h-8 md:h-10"></a>
                    <a href="https://heidisql.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/heidi.png" alt="HeidiSQL" class="h-8 md:h-10"></a>
                    <a href="https://figma.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/figma.png" alt="Figma" class="h-8 md:h-10"></a>
                    <a href="https://code.visualstudio.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/vscode.png" alt="VSCode" class="h-8 md:h-10"></a>
                    <a href="https://nginx.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nginx.png" alt="NGINX" class="h-8 md:h-10"></a>

                    <!-- Duplikált elemek -->
                    <a href="https://javascript.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/javascript.png" alt="JavaScript" class="h-8 md:h-10"></a>
                    <a href="https://typescriptlang.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/typescript.png" alt="TypeScript" class="h-8 md:h-10"></a>
                    <a href="https://nodejs.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nodejsnobg.png" alt="Node.js" class="h-8 md:h-10"></a>
                    <a href="https://python.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/pythonnobg.png" alt="Python" class="h-8 md:h-10"></a>
                    <a href="https://java.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/java.png" alt="Java" class="h-8 md:h-10"></a>
                    <a href="https://kotlinglang.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/kotlin.png" alt="Kotlin" class="h-8 md:h-10"></a>
                    <a href="https://swift.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/swift.png" alt="Swift" class="h-8 md:h-10"></a>
                    <a href="https://flutter.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/flutternobg.png" alt="Flutter" class="h-8 md:h-10"></a>
                    <a href="https://dart.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/dart.png" alt="Dart" class="h-8 md:h-10"></a>
                    <a href="https://debian.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/debian.png" alt="Debian" class="h-8 md:h-10"></a>
                    <a href="https://php.net" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/php.png" alt="PHP" class="h-8 md:h-10"></a>
                    <a href="https://w3.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/html.png" alt="Html" class="h-8 md:h-10"></a>
                    <a href="https://tailwindcss.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/tailwindcss.png" alt="TailwindCSS" class="h-8 md:h-10"></a>
                    <a href="https://react.dev" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/react.png" alt="React" class="h-8 md:h-10"></a>
                    <a href="https://nextjs.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nextjswhite.png" alt="NextJs" class="h-8 md:h-10"></a>
                    <a href="https://mysql.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/mysqlgood.png" alt="MySQL" class="h-8 md:h-10"></a>
                    <a href="https://heidisql.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/heidi.png" alt="HeidiSQL" class="h-8 md:h-10"></a>
                    <a href="https://figma.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/figma.png" alt="Figma" class="h-8 md:h-10"></a>
                    <a href="https://code.visualstudio.com" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/vscode.png" alt="VSCode" class="h-8 md:h-10"></a>
                    <a href="https://nginx.org" target="_blank"><img src="https://cdn.spotsync.hu/jupitr/languages/nginx.png" alt="NGINX" class="h-8 md:h-10"></a>
                    <!-- Többi duplikált elem -->
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="kapcsolat" class="relative z-10 py-24 bg-slate-800/40/50">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-4xl font-bold mb-4">Kezdjük el közösen a következő projektet</h2>
                <p class="text-slate-300 mb-12">
                    Email címünk: <a href="mailto:jupitr@spotsync.hu" class="text-[#D48735] hover:text-[#D48735]/80">jupitr@spotsync.hu</a>
                </p>
                <form id="email-send-form" class="space-y-8">
                    <div class="backdrop-blur-xl bg-white/5 p-8 rounded-2xl border border-white/10 space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span>Teljes Név</span>
                                    <span class="text-red-400">*</span>
                                </label>
                                <input name="legalName" type="text" required
                                    class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-[#D48735] focus:ring-2 focus:ring-[#D48735]/20 transition-all"/>
                            </div>
                            <div>
                                <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                    <span>Email</span>
                                    <span class="text-red-400">*</span>
                                </label>
                                <input name="email" type="email" required
                                    class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-[#D48735] focus:ring-2 focus:ring-[#D48735]/20 transition-all"/>
                            </div>
                        </div>

                        <div>
                            <label class="flex items-center gap-2 text-sm font-medium text-gray-400 mb-2">
                                <span>Üzenet</span>
                                <span class="text-red-400">*</span>
                            </label>
                            <textarea name="whyBetter" rows="3"
                                class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:border-[#D48735] focus:ring-2 focus:ring-[#D48735]/20 transition-all"></textarea>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                        class="w-full bg-gradient-to-r from-orange-800 to-orange-500 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center gap-2 group relative">
                        <div class="absolute -inset-1 bg-gradient-to-r from-orange-800 to-orange-500 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative flex items-center gap-2">
                            <i class="fa-solid fa-paper-plane"></i>
                            <span>Üzenet küldése</span>
                        </div>
                    </button>
                </form>

                <div id="toast-container" class="fixed bottom-4 right-4 flex flex-col gap-4"></div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="relative z-10 bg-gradient-to-b from-slate-900 to-slate-950 border-t border-slate-800">
        <div class="container mx-auto px-6 py-16">
            <div class="flex flex-col md:flex-row justify-between items-center gap-12">
                <div class="flex flex-col items-center md:items-start gap-4">
                    <div class="flex items-center gap-3">
                        <img src="https://cdn.spotsync.hu/jupitr/LogoTransparentColor.svg" alt="Jupitr logó" class="h-14 w-auto">
                        <span class="text-3xl font-bold text-[#D48735] font-family-logo">Jupitr</span>
                    </div>
                    <p class="text-slate-400 text-sm text-center md:text-left">&copy; 2024 Jupitr™ | Minden jog fenntartva</p>
                </div>
                <nav class="flex flex-wrap justify-center gap-8 text-slate-300">
                    <a href="#szolgaltatasok" class="hover:text-[#D48735] transition-colors duration-300 text-sm uppercase tracking-wide">Szolgáltatások</a>
                    <a href="#projektek" class="hover:text-[#D48735] transition-colors duration-300 text-sm uppercase tracking-wide">Projektek</a>
                    <a href="#technologiak" class="hover:text-[#D48735] transition-colors duration-300 text-sm uppercase tracking-wide">Technológiák</a>
                    <a href="#kapcsolat" class="hover:text-[#D48735] transition-colors duration-300 text-sm uppercase tracking-wide">Kapcsolat</a>
                </nav>
            </div>
        </div>
    </footer>

    <script>
        lucide.createIcons();

        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake', 'absolute', 'bg-white', 'rounded-full');

            const size = Math.random() * 4 + 2;
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            snowflake.style.left = `${Math.random() * 100}vw`;
            snowflake.style.opacity = Math.random();
            snowflake.style.animationDuration = `${Math.random() * 5 + 5}s`;  // Slower snow

            return snowflake;
        }

        function createSnowfall() {
            const container = document.getElementById('snow-container');
            const snowflakesCount = 50;  // Reduced number of snowflakes

            for (let i = 0; i < snowflakesCount; i++) {
                const snowflake = createSnowflake();
                container.appendChild(snowflake);

                snowflake.addEventListener('animationiteration', () => {
                    snowflake.remove();
                    container.appendChild(createSnowflake());
                });
            }
        }

        createSnowfall();

        gsap.registerPlugin(ScrollTrigger);

        // gsap.from('.service-card', {
        //     y: 100,
        //     opacity: 0,
        //     duration: 1,
        //     stagger: 0.2,
        //     ease: 'power3.out',
        //     scrollTrigger: {
        //         trigger: '#szolgaltatasok',
        //         start: 'top 80%',
        //         end: 'bottom 20%',
        //         toggleActions: 'play none none reverse'
        //     }
        // });

        // document.querySelectorAll('.service-card').forEach(card => {
        //     card.addEventListener('mouseenter', () => {
        //         gsap.to(card, { scale: 1.05, duration: 0.3, ease: 'power2.out' });
        //     });
        //     card.addEventListener('mouseleave', () => {
        //         gsap.to(card, { scale: 1, duration: 0.3, ease: 'power2.out' });
        //     });
        // });

        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Email sending functionality
        emailjs.init({publicKey: 'iRqfqt8il5DI262V5'});

        document.getElementById('email-send-form').addEventListener('submit', function(event) {
            event.preventDefault();

            const name = document.querySelector('input[name="legalName"]').value;
            const email = document.querySelector('input[name="email"]').value;
            const message = document.querySelector('textarea[name="whyBetter"]').value;

            if (!name || !email || !message) {
                showToast('Minden mező kitöltése kötelező!', 'error');
                return;
            }

            const emailParams = {
                from_name: name,
                from_email: email,
                message: message
            };

            emailjs.send('service_lkizyl7', 'template_jx7agxg', emailParams)
                .then(function(response) {
                    console.log('Success:', response);
                    showToast('Üzenet sikeresen elküldve!', 'success');
                    document.getElementById('email-send-form').reset();
                }, function(error) {
                    console.log('Error:', error);
                    showToast('Hiba történt az üzenet küldésekor.', 'error');
                });
        });

        function showToast(message, type) {
            const toast = document.createElement('div');
            toast.classList.add('toast', type === 'error' ? 'bg-red-500' : 'bg-green-500');
            toast.classList.add('text-white', 'p-4', 'rounded-lg', 'shadow-lg', 'max-w-xs', 'w-full');
            toast.textContent = message;

            const toastContainer = document.getElementById('toast-container');
            toastContainer.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
    </script>
</body>
</html>