fc463dc69a
- Replace Next.js/React implementation with Python Flask - Add colorful blue-purple-teal gradient theme replacing red design - Integrate logo and Transalpina panoramic background image - Implement complete authentication system with Flask-Login - Add community features for stories and tracks sharing - Create responsive design with Tailwind CSS - Add error handling with custom 404/500 pages - Include Docker deployment configuration - Add favicon support and proper SEO structure - Update content for Pensiune BuonGusto accommodation - Remove deprecated Next.js files and dependencies Features: ✅ Landing page with hero section and featured content ✅ User registration and login system ✅ Community section for adventure sharing ✅ Admin panel for content management ✅ Responsive mobile-first design ✅ Docker containerization with PostgreSQL ✅ Email integration with Flask-Mail ✅ Form validation with WTForms ✅ SQLAlchemy database models ✅ Error pages and favicon handling
276 lines
15 KiB
HTML
276 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Moto Adventure Community - Explore Romania on Two Wheels{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-teal-600 text-white py-24" style="background-image: url('{{ url_for('static', filename='images/pano transalpina.jpg') }}'); background-size: cover; background-position: center; background-blend-mode: overlay;">
|
|
<div class="absolute inset-0 bg-black opacity-40"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="flex justify-center mb-6">
|
|
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="Moto Adventure" class="h-24 w-24 mb-4">
|
|
</div>
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight drop-shadow-lg">
|
|
Adventure Awaits
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
|
|
Discover Romania's most breathtaking motorcycle routes, connect with fellow riders,
|
|
and find the perfect accommodation for your next adventure.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="#about" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition transform hover:scale-105 shadow-lg">
|
|
<i class="fas fa-compass mr-2"></i>Start Exploring
|
|
</a>
|
|
<a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-purple-600 transition transform hover:scale-105">
|
|
<i class="fas fa-users mr-2"></i>Join Community
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">
|
|
<i class="fas fa-route text-blue-600 mr-3"></i>
|
|
Discover Romania's Hidden Gems
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Join our passionate community of motorcycle enthusiasts as we explore the most spectacular
|
|
routes Romania has to offer. From winding mountain passes to scenic coastal roads.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div class="space-y-6">
|
|
<div class="flex items-start space-x-4">
|
|
<div class="bg-blue-100 p-3 rounded-lg">
|
|
<i class="fas fa-mountain text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Epic Mountain Routes</h3>
|
|
<p class="text-gray-600">
|
|
Experience breathtaking rides through the Carpathian Mountains, including the famous
|
|
Transfăgărășan and Transalpina highways.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="bg-purple-100 p-3 rounded-lg">
|
|
<i class="fas fa-users text-purple-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Vibrant Community</h3>
|
|
<p class="text-gray-600">
|
|
Connect with fellow riders, share your adventures, and discover new routes through
|
|
our active community platform.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-4">
|
|
<div class="bg-teal-100 p-3 rounded-lg">
|
|
<i class="fas fa-map-marked-alt text-teal-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">GPS Tracks & Guides</h3>
|
|
<p class="text-gray-600">
|
|
Download detailed GPS tracks, get insider tips, and access comprehensive guides
|
|
for the best motorcycle routes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 rounded-2xl p-8 text-white shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-300">
|
|
<div class="bg-white bg-opacity-20 rounded-lg p-6 mb-6">
|
|
<i class="fas fa-motorcycle text-4xl mb-4"></i>
|
|
<h3 class="text-2xl font-bold mb-2">Adventure Stats</h3>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold">150+</div>
|
|
<div class="text-blue-100">Routes Mapped</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold">500+</div>
|
|
<div class="text-cyan-100">Active Riders</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold">50K+</div>
|
|
<div class="text-emerald-100">KMs Explored</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold">25+</div>
|
|
<div class="text-blue-100">Counties Covered</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Accommodation Section -->
|
|
<section id="accommodation" class="py-20 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">
|
|
<i class="fas fa-bed text-purple-600 mr-3"></i>
|
|
Pensiune BuonGusto
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Your perfect base camp for motorcycle adventures. Enjoy comfortable accommodation,
|
|
secure parking, and warm hospitality in the heart of Romania's scenic landscapes.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div class="space-y-6">
|
|
<div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-blue-500">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3 flex items-center">
|
|
<i class="fas fa-shield-alt text-blue-600 mr-2"></i>
|
|
Secure Motorcycle Parking
|
|
</h3>
|
|
<p class="text-gray-600">
|
|
Rest easy knowing your motorcycle is safe in our covered, monitored parking area.
|
|
We understand how precious your bike is to you.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-teal-500">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3 flex items-center">
|
|
<i class="fas fa-map-marked-alt text-teal-600 mr-2"></i>
|
|
Local Route Expertise
|
|
</h3>
|
|
<p class="text-gray-600">
|
|
Our staff are passionate about motorcycling and can recommend the best local routes,
|
|
hidden gems, and must-see attractions in the area.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
|
|
<div class="bg-gradient-to-r from-purple-500 to-blue-500 p-6 text-white">
|
|
<h3 class="text-2xl font-bold mb-2">
|
|
<i class="fas fa-star mr-2"></i>
|
|
Premium Accommodation
|
|
</h3>
|
|
<p class="text-blue-100">Experience comfort and convenience</p>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600">Comfortable Rooms</span>
|
|
<i class="fas fa-check text-green-500"></i>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600">Free WiFi</span>
|
|
<i class="fas fa-check text-green-500"></i>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600">Draft Beers for Responsible Drivers</span>
|
|
<i class="fas fa-check text-green-500"></i>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-600">Route Planning</span>
|
|
<i class="fas fa-check text-green-500"></i>
|
|
</div>
|
|
|
|
<div class="border-t pt-4">
|
|
<div class="flex items-center justify-between text-lg font-semibold">
|
|
<span>Starting from</span>
|
|
<span class="text-purple-600">€45/night</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://buongusto.ro/index.php/book-now/" target="_blank" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition transform hover:scale-105 block text-center">
|
|
<i class="fas fa-calendar-alt mr-2"></i>
|
|
Book Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Community Section -->
|
|
<section id="community" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">
|
|
<i class="fas fa-users text-teal-600 mr-3"></i>
|
|
Stories & Tracks Community
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Share your adventures, discover new routes, and connect with fellow motorcycle enthusiasts.
|
|
Every ride has a story - what's yours?
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
|
<div class="text-center group">
|
|
<div class="bg-emerald-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-emerald-200 transition">
|
|
<i class="fas fa-camera text-emerald-600 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Share Photos</h3>
|
|
<p class="text-gray-600">
|
|
Upload stunning photos from your rides and inspire others to explore new destinations.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center group">
|
|
<div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition">
|
|
<i class="fas fa-route text-blue-600 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Upload GPS Tracks</h3>
|
|
<p class="text-gray-600">
|
|
Share your favorite routes with detailed GPS tracks that others can download and follow.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center group">
|
|
<div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition">
|
|
<i class="fas fa-comments text-purple-600 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Connect & Discuss</h3>
|
|
<p class="text-gray-600">
|
|
Join conversations, get tips, and plan group rides with our active community.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="bg-gradient-to-r from-emerald-500 via-cyan-500 to-blue-500 rounded-2xl p-8 text-white">
|
|
<h3 class="text-2xl font-bold mb-4">Ready to Share Your Adventure?</h3>
|
|
<p class="text-blue-100 mb-6 text-lg">
|
|
Join thousands of riders who are already sharing their stories and discovering new routes.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('community.new_post') }}" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
|
|
<i class="fas fa-plus mr-2"></i>Create New Post
|
|
</a>
|
|
<a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-cyan-600 transition transform hover:scale-105">
|
|
<i class="fas fa-eye mr-2"></i>Browse Stories
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ url_for('auth.register') }}" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
|
|
<i class="fas fa-user-plus mr-2"></i>Join Community
|
|
</a>
|
|
<a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-cyan-600 transition transform hover:scale-105">
|
|
<i class="fas fa-eye mr-2"></i>Browse Stories
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|