Hugging Face's logo

Spaces:
khlitos
/
undefined
Running

App Files Community
khlitos commited on
Commit
7173feb
·
verified ·
1 Parent(s): 30313d6

kan je mij project af maken Flowtrix – Complete Setup & Stappenplan

Browse files

1. Hostinger VPS Setup
Koop een VPS bij Hostinger, bijvoorbeeld het Business-pakket.

Zorg dat je root-toegang hebt en noteer het IP-adres van je VPS.

Je kunt beginnen met één VPS en later upgraden als je meer capaciteit nodig hebt.

Open de poorten 22 (SSH), 5678 (n8n), 80 en 443 (web en SSL).

Maak een map op de VPS waar je Flowtrix gaat hosten, bijvoorbeeld /root/flowtrix.

2. Benodigdheden / Accounts


Maak de volgende accounts aan en noteer de API-keys:

Hostinger VPS (Business-pakket)

Domeinregistrar (voor je website en subdomeinen)

n8n (self-hosted via Hostinger VPS)

PostgreSQL database (kan lokaal op VPS of managed)

OpenAI (voor AI conversaties)

ElevenLabs (voor TTS / spraak)

Twilio (voor bellen en SMS, nummers in NL/BE/DE en andere landen naar keuze)

Stripe of Mollie (voor betalingen, abonnementen en setup fee)

SMTP provider (SendGrid, Mailgun of Hostinger SMTP)

Optioneel: Sentry of Prometheus voor monitoring

3. Database Structuur (Postgres)


Je hebt vier hoofdtabellen:

Customers: gegevens van je klanten (bedrijf, contact, land, pakket, status, api_key)

Agents: de AI-agenten per klant en branche, met prompt en spraakinstellingen

Calls: opgeslagen gesprekken, transcripties en intenties

Billing: abonnementen, plan, status en volgende facturering



Zorg dat er indexen zijn op landen en klant-ID voor snellere queries.

4. n8n Workflows


Belangrijke workflows:

Webhook Nieuwe Klant

Ontvangt gegevens van de klant van de website

Valideert en normaliseert gegevens

Voegt klant toe aan database

Roept Agent Generator workflow aan

Agent Generator

Maakt folderstructuur per land/branche/bedrijf

Genereert branch-specifieke prompts

Voegt agents toe aan database

Stuur e-mail dat agent klaar is

Voice Call Workflow

Ontvangt inkomende gesprekken via Twilio

Gebruikt OpenAI voor AI-respons

Stuurt spraak via ElevenLabs naar Twilio

Slaat transcripties en data op in database

Billing Workflow

Stripe checkout / abonnementen

Activeert agents bij betaling

Zet agents op inactief bij mislukte betaling

Logt alles in de database

5. Frontend & Dashboard
Chatbot widget voor klantenwebsites, verbonden met n8n via API-key

Next.js dashboard voor admin: klanten, agents, gesprekken, betalingen

API endpoints beveiligen met API-key en 2FA

Dashboard laat statistieken zien: actieve agents, calls, betalingen

6. Folderstructuur
/data/Flowtrix/NL/kappers/BedrijfX/ → AI_prompts.json, sms_templates.json

/data/Flowtrix/DE/hotels/BedrijfY/ → AI_prompts.json, sms_templates.json

Elke branche heeft eigen agent templates en prompts

7. Branch-specifieke AI Prompts
Kappers (NL): vriendelijke receptionist, begroeting, vraag naar service, voorstel tijden, bevestiging naam en telefoon, prijsinformatie, doorverbinden bij klachten

Restaurants (NL): reservering, aantal gasten, datum/tijd, dieetwensen, bevestiging contact

Hotels (NL): check-in/out, kamertype, aantal gasten, voorkeuren, prijs en services

Algemeen Chatbot: FAQs over openingstijden, diensten, prijzen, boekingen

8. Features & Functies
Multi-country & multi-branch AI agents

Multi-language ondersteuning (NL, DE, EN, AR)

Branch-specifieke prompts en TTS stemmen

Voice + Chat integratie via Twilio en ElevenLabs

Edge-case fallback naar menselijke medewerker

Abonnementen + setup fee via Stripe

GDPR-compliant en EU-hosted

White-label optie (Flowtrix branding kan aanpasbaar)

Monitoring en logging (Sentry/Prometheus)

Automatische agent generator per klant/branche/pakket

Dashboard met overzicht klanten, agents, gesprekken en betalingen

9. Kosten Initieel
Hostinger VPS: ongeveer €6,99 per maand (Business pakket)

OpenAI API: €20–50 per maand afhankelijk van gebruik

ElevenLabs: €5–20 per maand

Twilio: €5–10 per maand voor nummers

Stripe: 1,4–2,9% + €0,25 per transactie

SMTP: €10 per maand

10. Flowtrix Naam & Branding
Europese naam, kort, makkelijk te onthouden: Flowtrix

White-label ready, logo en branding kunnen aangepast worden per klant

11. Testen & Controleren
Test nieuwe klant registratie via de website

Controleer dat agenten automatisch worden aangemaakt

Test voice calls en chatbot responses

Controleer billing workflow en activatie van abonnementen

Houd logs en statistieken bij op het dashboard

✅ Alles wat je nodig hebt om Flowtrix te draaien in Europa, te beheren en te schalen, met alle functies die concurrenten ook gebruiken.DFlowtrix – Complete Setup & Stappenplan
1. Hostinger VPS Setup
Koop een VPS bij Hostinger, bijvoorbeeld het Business-pakket.

Zorg dat je root-toegang hebt en noteer het IP-adres van je VPS.

Je kunt beginnen met één VPS en later upgraden als je meer capaciteit nodig hebt.

Open de poorten 22 (SSH), 5678 (n8n), 80 en 443 (web en SSL).

Maak een map op de VPS waar je Flowtrix gaat hosten, bijvoorbeeld /root/flowtrix.

2. Benodigdheden / Accounts


Maak de volgende accounts aan en noteer de API-keys:

Hostinger VPS (Business-pakket)

Domeinregistrar (voor je website en subdomeinen)

n8n (self-hosted via Hostinger VPS)

PostgreSQL database (kan lokaal op VPS of managed)

OpenAI (voor AI conversaties)

ElevenLabs (voor TTS / spraak)

Twilio (voor bellen en SMS, nummers in NL/BE/DE en andere landen naar keuze)

Stripe of Mollie (voor betalingen, abonnementen en setup fee)

SMTP provider (SendGrid, Mailgun of Hostinger SMTP)

Optioneel: Sentry of Prometheus voor monitoring

3. Database Structuur (Postgres)


Je hebt vier hoofdtabellen:

Customers: gegevens van je klanten (bedrijf, contact, land, pakket, status, api_key)

Agents: de AI-agenten per klant en branche, met prompt en spraakinstellingen

Calls: opgeslagen gesprekken, transcripties en intenties

Billing: abonnementen, plan, status en volgende facturering



Zorg dat er indexen zijn op landen en klant-ID voor snellere queries.

4. n8n Workflows


Belangrijke workflows:

Webhook Nieuwe Klant

Ontvangt gegevens van de klant van de website

Valideert en normaliseert gegevens

Voegt klant toe aan database

Roept Agent Generator workflow aan

Agent Generator

Maakt folderstructuur per land/branche/bedrijf

Genereert branch-specifieke prompts

Voegt agents toe aan database

Stuur e-mail dat agent klaar is

Voice Call Workflow

Ontvangt inkomende gesprekken via Twilio

Gebruikt OpenAI voor AI-respons

Stuurt spraak via ElevenLabs naar Twilio

Slaat transcripties en data op in database

Billing Workflow

Stripe checkout / abonnementen

Activeert agents bij betaling

Zet agents op inactief bij mislukte betaling

Logt alles in de database

5. Frontend & Dashboard
Chatbot widget voor klantenwebsites, verbonden met n8n via API-key

Next.js dashboard voor admin: klanten, agents, gesprekken, betalingen

API endpoints beveiligen met API-key en 2FA

Dashboard laat statistieken zien: actieve agents, calls, betalingen

6. Folderstructuur
/data/Flowtrix/NL/kappers/BedrijfX/ → AI_prompts.json, sms_templates.json

/data/Flowtrix/DE/hotels/BedrijfY/ → AI_prompts.json, sms_templates.json

Elke branche heeft eigen agent templates en prompts

7. Branch-specifieke AI Prompts
Kappers (NL): vriendelijke receptionist, begroeting, vraag naar service, voorstel tijden, bevestiging naam en telefoon, prijsinformatie, doorverbinden bij klachten

Restaurants (NL): reservering, aantal gasten, datum/tijd, dieetwensen, bevestiging contact

Hotels (NL): check-in/out, kamertype, aantal gasten, voorkeuren, prijs en services

Algemeen Chatbot: FAQs over openingstijden, diensten, prijzen, boekingen

8. Features & Functies
Multi-country & multi-branch AI agents

Multi-language ondersteuning (NL, DE, EN, AR)

Branch-specifieke prompts en TTS stemmen

Voice + Chat integratie via Twilio en ElevenLabs

Edge-case fallback naar menselijke medewerker

Abonnementen + setup fee via Stripe

GDPR-compliant en EU-hosted

White-label optie (Flowtrix branding kan aanpasbaar)

Monitoring en logging (Sentry/Prometheus)

Automatische agent generator per klant/branche/pakket

Dashboard met overzicht klanten, agents, gesprekken en betalingen

9. Kosten Initieel
Hostinger VPS: ongeveer €6,99 per maand (Business pakket)

OpenAI API: €20–50 per maand afhankelijk van gebruik

ElevenLabs: €5–20 per maand

Twilio: €5–10 per maand voor nummers

Stripe: 1,4–2,9% + €0,25 per transactie

SMTP: €10 per maand

10. Flowtrix Naam & Branding
Europese naam, kort, makkelijk te onthouden: Flowtrix

White-label ready, logo en branding kunnen aangepast worden per klant

11. Testen & Controleren
Test nieuwe klant registratie via de website

Controleer dat agenten automatisch worden aangemaakt

Test voice calls en chatbot responses

Controleer billing workflow en activatie van abonnementen

Houd logs en statistieken bij op het dashboard

✅ Alles wat je nodig hebt om Flowtrix te draaien in Europa, te beheren en te schalen, met alle functies die concurrenten ook gebruiken.DFlowtrix – Complete Setup & Stappenplan
1. Hostinger VPS Setup
Koop een VPS bij Hostinger, bijvoorbeeld het Business-pakket.

Zorg dat je root-toegang hebt en noteer het IP-adres van je VPS.

Je kunt beginnen met één VPS en later upgraden als je meer capaciteit nodig hebt.

Open de poorten 22 (SSH), 5678 (n8n), 80 en 443 (web en SSL).

Maak een map op de VPS waar je Flowtrix gaat hosten, bijvoorbeeld /root/flowtrix.

2. Benodigdheden / Accounts


Maak de volgende accounts aan en noteer de API-keys:

Hostinger VPS (Business-pakket)

Domeinregistrar (voor je website en subdomeinen)

n8n (self-hosted via Hostinger VPS)

PostgreSQL database (kan lokaal op VPS of managed)

OpenAI (voor AI conversaties)

ElevenLabs (voor TTS / spraak)

Twilio (voor bellen en SMS, nummers in NL/BE/DE en andere landen naar keuze)

Stripe of Mollie (voor betalingen, abonnementen en setup fee)

SMTP provider (SendGrid, Mailgun of Hostinger SMTP)

Optioneel: Sentry of Prometheus voor monitoring

3. Database Structuur (Postgres)


Je hebt vier hoofdtabellen:

Customers: gegevens van je klanten (bedrijf, contact, land, pakket, status, api_key)

Agents: de AI-agenten per klant en branche, met prompt en spraakinstellingen

Calls: opgeslagen gesprekken, transcripties en intenties

Billing: abonnementen, plan, status e

Files changed (3) hide show
  1. README.md +8 -4
  2. dashboard.html +186 -0
  3. index.html +193 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐢
4
  colorFrom: yellow
5
- colorTo: yellow
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
 
3
  colorFrom: yellow
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
dashboard.html ADDED
@@ -0,0 +1,186 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flowtrix Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .dashboard-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-50">
20
+ <div class="flex h-screen">
21
+ <!-- Sidebar -->
22
+ <div class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0">
23
+ <div class="p-4 border-b border-indigo-600">
24
+ <h1 class="text-xl font-bold flex items-center">
25
+ <i data-feather="activity" class="mr-2"></i> Flowtrix
26
+ </h1>
27
+ </div>
28
+ <nav class="p-4">
29
+ <ul class="space-y-2">
30
+ <li>
31
+ <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-800">
32
+ <i data-feather="home" class="mr-3"></i> Dashboard
33
+ </a>
34
+ </li>
35
+ <li>
36
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
37
+ <i data-feather="users" class="mr-3"></i> Customers
38
+ </a>
39
+ </li>
40
+ <li>
41
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
42
+ <i data-feather="cpu" class="mr-3"></i> Agents
43
+ </a>
44
+ </li>
45
+ <li>
46
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
47
+ <i data-feather="phone" class="mr-3"></i> Calls
48
+ </a>
49
+ </li>
50
+ <li>
51
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
52
+ <i data-feather="credit-card" class="mr-3"></i> Billing
53
+ </a>
54
+ </li>
55
+ <li>
56
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800">
57
+ <i data-feather="settings" class="mr-3"></i> Settings
58
+ </a>
59
+ </li>
60
+ </ul>
61
+ </nav>
62
+ </div>
63
+
64
+ <!-- Main Content -->
65
+ <div class="flex-1 overflow-auto">
66
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
67
+ <h2 class="text-xl font-semibold">Dashboard Overview</h2>
68
+ <div class="flex items-center space-x-4">
69
+ <button class="p-2 rounded-full hover:bg-gray-100">
70
+ <i data-feather="bell"></i>
71
+ </button>
72
+ <div class="flex items-center">
73
+ <img src="http://static.photos/people/200x200/42" alt="User" class="w-8 h-8 rounded-full mr-2">
74
+ <span>Admin</span>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <main class="p-6">
80
+ <!-- Stats Cards -->
81
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
82
+ <div class="dashboard-card bg-white p-6 rounded-lg shadow">
83
+ <div class="flex justify-between">
84
+ <div>
85
+ <p class="text-gray-500">Active Agents</p>
86
+ <h3 class="text-2xl font-bold">84</h3>
87
+ </div>
88
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
89
+ <i data-feather="cpu"></i>
90
+ </div>
91
+ </div>
92
+ <p class="text-sm text-green-600 mt-2">+12% from last month</p>
93
+ </div>
94
+
95
+ <div class="dashboard-card bg-white p-6 rounded-lg shadow">
96
+ <div class="flex justify-between">
97
+ <div>
98
+ <p class="text-gray-500">Daily Calls</p>
99
+ <h3 class="text-2xl font-bold">327</h3>
100
+ </div>
101
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
102
+ <i data-feather="phone"></i>
103
+ </div>
104
+ </div>
105
+ <p class="text-sm text-blue-600 mt-2">+8% from yesterday</p>
106
+ </div>
107
+
108
+ <div class="dashboard-card bg-white p-6 rounded-lg shadow">
109
+ <div class="flex justify-between">
110
+ <div>
111
+ <p class="text-gray-500">Active Customers</p>
112
+ <h3 class="text-2xl font-bold">42</h3>
113
+ </div>
114
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
115
+ <i data-feather="users"></i>
116
+ </div>
117
+ </div>
118
+ <p class="text-sm text-purple-600 mt-2">+3 new this week</p>
119
+ </div>
120
+
121
+ <div class="dashboard-card bg-white p-6 rounded-lg shadow">
122
+ <div class="flex justify-between">
123
+ <div>
124
+ <p class="text-gray-500">Monthly Revenue</p>
125
+ <h3 class="text-2xl font-bold">€4,287</h3>
126
+ </div>
127
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
128
+ <i data-feather="dollar-sign"></i>
129
+ </div>
130
+ </div>
131
+ <p class="text-sm text-yellow-600 mt-2">15% recurring</p>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Recent Activity -->
136
+ <div class="bg-white rounded-lg shadow p-6">
137
+ <div class="flex justify-between items-center mb-4">
138
+ <h3 class="text-lg font-semibold">Recent Calls</h3>
139
+ <a href="#" class="text-sm text-indigo-600 hover:underline">View All</a>
140
+ </div>
141
+ <div class="overflow-x-auto">
142
+ <table class="min-w-full divide-y divide-gray-200">
143
+ <thead class="bg-gray-50">
144
+ <tr>
145
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
146
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th>
147
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
148
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Intent</th>
149
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
150
+ </tr>
151
+ </thead>
152
+ <tbody class="bg-white divide-y divide-gray-200">
153
+ <tr>
154
+ <td class="px-6 py-4 whitespace-nowrap">Kapsalon de Vlinder</td>
155
+ <td class="px-6 py-4 whitespace-nowrap">Kappers NL</td>
156
+ <td class="px-6 py-4 whitespace-nowrap">1:42</td>
157
+ <td class="px-6 py-4 whitespace-nowrap">Appointment</td>
158
+ <td class="px-6 py-4 whitespace-nowrap">5 min ago</td>
159
+ </tr>
160
+ <tr>
161
+ <td class="px-6 py-4 whitespace-nowrap">Restaurant de Molen</td>
162
+ <td class="px-6 py-4 whitespace-nowrap">Restaurant NL</td>
163
+ <td class="px-6 py-4 whitespace-nowrap">2:15</td>
164
+ <td class="px-6 py-4 whitespace-nowrap">Reservation</td>
165
+ <td class="px-6 py-4 whitespace-nowrap">12 min ago</td>
166
+ </tr>
167
+ <tr>
168
+ <td class="px-6 py-4 whitespace-nowrap">Hotel Amstel</td>
169
+ <td class="px-6 py-4 whitespace-nowrap">Hotels NL</td>
170
+ <td class="px-6 py-4 whitespace-nowrap">3:28</td>
171
+ <td class="px-6 py-4 whitespace-nowrap">Check-in</td>
172
+ <td class="px-6 py-4 whitespace-nowrap">27 min ago</td>
173
+ </tr>
174
+ </tbody>
175
+ </table>
176
+ </div>
177
+ </div>
178
+ </main>
179
+ </div>
180
+ </div>
181
+
182
+ <script>
183
+ feather.replace();
184
+ </script>
185
+ </body>
186
+ </html>
index.html CHANGED
@@ -1,19 +1,193 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rose Petal Paradise | Home</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ rose: {
16
+ 50: '#fff1f2',
17
+ 100: '#ffe4e6',
18
+ 200: '#fecdd3',
19
+ 300: '#fda4af',
20
+ 400: '#fb7185',
21
+ 500: '#f43f5e',
22
+ 600: '#e11d48',
23
+ 700: '#be123c',
24
+ 800: '#9f1239',
25
+ 900: '#881337',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ <style>
33
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
34
+
35
+ body {
36
+ font-family: 'Poppins', sans-serif;
37
+ }
38
+
39
+ h1, h2, h3 {
40
+ font-family: 'Playfair Display', serif;
41
+ }
42
+
43
+ .hero-gradient {
44
+ background: linear-gradient(135deg, rgba(244,63,94,0.1) 0%, rgba(255,255,255,1) 100%);
45
+ }
46
+
47
+ .card-hover {
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .card-hover:hover {
52
+ transform: translateY(-5px);
53
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
54
+ }
55
+
56
+ .btn-rose {
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .btn-rose:hover {
61
+ background-color: #e11d48;
62
+ transform: translateY(-2px);
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-white">
67
+ <!-- Navigation -->
68
+ <nav class="bg-white shadow-sm">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="flex justify-between h-16">
71
+ <div class="flex items-center">
72
+ <div class="flex-shrink-0 flex items-center">
73
+ <i data-feather="heart" class="text-rose-500 h-6 w-6"></i>
74
+ <span class="ml-2 text-xl font-bold text-rose-900">Rose Petal</span>
75
+ </div>
76
+ </div>
77
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
78
+ <a href="#" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
79
+ <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
80
+ <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a>
81
+ <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
82
+ <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
83
+ </div>
84
+ <div class="md:hidden flex items-center">
85
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700">
86
+ <i data-feather="menu"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Hero Section -->
94
+ <div class="hero-gradient">
95
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
96
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
97
+ <div>
98
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
99
+ <span class="block">Discover the</span>
100
+ <span class="block text-rose-600">Beauty of Roses</span>
101
+ </h1>
102
+ <p class="mt-3 max-w-3xl text-lg text-gray-500">
103
+ Our collection of the most beautiful rose varieties from around the world. Each petal tells a story of elegance and passion.
104
+ </p>
105
+ <div class="mt-8 sm:flex">
106
+ <div class="rounded-md shadow">
107
+ <a href="#" class="btn-rose w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 md:py-4 md:text-lg md:px-10">
108
+ Explore Collection
109
+ </a>
110
+ </div>
111
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
112
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-rose-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
113
+ Learn More
114
+ </a>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="mt-12 lg:mt-0">
119
+ <img class="rounded-lg shadow-xl" src="http://static.photos/nature/1200x630/42" alt="Beautiful roses">
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Features Section -->
126
+ <div class="py-12 bg-white">
127
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
+ <div class="lg:text-center">
129
+ <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Features</h2>
130
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
131
+ Why Choose Our Roses
132
+ </p>
133
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
134
+ We offer the finest quality roses with unique characteristics that make them stand out.
135
+ </p>
136
+ </div>
137
+
138
+ <div class="mt-10">
139
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
140
+ <div class="card-hover bg-white p-6 rounded-lg shadow-md">
141
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600">
142
+ <i data-feather="droplet" class="h-6 w-6"></i>
143
+ </div>
144
+ <div class="mt-6">
145
+ <h3 class="text-lg font-medium text-gray-900">Freshness Guaranteed</h3>
146
+ <p class="mt-2 text-base text-gray-500">
147
+ Each rose is hand-picked at peak freshness and delivered to you within 24 hours.
148
+ </p>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="card-hover bg-white p-6 rounded-lg shadow-md">
153
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600">
154
+ <i data-feather="globe" class="h-6 w-6"></i>
155
+ </div>
156
+ <div class="mt-6">
157
+ <h3 class="text-lg font-medium text-gray-900">Global Selection</h3>
158
+ <p class="mt-2 text-base text-gray-500">
159
+ We source the rarest and most beautiful roses from around the world.
160
+ </p>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="card-hover bg-white p-6 rounded-lg shadow-md">
165
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600">
166
+ <i data-feather="gift" class="h-6 w-6"></i>
167
+ </div>
168
+ <div class="mt-6">
169
+ <h3 class="text-lg font-medium text-gray-900">Perfect Gifts</h3>
170
+ <p class="mt-2 text-base text-gray-500">
171
+ Our expert florists create stunning arrangements for any occasion.
172
+ </p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Gallery Section -->
181
+ <div class="bg-gray-50 py-12">
182
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
183
+ <div class="lg:text-center">
184
+ <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Gallery</h2>
185
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
186
+ Our Rose Collection
187
+ </p>
188
+ </div>
189
+ <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
190
+ <div class="card-hover bg-white rounded-lg overflow-hidden shadow">
191
+ <img class="w-full h-48 object-cover" src="http://static.photos/nature/640x360/1" alt="
192
+ </body>
193
+ </html>