Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is designed to create a one-page landing page for "Asso Al Amal – Système de Gestion de Mosquée". The primary purpose of the landing page is to promote a SaaS platform that helps mosques and Islamic associations manage their operations efficiently. The page will be built using clean semantic HTML and TailwindCSS, ensuring easy integration into a Laravel + Inertia.js project.

## CORE FEATURES
- **Hero Section:** A captivating introduction with a strong title, subtitle, and call-to-action buttons.
- **Trust Section:** Display statistics that build credibility, showcasing the number of mosques, total donations, registered members, and supported communities.
- **Problem and Solution Cards:** Highlight common challenges faced by mosques and how Asso Al Amal addresses these issues.
- **Features Overview:** Present key functionalities of the platform in modern, visually appealing cards.
- **Crowdfunding Section:** A dedicated area explaining fundraising features with campaign cards and progress bars.
- **Testimonials:** Showcase user feedback through testimonial cards to enhance trust and engagement.

## DESIGN SPECIFICATIONS
- **Visual Style:** Modern SaaS design with a clean aesthetic, rounded cards, soft shadows, and smooth hover effects.
- **Color Palette:** Emerald green accents against a white background featuring soft gradients.
- **Layout:** A responsive mobile-first design with clearly organized sections, including a sticky navigation bar, hero, features, problems, solutions, pricing, and a footer.
- **Typography:** Use clear, legible fonts with distinct headings and body text to ensure readability.

## TECHNICAL REQUIREMENTS
- **Framework:** Pure HTML suitable for integration into Laravel Blade or Inertia pages.
- **Styling:** Tailwind CSS utility classes for all styling needs.
- **Responsive Design:** Fully responsive layout that adjusts seamlessly across devices.
- **Interactivity:** Smooth scroll navigation and subtle animations using Tailwind transitions.

## IMPLEMENTATION STEPS
1. **Set up the HTML structure** with proper semantic elements and comments for each section.
2. **Integrate Tailwind CSS** by including the necessary CDN link or installing it in your project.
3. **Create the header/navbar** with navigation links and a CTA button.
4. **Develop the hero section**, incorporating a title, subtitle, and illustrative elements.
5. **Build the trust section** using statistic cards that provide key metrics.
6. **Implement the problems and solutions cards**, detailing the challenges and how the platform addresses them.
7. **Add the functionalities overview** with icons and brief descriptions.
8. **Design the crowdfunding section** with campaign cards and progress indicators.
9. **Include the pricing section** with different plans displayed in cards.
10. **Add testimonials** featuring user quotes and avatars.
11. **Finalize the footer** with navigation links, contact info, social icons, and copyright.

## USER EXPERIENCE
Users will have a seamless experience navigating the landing page with a sticky navbar that allows for smooth scroll navigation to different sections. Each section will provide valuable information about the Asso Al Amal platform, culminating in a strong call-to-action encouraging visitors to request a demo.

## FINAL CODE OUTPUT
```html
<!-- HEADER / NAVBAR -->
<header class="sticky top-0 bg-white shadow">
    <nav class="flex justify-between items-center p-4">
        <div class="logo-placeholder">Logo</div>
        <ul class="flex space-x-4">
            <li><a href="#fonctionnalités" class="hover:text-green-500">Fonctionnalités</a></li>
            <li><a href="#crowdfunding" class="hover:text-green-500">Crowdfunding</a></li>
            <li><a href="#tarifs" class="hover:text-green-500">Tarifs</a></li>
            <li><a href="#témoignages" class="hover:text-green-500">Témoignages</a></li>
            <li><a href="#contact" class="hover:text-green-500">Contact</a></li>
        </ul>
        <a href="#demander-demo" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Demander une démo</a>
    </nav>
</header>

<!-- HERO SECTION -->
<section class="hero bg-gradient-to-r from-green-100 to-white text-center py-20">
    <h1 class="text-3xl font-bold">Simplifiez la gestion de votre mosquée</h1>
    <p class="mt-2 text-lg">Une plateforme moderne pour gérer les membres, les dons, les finances et l’administration de votre mosquée ou association.</p>
    <div class="mt-4">
        <a href="#demander-demo" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Demander une démo</a>
        <a href="#fonctionnalités" class="bg-white border border-green-500 text-green-500 px-4 py-2 rounded hover:bg-green-100">En savoir plus</a>
    </div>
    <div class="dashboard-placeholder mt-8">[Dashboard Illustration]</div>
</section>

<!-- TRUST SECTION -->
<section id="trust" class="py-16 text-center">
    <h2 class="text-2xl font-semibold">Nos statistiques</h2>
    <div class="grid grid-cols-2 gap-4 mt-4">
        <div class="stat-card rounded-lg p-4 shadow">Nombre de mosquées: 100+</div>
        <div class="stat-card rounded-lg p-4 shadow">Total des dons: 500k€</div>
        <div class="stat-card rounded-lg p-4 shadow">Membres enregistrés: 2000+</div>
        <div class="stat-card rounded-lg p-4 shadow">Communautés accompagnées: 50+</div>
    </div>
</section>

<!-- PROBLEM SECTION -->
<section id="problèmes" class="py-16 bg-gray-50">
    <h2 class="text-2xl font-semibold text-center">Les défis courants</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
        <div class="problem-card rounded-lg p-4 shadow">Gestion manuelle des dons</div>
        <div class="problem-card rounded-lg p-4 shadow">Manque de transparence</div>
        <div class="problem-card rounded-lg p-4 shadow">Difficulté à gérer les membres</div>
        <div class="problem-card rounded-lg p-4 shadow">Absence d’outils numériques</div>
    </div>
</section>

<!-- SOLUTION SECTION -->
<section id="solution" class="py-16">
    <h2 class="text-2xl font-semibold text-center">La solution</h2>
    <p class="text-center mt-4">Asso Al Amal est votre plateforme de gestion numérique complète.</p>
</section>

<!-- FONCTIONNALITÉS SECTION -->
<section id="fonctionnalités" class="py-16 bg-gray-50">
    <h2 class="text-2xl font-semibold text-center">Fonctionnalités principales</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
        <div class="feature-card rounded-lg p-4 shadow">Tableau de bord</div>
        <div class="feature-card rounded-lg p-4 shadow">Gestion des membres</div>
        <div class="feature-card rounded-lg p-4 shadow">Gestion des dons</div>
        <div class="feature-card rounded-lg p-4 shadow">Suivi des dépenses</div>
        <div class="feature-card rounded-lg p-4 shadow">Gestion des utilisateurs</div>
        <div class="feature-card rounded-lg p-4 shadow">Notifications</div>
    </div>
</section>

<!-- CROWDFUNDING SECTION -->
<section id="crowdfunding" class="py-16">
    <h2 class="text-2xl font-semibold text-center">Collecte de fonds</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
        <div class="campaign-card rounded-lg p-4 shadow">Création de campagnes de collecte</div>
        <div class="campaign-card rounded-lg p-4 shadow">Pages publiques pour projets</div>
        <div class="campaign-card rounded-lg p-4 shadow">Suivi des dons reçus</div>
        <div class="campaign-card rounded-lg p-4 shadow">Gestion des promesses de dons</div>
        <div class="campaign-card rounded-lg p-4 shadow">Barre de progression des campagnes</div>
        <div class="campaign-card rounded-lg p-4 shadow">Engagement de la communauté</div>
    </div>
</section>

<!-- DASHBOARD PREVIEW SECTION -->
<section id="dashboard" class="py-16 bg-gray-50">
    <h2 class="text-2xl font-semibold text-center">Aperçu du tableau de bord</h2>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-4">
        <div class="dashboard-preview-card rounded-lg p-4 shadow">Total des dons</div>
        <div class="dashboard-preview-card rounded-lg p-4 shadow">Membres</div>
        <div class="dashboard-preview-card rounded-lg p-4 shadow">Dépenses mensuelles</div