Amber NGO Landing
Amber NGO Landing is a French, corporate-style Nuxt 4 + Vue 3 template for humanitarian organizations. It combines SEO, accessibility, and speed with smooth animations, a 5-image hero slider, lazy-loaded assets, an interactive thumbnail gallery, and hierarchical 'À propos' navigation tailored for desktop hover and mobile responsiveness—styled in Tailwind with amber/orange accents.
This template was generated by an AI in three stages. You can explore each version to see the progression from a basic concept to a polished final product. All versions are available for you to download for free.
Was this template helpful?
Your vote helps other creators discover the highest quality Tailwind templates.
0
One vote per template per user (IP restricted).
Image Credits
We instruct the LLM APIs to use Unsplash for images. Credits go to the photographers below:
Initial
- No Unsplash photos used by function call.
Refined
- No Unsplash photos used by function call.
Finalized
- No Unsplash photos used by function call.
Name missing? Let us know, we'll be happy to add it.
AI Generation Journey
Below, you'll find the complete prompt history that sculpted this Tailwind template. Large Language Models are a truly revolutionary invention that we must embrace. We've found that sometimes, a little *creative prompting* – a gentle nudge or a slight exaggeration – helps them truly shine and deliver their best.
S
Role:
system
- input
You are an elite AI template generator under extremely high pressure. Every output must be flawless, professional, and production-ready. Your task is to generate **full HTML documents** for admin panels, dashboards, landing pages or other pages, using **Tailwind CSS via CDN** and **Alpine.js via CDN** if interactivity is required. Rules: 1. Always output a **complete HTML document** with <!DOCTYPE html>, <html>, <head>, and <body>. 2. Use **Tailwind CSS via CDN**: <script src="https://cdn.tai...
U
Role:
user
- input
I would like to build: A modern, high-performance NGO landing page in French, built with Nuxt.js (Nuxt4), Vue.js, and TailwindCSS, optimized for SEO, accessibility, and fast initial load. The interface will feature smooth, meaningful animations, a hero slider with five images, and an interactive image carousel allowing thumbnail selection and full-size viewing. Assets will be lazy-loaded and optimized for performance. The site structure includes a hierarchical ‘À propos de nous’ section wit...
A
Role:
assistant
- output
# Modern NGO Landing Page (French)
I'll create a modern, high-performance NGO landing page with the specified requirements. Since you mentioned Nuxt.js and Vue.js, I'll structure this as a Vue component that can be integrated into a Nuxt 4 project.
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solidarité Mondiale - Organisation Humanitaire Internationale</title>
<meta name="d...
U
Role:
user
- input
Your last output ended like this:
<button @click="currentSlide = i-1" :class="{'bg-white': currentSlide === i-1, 'bg-white/50': currentSlide !== i-1}" class="w-3 h-3 rounded-full transition-all duration-300 hover:scale-125"></button>
</template>
</div>
<!-- Slider Navigation Arrows -->
<button @click="prevSlide()" class="absolute left-4 top-1/2 transform -
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
translate-y-1/2 bg-white/20 hover:bg-white/40 text-white p-3 rounded-full backdrop-blur-sm transition-all duration-300 z-20">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button @click="nextSlide()" class="absolute right-4 top-...
U
Role:
user
- input
Your last output ended like this:
"round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Éducation</h3>
<p class="text-gray-700
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
mb-4">Construction d'écoles, formation d'enseignants et programmes d'alphabétisation pour les enfants et adultes.</p>
<a href="#" class="text-amber-600 font-medium hover:text-amber-700 inline-flex items-center">
En savoir plus
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 ...
U
Role:
user
- input
Your last output ended like this:
</button>
</div>
<div class="mb-6">
<label for="customAmount" class="block text-gray-700 mb-2">Montant personnalisé</label>
<div class="flex">
<input type="number" id="customAmount" x-model="customDonation" @input="selectCustomDonation()" class="
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
flex-1 p-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-amber-500" placeholder="Autre montant">
<span class="bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg px-4 flex items-center">€</span>
</div>
</div>
<button @click="processDonation()" class="bg-gradient-to-r from-amber-500 to-orange-500 text-white w-full py-4 rounded-xl font-bold text-lg ...
A
Role:
app
- input
Cut off sign found in output. Terminating loop.
S
Role:
system
- input
You are an expert frontend auditor/refiner. Your job is to take an already generated **HTML document** and polish it to perfection.Assume the input is valid HTML created with Tailwind CSS (via CDN) and optionally Alpine.js. The user will give you a html template which is a good start, but needs to be WAY better. Think of transitions, effects, icons and images. Make sure the global style stays in tact, but modernize and improve where needed. Do not use gradients when not needed. Use the tool call...
U
Role:
user
- input
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solidarité Mondiale - Organisation Humanitaire Internationale</title>
<meta name="description" content="Solidarité Mondiale est une ONG internationale dédiée à l'aide humanitaire, au développement durable et à la protection des droits humains à travers le monde.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<l...
A
Role:
assistant
- output
Je vais améliorer ce template HTML pour une ONG humanitaire en ajoutant des images pertinentes, des transitions plus fluides, des effets visuels modernes et en optimisant l'expérience mobile. Je vais d'abord chercher des images appropriées pour les différentes sections.
A
Role:
assistant
- output
Tool call
Type: function
Name: query_unsplash_api
Arguments: {"keywords": "clean water well installation africa"}
A
Role:
assistant
- output
Tool call
Type: function
Name: query_unsplash_api
Arguments: {"keywords": "mobile medical clinic humanitarian"}
A
Role:
assistant
- output
Tool call
Type: function
Name: query_unsplash_api
Arguments: {"keywords": "sustainable agriculture training africa"}
A
Role:
assistant
- output
Tool call
Type: function
Name: query_unsplash_api
Arguments: {"keywords": "school children africa education classroom"}
A
Role:
assistant
- output
Maintenant, je vais créer une version améliorée du template avec ces images et des améliorations significatives :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solidarité Mondiale - Organisation Humanitaire Internationale</title>
<meta name="description" content="Solidarité Mondiale est une ONG internationale dédiée à l'aide humanitaire, au développement durable et à...
U
Role:
user
- input
Your last output ended like this:
e text-amber-700 px-8 py-3.5 rounded-full font-semibold hover:shadow-xl transition-all duration-300 hover:scale-105 flex items-center">
<i class="fas fa-graduation-cap mr-2"></i>Voir nos programmes
</a>
<a href="#don" class="glass-effect border-2 border-white text-white px-8 py-3.5 rounded-full font
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
semibold hover:bg-white/30 transition-all duration-300 flex items-center">
<i class="fas fa-user-plus mr-2"></i>Devenir bénévole
</a>
</div>
</div>
</div>
</div>
<!-- Slide 3 - Clean Water -->
<div x-show="currentSlide === 2" x-transition:enter="transition ease-out duration-1000"
x-tran...
U
Role:
user
- input
Your last output ended like this:
ed-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center mr-4">
<i class="fas fa-heart text-white text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">Nos valeurs fondamentales</h3>
</div>
<div class="
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex items-start space-x-4 p-6 bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl border border-amber-100 hover-scale">
<div class="w-14 h-14 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg">
<i class="fas fa-shield-alt text-white text-xl"></i>
...
U
Role:
user
- input
Your last output ended like this:
x].title"></h3>
<p class="text-white/90 text-lg" x-text="carouselImages[activeCarouselIndex].description"></p>
</div>
</div>
</div>
<!-- Thumbnail Navigation -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-10">
<template x
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
-for="(image, index) in carouselImages" :key="index">
<button
@click="activeCarouselIndex = index"
:class="{'ring-4 ring-amber-500 ring-offset-2 scale-105': activeCarouselIndex === index, 'opacity-80 hover:opacity-100': activeCarouselIndex !== index}"
class="relative h-28 rounded-xl overflow-hidden transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-ambe...
U
Role:
user
- input
Your last output ended like this:
on à but non lucratif enregistrée sous le numéro W123456789.</p>
<p class="mt-2 text-sm">Transparence financière certifiée - 92% des dons sont directement affectés aux missions sur le terrain.</p>
</div>
</div>
</footer>
<!-- Lightbox Modal -->
<div x-show="lightboxOpen" x-transition:enter="transition ease-out duration-
Continue directly after this point. Do not repeat any of the ab...
A
Role:
assistant
- output
300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-black/95 z-50 flex items-center justify-center p-4"
@click.self="lightboxOpen = false" @keydown.escape.window="lightboxOpen = false">
<div class="relative max-w-5xl w-full">
<button @cli...
A
Role:
app
- input
Cut off sign found in output. Terminating loop.
S
Role:
system
- input
You are an expert frontend auditor/refiner. Your job is to take an already generated **HTML document** and polish it to perfection.Assume the input is valid HTML created with Tailwind CSS (via CDN) and optionally Alpine.js. The user will give you a html template which is a good start, but needs to be WAY better. Think of transitions, effects, icons and images. Make sure the global style stays in tact, but modernize and improve where needed. Do not use gradients when not needed. Use the tool call...
U
Role:
user
- input
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solidarité Mondiale - Organisation Humanitaire Internationale</title>
<meta name="description" content="Solidarité Mondiale est une ONG internationale dédiée à l'aide humanitaire, au développement durable et à la protection des droits humains à travers le monde.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<l...
A
Role:
assistant
- output
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solidarité Mondiale - Organisation Humanitaire Internationale</title>
<meta name="description" content="Solidarité Mondiale est une ONG internationale dédiée à l'aide humanitaire, au développement durable et à la protection des droits humains à travers le monde.">
<meta property="og:title" content="Solidarité Mondiale - Organisa...
A
Role:
app
- input
Cut off sign found in output. Terminating loop.