Hugging Face's logo

Spaces:
WOMANVAMPIRE
/
digital-strategy-wizardry
Running

App Files Community
WOMANVAMPIRE commited on
Commit
62dca1c
·
verified ·
1 Parent(s): 57661eb

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El Rhazali Digital | Marketing Consulting Personnalisé</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.neumorphic-card {
border-radius: 24px;
background: #ffffff;
box-shadow: 12px 12px 24px #d9d9d9, -12px -12px 24px #ffffff;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.feature-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
margin-bottom: 1.5rem;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="trending-up" class="text-indigo-600 h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-gray-900">El Rhazali Digital</span>
</div>
</div>
<div class="hidden md:flex md:items-center md:space-x-8 mx-auto">
<a href="#services" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#approach" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Our Approach</a>
<a href="#pricing" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#contact" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">Get Started</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>

<!-- Hero Section -->
<div id="vanta-globe" class="hero-gradient pt-32 pb-48 md:pt-48 md:pb-64 px-4 sm:px-6 lg:px-8 relative overflow-hidden min-h-screen">
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
<div class="max-w-7xl mx-auto">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-1/2" data-aos="fade-right">
<div class="glass-effect p-8 max-w-2xl">
<h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
Find the <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-purple-300">Strategy</span>
adapted to your business
</h1>
<p class="text-2xl text-indigo-100 mb-12">
We help you develop a customized business plan that fits your specific requirments and objectives. </p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-indigo-600 px-8 py-4 rounded-full text-xl font-medium hover:bg-gray-100 transition-all duration-300 text-center hover:scale-105">
Get Your Strategy
</a>
<a href="#services" class="border-2 border-white text-white px-8 py-4 rounded-full text-xl font-medium hover:bg-white hover:bg-opacity-10 transition-all duration-300 text-center hover:scale-105">
Explore other Services
</a>
</div>
</div>
</div>
<div class="hidden md:block md:w-1/2" data-aos="fade-left">
<div class="relative">
<img src="http://static.photos/marketing/1200x630/10" alt="Marketing Strategy" class="rounded-[40px] shadow-2xl transform rotate-2 w-full max-w-2xl">
<div class="absolute -inset-4 bg-gradient-to-tr from-purple-500/20 to-blue-500/20 rounded-[32px] -z-10 blur-lg"></div>
</div>
</div>
</div>
</div>
</div>

<!-- Methodology Section -->
<div class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-2xl font-bold text-gray-900">Our Proven Methodology</h3>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div data-aos="fade-up" data-aos-delay="100">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-3">
<div class="bg-indigo-100 rounded-full p-3 text-indigo-600">
<i data-feather="search" class="w-6 h-6"></i>
</div>
</div>
<div class="text-3xl font-bold text-indigo-600 mb-2">1</div>
<div class="text-gray-600 font-medium">Discovery & Analysis</div>
</div>
</div>
<div data-aos="fade-up" data-aos-delay="200">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-3">
<div class="bg-purple-100 rounded-full p-3 text-purple-600">
<i data-feather="edit-3" class="w-6 h-6"></i>
</div>
</div>
<div class="text-3xl font-bold text-indigo-600 mb-2">2</div>
<div class="text-gray-600 font-medium">Strategy Development</div>
</div>
</div>
<div data-aos="fade-up" data-aos-delay="300">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-3">
<div class="bg-blue-100 rounded-full p-3 text-blue-600">
<i data-feather="zap" class="w-6 h-6"></i>
</div>
</div>
<div class="text-3xl font-bold text-indigo-600 mb-2">3</div>
<div class="text-gray-600 font-medium">Implementation</div>
</div>
</div>
<div data-aos="fade-up" data-aos-delay="400">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-center mb-3">
<div class="bg-green-100 rounded-full p-3 text-green-600">
<i data-feather="trending-up" class="w-6 h-6"></i>
</div>
</div>
<div class="text-3xl font-bold text-indigo-600 mb-2">4</div>
<div class="text-gray-600 font-medium">Optimization</div>
</div>
</div>
</div>
</div>
</div>

<!-- Services Section -->
<section id="services" class="py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">Tailored Marketing Solutions</h2>
<p class="text-2xl text-gray-600 max-w-4xl mx-auto">
We don't believe in one-size-fits-all. Our services adapt to your specific business needs and industry challenges.
</p>
</div>

<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="feature-icon bg-gradient-to-br from-indigo-100 to-indigo-50 text-indigo-600">
<i data-feather="target" class="w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Strategic Positioning</h3>
<p class="text-gray-600">
Identify your unique market position and craft messaging that resonates with your ideal customers.
</p>
</div>

<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-30

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +330 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Digital Strategy Wizardry
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: green
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: Digital Strategy Wizardry 🧙‍♂️
3
+ colorFrom: pink
4
+ colorTo: pink
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).
index.html CHANGED
@@ -1,19 +1,331 @@
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>Digital Strategy Wizardry | Custom Marketing Solutions</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ .magic-gradient {
16
+ background: linear-gradient(135deg, #6B46C1 0%, #4299E1 100%);
17
+ }
18
+ .sparkle-card {
19
+ position: relative;
20
+ overflow: hidden;
21
+ }
22
+ .sparkle-card::before {
23
+ content: "";
24
+ position: absolute;
25
+ top: -50%;
26
+ left: -50%;
27
+ width: 200%;
28
+ height: 200%;
29
+ background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
30
+ transform: rotate(30deg);
31
+ opacity: 0;
32
+ transition: opacity 0.5s;
33
+ }
34
+ .sparkle-card:hover::before {
35
+ opacity: 1;
36
+ }
37
+ .wizard-hat {
38
+ position: relative;
39
+ }
40
+ .wizard-hat::after {
41
+ content: "";
42
+ position: absolute;
43
+ top: -20px;
44
+ left: 50%;
45
+ transform: translateX(-50%);
46
+ width: 0;
47
+ height: 0;
48
+ border-left: 20px solid transparent;
49
+ border-right: 20px solid transparent;
50
+ border-bottom: 30px solid #6B46C1;
51
+ }
52
+ @keyframes float {
53
+ 0% { transform: translateY(0px); }
54
+ 50% { transform: translateY(-20px); }
55
+ 100% { transform: translateY(0px); }
56
+ }
57
+ .floating {
58
+ animation: float 6s ease-in-out infinite;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="font-sans antialiased bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">
63
+ <!-- Navigation -->
64
+ <nav class="bg-white dark:bg-gray-800 shadow-sm fixed w-full z-10">
65
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="flex justify-between h-16">
67
+ <div class="flex items-center">
68
+ <div class="flex-shrink-0 flex items-center">
69
+ <i data-feather="zap" class="text-purple-600 h-8 w-8"></i>
70
+ <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">StrategyWiz</span>
71
+ </div>
72
+ </div>
73
+ <div class="hidden md:flex md:items-center md:space-x-8 mx-auto">
74
+ <a href="#services" class="text-gray-900 dark:text-gray-300 hover:text-purple-600 px-3 py-2 text-sm font-medium">Magic Services</a>
75
+ <a href="#approach" class="text-gray-900 dark:text-gray-300 hover:text-purple-600 px-3 py-2 text-sm font-medium">Our Spellbook</a>
76
+ <a href="#pricing" class="text-gray-900 dark:text-gray-300 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing Potions</a>
77
+ <a href="#contact" class="bg-gradient-to-r from-purple-600 to-blue-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:from-purple-700 hover:to-blue-600 transition duration-300">Cast Your Spell</a>
78
+ </div>
79
+ <div class="-mr-2 flex items-center md:hidden">
80
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
81
+ <i data-feather="menu"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Hero Section -->
89
+ <div id="vanta-globe" class="magic-gradient pt-32 pb-48 md:pt-48 md:pb-64 px-4 sm:px-6 lg:px-8 relative overflow-hidden min-h-screen">
90
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
91
+ <div class="max-w-7xl mx-auto">
92
+ <div class="md:flex md:items-center md:justify-between">
93
+ <div class="md:w-1/2" data-aos="fade-right">
94
+ <div class="bg-white dark:bg-gray-800 bg-opacity-10 backdrop-blur-lg p-8 rounded-3xl max-w-2xl border border-white border-opacity-20">
95
+ <h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
96
+ Digital <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">Magic</span> for Your Business
97
+ </h1>
98
+ <p class="text-2xl text-blue-100 mb-12">
99
+ We conjure custom strategies that transform your digital presence from mundane to magnificent.
100
+ </p>
101
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
102
+ <a href="#contact" class="bg-white text-purple-600 px-8 py-4 rounded-full text-xl font-medium hover:bg-gray-100 transition-all duration-300 text-center hover:scale-105">
103
+ Begin Your Quest
104
+ </a>
105
+ <a href="#services" class="border-2 border-white text-white px-8 py-4 rounded-full text-xl font-medium hover:bg-white hover:bg-opacity-10 transition-all duration-300 text-center hover:scale-105">
106
+ Explore Spells
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="hidden md:block md:w-1/2" data-aos="fade-left">
112
+ <div class="relative floating">
113
+ <img src="http://static.photos/magic/1200x630/7" alt="Digital Wizard" class="rounded-[40px] shadow-2xl transform rotate-2 w-full max-w-2xl">
114
+ <div class="absolute -inset-4 bg-gradient-to-tr from-purple-500/20 to-blue-500/20 rounded-[32px] -z-10 blur-lg"></div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Services Section -->
122
+ <section id="services" class="py-24 md:py-32 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
123
+ <div class="max-w-7xl mx-auto">
124
+ <div class="text-center mb-16" data-aos="fade-up">
125
+ <h2 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">Our <span class="text-purple-600">Magical</span> Services</h2>
126
+ <p class="text-2xl text-gray-600 dark:text-gray-300 max-w-4xl mx-auto">
127
+ Potions, spells, and charms crafted specifically for your business challenges.
128
+ </p>
129
+ </div>
130
+
131
+ <div class="grid md:grid-cols-3 gap-8">
132
+ <div class="sparkle-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="100">
133
+ <div class="wizard-hat flex justify-center mb-6">
134
+ <div class="bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900 dark:to-purple-800 rounded-full p-4 text-purple-600 dark:text-purple-300">
135
+ <i data-feather="compass" class="w-8 h-8"></i>
136
+ </div>
137
+ </div>
138
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Strategy Divination</h3>
139
+ <p class="text-gray-600 dark:text-gray-300">
140
+ Peer into the future of your market and craft a path to dominance with our clairvoyant analytics.
141
+ </p>
142
+ </div>
143
+
144
+ <div class="sparkle-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="200">
145
+ <div class="wizard-hat flex justify-center mb-6">
146
+ <div class="bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 rounded-full p-4 text-blue-600 dark:text-blue-300">
147
+ <i data-feather="activity" class="w-8 h-8"></i>
148
+ </div>
149
+ </div>
150
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Growth Alchemy</h3>
151
+ <p class="text-gray-600 dark:text-gray-300">
152
+ Transform your lead generation into pure gold with our conversion transmutation techniques.
153
+ </p>
154
+ </div>
155
+
156
+ <div class="sparkle-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="300">
157
+ <div class="wizard-hat flex justify-center mb-6">
158
+ <div class="bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900 dark:to-green-800 rounded-full p-4 text-green-600 dark:text-green-300">
159
+ <i data-feather="globe" class="w-8 h-8"></i>
160
+ </div>
161
+ </div>
162
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Brand Enchantment</h3>
163
+ <p class="text-gray-600 dark:text-gray-300">
164
+ Weave a spellbinding brand story that captivates your audience and commands loyalty.
165
+ </p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Testimonials -->
172
+ <section class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900 dark:to-blue-900">
173
+ <div class="max-w-7xl mx-auto">
174
+ <div class="text-center mb-16" data-aos="fade-up">
175
+ <h2 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">Praise from <span class="text-purple-600">Enchanted</span> Clients</h2>
176
+ </div>
177
+
178
+ <div class="grid md:grid-cols-3 gap-8">
179
+ <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
180
+ <div class="flex items-center mb-4">
181
+ <img src="http://static.photos/people/200x200/1" alt="Client" class="w-12 h-12 rounded-full mr-4">
182
+ <div>
183
+ <h4 class="font-bold text-gray-900 dark:text-white">Morgana LeFay</h4>
184
+ <p class="text-sm text-purple-600">CEO, Mystic Enterprises</p>
185
+ </div>
186
+ </div>
187
+ <p class="text-gray-600 dark:text-gray-300 italic">
188
+ "These wizards tripled our online conversions in just three moons. Their magic is real!"
189
+ </p>
190
+ <div class="flex mt-4 text-yellow-400">
191
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
192
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
193
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
194
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
195
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
200
+ <div class="flex items-center mb-4">
201
+ <img src="http://static.photos/people/200x200/2" alt="Client" class="w-12 h-12 rounded-full mr-4">
202
+ <div>
203
+ <h4 class="font-bold text-gray-900 dark:text-white">Gandalf Grey</h4>
204
+ <p class="text-sm text-purple-600">Founder, Middle-earth Marketing</p>
205
+ </div>
206
+ </div>
207
+ <p class="text-gray-600 dark:text-gray-300 italic">
208
+ "Their strategic foresight is like the palantír - showing us exactly where to focus our efforts."
209
+ </p>
210
+ <div class="flex mt-4 text-yellow-400">
211
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
212
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
213
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
214
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
215
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300">
220
+ <div class="flex items-center mb-4">
221
+ <img src="http://static.photos/people/200x200/3" alt="Client" class="w-12 h-12 rounded-full mr-4">
222
+ <div>
223
+ <h4 class="font-bold text-gray-900 dark:text-white">Merlin Ambrosius</h4>
224
+ <p class="text-sm text-purple-600">CMO, Camelot Corp</p>
225
+ </div>
226
+ </div>
227
+ <p class="text-gray-600 dark:text-gray-300 italic">
228
+ "After centuries in marketing, I've never seen such powerful results from a single consulting session."
229
+ </p>
230
+ <div class="flex mt-4 text-yellow-400">
231
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
232
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
233
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
234
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
235
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </section>
241
+
242
+ <!-- CTA Section -->
243
+ <section id="contact" class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-purple-600 to-blue-600">
244
+ <div class="max-w-7xl mx-auto text-center">
245
+ <h2 class="text-4xl md:text-6xl font-bold text-white mb-8" data-aos="fade-up">Ready to <span class="text-yellow-300">Transform</span> Your Business?</h2>
246
+ <p class="text-2xl text-blue-100 mb-12 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
247
+ Book your free strategy session and let's brew some marketing magic together.
248
+ </p>
249
+ <a href="#contact" class="inline-block bg-white text-purple-600 px-12 py-6 rounded-full text-xl font-bold hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-lg" data-aos="fade-up" data-aos-delay="200">
250
+ Cast Your Spell Now
251
+ <i data-feather="arrow-right" class="inline ml-2 w-6 h-6"></i>
252
+ </a>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Footer -->
257
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
258
+ <div class="max-w-7xl mx-auto">
259
+ <div class="grid md:grid-cols-4 gap-8">
260
+ <div>
261
+ <div class="flex items-center mb-4">
262
+ <i data-feather="zap" class="text-purple-400 h-8 w-8"></i>
263
+ <span class="ml-2 text-xl font-bold">StrategyWiz</span>
264
+ </div>
265
+ <p class="text-gray-400">
266
+ Digital marketing magic for the modern era. Since 2023.
267
+ </p>
268
+ </div>
269
+ <div>
270
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
271
+ <ul class="space-y-2">
272
+ <li><a href="#services" class="text-gray-400 hover:text-purple-300">Services</a></li>
273
+ <li><a href="#approach" class="text-gray-400 hover:text-purple-300">Our Approach</a></li>
274
+ <li><a href="#pricing" class="text-gray-400 hover:text-purple-300">Pricing</a></li>
275
+ <li><a href="#contact" class="text-gray-400 hover:text-purple-300">Contact</a></li>
276
+ </ul>
277
+ </div>
278
+ <div>
279
+ <h4 class="text-lg font-bold mb-4">Follow Our Magic</h4>
280
+ <div class="flex space-x-4">
281
+ <a href="#" class="text-gray-400 hover:text-purple-300"><i data-feather="twitter"></i></a>
282
+ <a href="#" class="text-gray-400 hover:text-purple-300"><i data-feather="linkedin"></i></a>
283
+ <a href="#" class="text-gray-400 hover:text-purple-300"><i data-feather="instagram"></i></a>
284
+ <a href="#" class="text-gray-400 hover:text-purple-300"><i data-feather="facebook"></i></a>
285
+ </div>
286
+ </div>
287
+ <div>
288
+ <h4 class="text-lg font-bold mb-4">Subscribe</h4>
289
+ <p class="text-gray-400 mb-4">Get magical marketing insights delivered to your inbox.</p>
290
+ <form class="flex">
291
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full text-gray-900">
292
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg">
293
+ <i data-feather="send"></i>
294
+ </button>
295
+ </form>
296
+ </div>
297
+ </div>
298
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
299
+ <p>© 2023 StrategyWiz. All spells reserved.</p>
300
+ </div>
301
+ </div>
302
+ </footer>
303
+
304
+ <script>
305
+ // Initialize AOS animation library
306
+ AOS.init({
307
+ duration: 800,
308
+ easing: 'ease-in-out',
309
+ once: true
310
+ });
311
+
312
+ // Initialize Vanta.js background
313
+ VANTA.GLOBE({
314
+ el: "#vanta-globe",
315
+ mouseControls: true,
316
+ touchControls: true,
317
+ gyroControls: false,
318
+ minHeight: 200.00,
319
+ minWidth: 200.00,
320
+ scale: 1.00,
321
+ scaleMobile: 1.00,
322
+ color: 0x7e5bef,
323
+ backgroundColor: 0x0,
324
+ size: 1.00
325
+ });
326
+
327
+ // Initialize feather icons
328
+ feather.replace();
329
+ </script>
330
+ </body>
331
  </html>