431 lines
29 KiB
HTML
431 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DeutschAkademie Engel | Learn German in Austria</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Poppins', 'sans-serif'] },
|
|
colors: {
|
|
brand: {
|
|
purple: '#6D28D9',
|
|
yellow: '#FBBF24',
|
|
dark: '#111827',
|
|
light: '#F3F4F6'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.gradient-text {
|
|
background: linear-gradient(to right, #6D28D9, #EC4899);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.blob-bg {
|
|
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%236D28D9" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,81.6,-46.3C91.4,-33.5,98,-18.1,98,-2.1C98,13.9,91.4,30.5,81.8,44.7C72.2,58.9,59.6,70.7,45.1,78.3C30.6,85.9,14.2,89.3,-1.7,92.2C-17.6,95.1,-35.2,97.5,-49.6,90C-64,82.5,-75.2,65.1,-83.4,47.1C-91.6,29.1,-96.8,10.5,-95,-7.4C-93.2,-25.3,-84.4,-42.5,-71.8,-55.4C-59.2,-68.3,-42.8,-76.9,-27.6,-79.8C-12.4,-82.7,1.6,-79.9,15.8,-75.7C30,-71.5,44.7,-65.9,44.7,-76.4Z" transform="translate(100 100) scale(1.1)" opacity="0.05"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: top right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-brand-light font-sans text-gray-800 overflow-x-hidden">
|
|
|
|
<header class="fixed w-full top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm transition-all duration-300">
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
|
<a href="#" class="text-2xl font-extrabold tracking-tighter text-brand-dark">
|
|
DeutschAkademie <span class="text-brand-purple">Engel</span>
|
|
</a>
|
|
|
|
<nav class="hidden lg:flex space-x-8 items-center font-semibold">
|
|
<a href="#courses" class="hover:text-brand-purple transition">Courses</a>
|
|
<a href="#teachers" class="hover:text-brand-purple transition">Teachers</a>
|
|
<a href="#blog" class="hover:text-brand-purple transition">Blog</a>
|
|
|
|
<div class="flex items-center space-x-2 border-l-2 pl-4">
|
|
<span class="text-brand-purple font-bold cursor-pointer">EN</span>
|
|
<span class="text-gray-400">|</span>
|
|
<span class="text-gray-500 hover:text-brand-dark cursor-pointer transition">DE</span>
|
|
</div>
|
|
|
|
<a href="#register" class="bg-brand-purple text-white px-6 py-2 rounded-full hover:bg-purple-700 hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
|
|
Portal
|
|
</a>
|
|
</nav>
|
|
<button class="lg:hidden text-2xl text-brand-dark"><i class="fa-solid fa-bars"></i></button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden blob-bg">
|
|
<div class="container mx-auto px-6 flex flex-col lg:flex-row items-center">
|
|
<div class="w-full lg:w-1/2 lg:pr-12 text-center lg:text-left z-10" data-aos="fade-right">
|
|
<div class="inline-block bg-brand-yellow text-brand-dark font-bold px-4 py-1 rounded-full mb-6 animate-bounce">
|
|
🚀 Start Your Journey Today
|
|
</div>
|
|
<h1 class="text-5xl lg:text-7xl font-extrabold leading-tight mb-6">
|
|
Speak German <br>
|
|
<span class="gradient-text">With Confidence.</span>
|
|
</h1>
|
|
<p class="text-lg text-gray-600 mb-8 font-light">
|
|
Join Austria's most energetic language institute. Master German with native experts, modern methods, and a supportive community.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
|
|
<button class="bg-brand-purple text-white font-bold px-8 py-4 rounded-full shadow-xl hover:bg-purple-700 transform hover:-translate-y-1 transition-all">
|
|
Take Placement Test
|
|
</button>
|
|
<button class="bg-white text-brand-dark font-bold border-2 border-gray-200 px-8 py-4 rounded-full hover:border-brand-purple hover:text-brand-purple transition-all">
|
|
View Courses
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/2 mt-16 lg:mt-0 relative z-10" data-aos="fade-left" data-aos-delay="200">
|
|
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Students" class="rounded-3xl shadow-2xl border-8 border-white object-cover h-[500px] w-full">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-brand-dark text-white py-12">
|
|
<div class="container mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-gray-700">
|
|
<div data-aos="zoom-in"><h3 class="text-4xl font-black text-brand-yellow mb-2">50+</h3><p class="text-gray-400 font-medium">Native Teachers</p></div>
|
|
<div data-aos="zoom-in" data-aos-delay="100"><h3 class="text-4xl font-black text-brand-yellow mb-2">A1-C2</h3><p class="text-gray-400 font-medium">Full Curriculum</p></div>
|
|
<div data-aos="zoom-in" data-aos-delay="200"><h3 class="text-4xl font-black text-brand-yellow mb-2">10k+</h3><p class="text-gray-400 font-medium">Happy Students</p></div>
|
|
<div data-aos="zoom-in" data-aos-delay="300"><h3 class="text-4xl font-black text-brand-yellow mb-2">4.9/5</h3><p class="text-gray-400 font-medium">Average Rating</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="courses" class="py-24 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-16" data-aos="fade-up">
|
|
<h2 class="text-4xl font-bold text-brand-dark mb-4">Choose Your Level</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">From complete beginners to advanced speakers, we have the right course for you.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-gray-50 rounded-3xl p-8 border border-gray-100 hover:shadow-xl hover:border-brand-purple transition-all group" data-aos="fade-up">
|
|
<div class="w-16 h-16 bg-brand-purple/10 text-brand-purple rounded-2xl flex items-center justify-center text-2xl font-bold mb-6">A1</div>
|
|
<h3 class="text-2xl font-bold mb-3">Beginner</h3>
|
|
<p class="text-gray-600 mb-6">Learn to introduce yourself and navigate daily life.</p>
|
|
<div class="text-2xl font-black text-brand-dark mb-6">€199 <span class="text-sm text-gray-400 font-normal">/ level</span></div>
|
|
<button class="w-full py-3 rounded-xl border-2 border-brand-dark font-bold hover:bg-brand-dark hover:text-white transition-colors">Select Course</button>
|
|
</div>
|
|
<div class="bg-brand-purple rounded-3xl p-8 text-white shadow-2xl shadow-purple-500/20 transform md:-translate-y-4 relative" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="absolute top-0 right-0 bg-brand-yellow text-brand-dark text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-3xl">POPULAR</div>
|
|
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center text-2xl font-bold mb-6">B1</div>
|
|
<h3 class="text-2xl font-bold mb-3">Intermediate</h3>
|
|
<p class="text-purple-100 mb-6">Master complex conversations and prepare for work.</p>
|
|
<div class="text-2xl font-black mb-6">€249 <span class="text-sm text-purple-200 font-normal">/ level</span></div>
|
|
<button class="w-full py-3 rounded-xl bg-white text-brand-purple font-bold hover:bg-gray-100 transition-colors">Select Course</button>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-3xl p-8 border border-gray-100 hover:shadow-xl hover:border-brand-purple transition-all group" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="w-16 h-16 bg-brand-purple/10 text-brand-purple rounded-2xl flex items-center justify-center text-2xl font-bold mb-6">C1</div>
|
|
<h3 class="text-2xl font-bold mb-3">Advanced</h3>
|
|
<p class="text-gray-600 mb-6">Speak fluently in academic and business environments.</p>
|
|
<div class="text-2xl font-black text-brand-dark mb-6">€299 <span class="text-sm text-gray-400 font-normal">/ level</span></div>
|
|
<button class="w-full py-3 rounded-xl border-2 border-brand-dark font-bold hover:bg-brand-dark hover:text-white transition-colors">Select Course</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="teachers" class="py-24 bg-brand-light">
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex justify-between items-end mb-12" data-aos="fade-up">
|
|
<div>
|
|
<h2 class="text-4xl font-bold text-brand-dark mb-4">Meet Our Native Experts</h2>
|
|
<p class="text-gray-600">Learn from passionate, certified instructors from Austria and Germany.</p>
|
|
</div>
|
|
<a href="#" class="hidden md:block text-brand-purple font-bold hover:underline">View all teachers →</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all" data-aos="fade-up">
|
|
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Teacher" class="w-full h-64 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="text-xl font-bold">Sarah Müller</h4>
|
|
<span class="text-xl" title="Austria">🇦🇹</span>
|
|
</div>
|
|
<p class="text-sm text-brand-purple font-semibold mb-3">Goethe Examiner</p>
|
|
<p class="text-gray-500 text-sm">Specializes in B2-C1 exam preparation with 10 years of experience.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all" data-aos="fade-up" data-aos-delay="100">
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Teacher" class="w-full h-64 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="text-xl font-bold">Lukas Weber</h4>
|
|
<span class="text-xl" title="Germany">🇩🇪</span>
|
|
</div>
|
|
<p class="text-sm text-brand-purple font-semibold mb-3">A1-A2 Specialist</p>
|
|
<p class="text-gray-500 text-sm">Makes learning grammar fun and engaging for absolute beginners.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all" data-aos="fade-up" data-aos-delay="200">
|
|
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Teacher" class="w-full h-64 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="text-xl font-bold">Anna Schmidt</h4>
|
|
<span class="text-xl" title="Austria">🇦🇹</span>
|
|
</div>
|
|
<p class="text-sm text-brand-purple font-semibold mb-3">Business German</p>
|
|
<p class="text-gray-500 text-sm">Helps professionals integrate into the DACH corporate world.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all" data-aos="fade-up" data-aos-delay="300">
|
|
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Teacher" class="w-full h-64 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="text-xl font-bold">Felix Bauer</h4>
|
|
<span class="text-xl" title="Germany">🇩🇪</span>
|
|
</div>
|
|
<p class="text-sm text-brand-purple font-semibold mb-3">Conversation Coach</p>
|
|
<p class="text-gray-500 text-sm">Focuses on pronunciation and speaking confidence.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-24 bg-white overflow-hidden">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-16" data-aos="fade-up">
|
|
<h2 class="text-4xl font-bold text-brand-dark mb-4">Student Success Stories</h2>
|
|
<p class="text-gray-600">Don't just take our word for it. Hear from our community.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-gray-50 p-8 rounded-3xl relative" data-aos="fade-up">
|
|
<i class="fa-solid fa-quote-left text-4xl text-brand-yellow/30 absolute top-6 right-8"></i>
|
|
<div class="flex text-brand-yellow mb-4">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<p class="text-gray-600 mb-6 italic">"I passed my ÖSD B2 exam on the first try! The teachers at Engel are incredibly supportive and the materials are top-notch."</p>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4 overflow-hidden"><img src="https://i.pravatar.cc/150?img=32" alt="User"></div>
|
|
<div>
|
|
<h5 class="font-bold">Elena R.</h5>
|
|
<span class="text-sm text-gray-500">Student Visa Applicant</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 p-8 rounded-3xl relative" data-aos="fade-up" data-aos-delay="100">
|
|
<i class="fa-solid fa-quote-left text-4xl text-brand-yellow/30 absolute top-6 right-8"></i>
|
|
<div class="flex text-brand-yellow mb-4">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<p class="text-gray-600 mb-6 italic">"The placement test was very accurate. I started at A2.2 and the pacing of the classes was perfect for someone working full-time."</p>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4 overflow-hidden"><img src="https://i.pravatar.cc/150?img=11" alt="User"></div>
|
|
<div>
|
|
<h5 class="font-bold">Mark T.</h5>
|
|
<span class="text-sm text-gray-500">IT Professional</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 p-8 rounded-3xl relative" data-aos="fade-up" data-aos-delay="200">
|
|
<i class="fa-solid fa-quote-left text-4xl text-brand-yellow/30 absolute top-6 right-8"></i>
|
|
<div class="flex text-brand-yellow mb-4">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
|
|
</div>
|
|
<p class="text-gray-600 mb-6 italic">"Love the energy in the online classes. It doesn't feel like a boring school. It feels like hanging out with friends while learning German."</p>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4 overflow-hidden"><img src="https://i.pravatar.cc/150?img=5" alt="User"></div>
|
|
<div>
|
|
<h5 class="font-bold">Sarah J.</h5>
|
|
<span class="text-sm text-gray-500">University Student</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="blog" class="py-24 bg-brand-light">
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex justify-between items-end mb-12" data-aos="fade-up">
|
|
<div>
|
|
<h2 class="text-4xl font-bold text-brand-dark mb-4">Latest Tips & News</h2>
|
|
<p class="text-gray-600">Resources to help you master the German language faster.</p>
|
|
</div>
|
|
<a href="#" class="hidden md:block text-brand-purple font-bold hover:underline">Read all articles →</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all group" data-aos="fade-up">
|
|
<div class="overflow-hidden h-48">
|
|
<img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Blog" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex space-x-2 mb-3">
|
|
<span class="bg-purple-100 text-brand-purple text-xs font-bold px-2 py-1 rounded">Study Tips</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3 hover:text-brand-purple transition"><a href="#">5 Hacks to Remember German Articles (Der, Die, Das)</a></h3>
|
|
<p class="text-gray-600 text-sm mb-4">Struggling with noun genders? These simple tricks will save you hours of memorization.</p>
|
|
<div class="text-sm text-gray-500"><i class="fa-regular fa-calendar mr-2"></i> Oct 12, 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="overflow-hidden h-48">
|
|
<img src="https://images.unsplash.com/photo-1516550893923-42d28e5677af?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Blog" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex space-x-2 mb-3">
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-bold px-2 py-1 rounded">Life in Austria</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3 hover:text-brand-purple transition"><a href="#">How to Register Your Address (Meldezettel) in Vienna</a></h3>
|
|
<p class="text-gray-600 text-sm mb-4">A step-by-step guide to navigating Austrian bureaucracy as a new student or expat.</p>
|
|
<div class="text-sm text-gray-500"><i class="fa-regular fa-calendar mr-2"></i> Oct 05, 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all group" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="overflow-hidden h-48">
|
|
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Blog" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex space-x-2 mb-3">
|
|
<span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded">Exams</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3 hover:text-brand-purple transition"><a href="#">ÖSD vs. Goethe: Which German Exam Should You Take?</a></h3>
|
|
<p class="text-gray-600 text-sm mb-4">Comparing the two most popular German proficiency certificates and helping you choose.</p>
|
|
<div class="text-sm text-gray-500"><i class="fa-regular fa-calendar mr-2"></i> Sep 28, 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-24 bg-white">
|
|
<div class="container mx-auto px-6 max-w-3xl">
|
|
<div class="text-center mb-12" data-aos="fade-up">
|
|
<h2 class="text-4xl font-bold text-brand-dark mb-4">Frequently Asked Questions</h2>
|
|
</div>
|
|
|
|
<div class="space-y-4" data-aos="fade-up">
|
|
<div class="border border-gray-200 rounded-xl p-6 hover:border-brand-purple transition cursor-pointer">
|
|
<h3 class="font-bold text-lg flex justify-between items-center">
|
|
How do I know which level to choose?
|
|
<i class="fa-solid fa-chevron-down text-brand-purple"></i>
|
|
</h3>
|
|
<p class="text-gray-600 mt-4 hidden">We offer a free, 10-minute online placement test. Once completed, our system will automatically recommend the best course for your current proficiency level.</p>
|
|
</div>
|
|
<div class="border border-brand-purple rounded-xl p-6 shadow-md">
|
|
<h3 class="font-bold text-lg flex justify-between items-center text-brand-purple">
|
|
Are the classes online or in-person?
|
|
<i class="fa-solid fa-chevron-up text-brand-purple"></i>
|
|
</h3>
|
|
<p class="text-gray-600 mt-4">We offer both! You can join our vibrant campus in Vienna, or participate in our highly interactive live online classes from anywhere in the world.</p>
|
|
</div>
|
|
<div class="border border-gray-200 rounded-xl p-6 hover:border-brand-purple transition cursor-pointer">
|
|
<h3 class="font-bold text-lg flex justify-between items-center">
|
|
Do you provide certificates after completion?
|
|
<i class="fa-solid fa-chevron-down text-brand-purple"></i>
|
|
</h3>
|
|
<p class="text-gray-600 mt-4 hidden">Yes, you will receive a certificate of attendance. We also prepare you specifically for official ÖSD and Goethe exams.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-brand-purple py-20 relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-64 h-64 bg-white opacity-5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
|
<div class="absolute bottom-0 right-0 w-96 h-96 bg-brand-yellow opacity-10 rounded-full translate-x-1/3 translate-y-1/3"></div>
|
|
|
|
<div class="container mx-auto px-6 relative z-10 text-center" data-aos="zoom-in">
|
|
<h2 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Ready to speak German fluently?</h2>
|
|
<p class="text-purple-100 text-lg mb-8 max-w-2xl mx-auto">Join thousands of successful students. Register today and get access to our exclusive learning portal.</p>
|
|
<button class="bg-brand-yellow text-brand-dark font-black px-10 py-4 rounded-full shadow-2xl hover:bg-white transform hover:scale-105 transition-all text-lg">
|
|
Create Your Free Account
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="bg-brand-dark text-white pt-20 pb-10">
|
|
<div class="container mx-auto px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<h4 class="text-2xl font-extrabold mb-6">DeutschAkademie <span class="text-brand-purple">Engel</span></h4>
|
|
<p class="text-gray-400 mb-6 max-w-sm">Making German learning accessible, energetic, and highly effective in the heart of Austria.</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-brand-purple transition"><i class="fa-brands fa-instagram"></i></a>
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-brand-purple transition"><i class="fa-brands fa-linkedin-in"></i></a>
|
|
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-brand-purple transition"><i class="fa-brands fa-youtube"></i></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-6">Explore</h4>
|
|
<ul class="space-y-3 text-gray-400">
|
|
<li><a href="#" class="hover:text-white transition">All Courses</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Placement Test</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Student Portal</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Blog & Tips</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-6">Contact</h4>
|
|
<ul class="space-y-3 text-gray-400">
|
|
<li><i class="fa-solid fa-location-dot w-6"></i> Vienna, Austria</li>
|
|
<li><i class="fa-solid fa-phone w-6"></i> +43 1 234 5678</li>
|
|
<li><i class="fa-solid fa-envelope w-6"></i> info@engel-akademie.at</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm flex flex-col md:flex-row justify-between items-center">
|
|
<p>© 2026 DeutschAkademie Engel. All rights reserved.</p>
|
|
<div class="space-x-4 mt-4 md:mt-0">
|
|
<a href="#" class="hover:text-white transition">Privacy Policy</a>
|
|
<a href="#" class="hover:text-white transition">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init({
|
|
once: true,
|
|
offset: 100,
|
|
duration: 800
|
|
});
|
|
|
|
// Simple script to handle FAQ accordion logic
|
|
document.querySelectorAll('.border-gray-200, .border-brand-purple').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const p = item.querySelector('p');
|
|
const icon = item.querySelector('i');
|
|
const h3 = item.querySelector('h3');
|
|
|
|
if(p.classList.contains('hidden')) {
|
|
p.classList.remove('hidden');
|
|
icon.classList.remove('fa-chevron-down');
|
|
icon.classList.add('fa-chevron-up');
|
|
item.classList.add('border-brand-purple', 'shadow-md');
|
|
item.classList.remove('border-gray-200');
|
|
h3.classList.add('text-brand-purple');
|
|
} else {
|
|
p.classList.add('hidden');
|
|
icon.classList.add('fa-chevron-down');
|
|
icon.classList.remove('fa-chevron-up');
|
|
item.classList.remove('border-brand-purple', 'shadow-md');
|
|
item.classList.add('border-gray-200');
|
|
h3.classList.remove('text-brand-purple');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |