roxydeerman commited on
Commit
e2517cb
·
verified ·
1 Parent(s): a2bf026

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CreativePulse | Digital Creator & Artist</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #000000 0%, #111827 100%);
}
.text-gradient {
background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- Navigation -->
<nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-sm z-50 border-b border-gray-100">
<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">
<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold text-gray-900">CreativePulse</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Work</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
</div>
<div class="flex items-center">
<button class="bg-black text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition">
Get in Touch
</button>
</div>
</div>
</div>
</nav>

<!-- Hero Section -->
<div id="hero" class="hero-gradient min-h-screen flex items-center justify-center pt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
<span class="text-gradient">Digital Artistry</span> <br>Meets Strategic Vision
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
I transform ideas into visually stunning experiences. As a digital creator and creative director, I bridge the gap between art and strategy.
</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
View Portfolio
</button>
<button class="border border-white text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-white hover:text-gray-900 transition">
My Process
</button>
</div>
</div>
</div>
</div>

<!-- Featured Work -->
<div 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-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Selected works that represent my creative vision and technical expertise</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
<span class="text-white text-xl font-bold">Digital Campaign</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Brand Transformation</h3>
<p class="text-gray-600 mb-4">Complete visual identity redesign for a tech startup</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Creative Direction</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Content Strategy</span>
</div>
</div>
</div>

<!-- Project 2 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
<span class="text-white text-xl font-bold">Social Media</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Influencer Campaign</h3>
<p class="text-gray-600 mb-4">360° content creation for luxury fashion brand</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Content Creation</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Art Direction</span>
</div>
</div>
</div>

<!-- Project 3 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-orange-500 to-yellow-400 flex items-center justify-center">
<span class="text-white text-xl font-bold">Interactive</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Augmented Reality</h3>
<p class="text-gray-600 mb-4">Immersive brand experience for art exhibition</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Digital Art</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Tech Integration</span>
</div>
</div>
</div>
</div>

<div class="text-center mt-12">
<button class="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-900 hover:text-white transition">
View All Projects
</button>
</div>
</div>
</div>

<!-- About Section -->
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h2 class="text-3xl font-bold text-gray-900 mb-6">About Me</h2>
<p class="text-gray-600 mb-6">
With over 8 years in the creative industry, I've developed a unique approach that combines artistic sensibility with business acumen. My work has been featured in major publications and has helped brands connect with their audiences in meaningful ways.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="award"></i>
</div>
<p class="ml-3 text-gray-600">
<span class="font-medium text-gray-900">Award-winning</span> creative director with international recognition
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="users"></i>
</div>
<p class="ml-3 text-gray-600">
<span class="font-medium text-gray-900">300K+</span> engaged audience across social platforms
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="globe"></i>
</div>
<p class="ml-3 text-gray-600">
Worked with <span class="font-medium text-gray-900">50+ brands</span> worldwide across industries
</p>
</div>
</div>
</div>
<div class="lg:w-1/2 lg:pl-12">
<div class="bg-gray-100 rounded-2xl overflow-hidden">
<img src="http://static.photos/creative/1200x630/4

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +453 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Creativepulse Studio
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: pink
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: CreativePulse Studio ✨
3
+ colorFrom: pink
4
+ colorTo: green
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,454 @@
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>CreativePulse | Digital Creator & Artist</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 src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ scroll-behavior: smooth;
16
+ }
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #000000 0%, #111827 100%);
19
+ }
20
+ .text-gradient {
21
+ background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);
22
+ -webkit-background-clip: text;
23
+ background-clip: text;
24
+ color: transparent;
25
+ }
26
+ .card-hover {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .card-hover:hover {
30
+ transform: translateY(-8px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-white text-gray-900 antialiased">
36
+ <!-- Navigation -->
37
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-sm z-50 border-b border-gray-100">
38
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
39
+ <div class="flex justify-between h-16">
40
+ <div class="flex">
41
+ <div class="flex-shrink-0 flex items-center">
42
+ <span class="text-xl font-bold text-gray-900">CreativePulse</span>
43
+ </div>
44
+ </div>
45
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
46
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Work</a>
47
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a>
48
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
49
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
50
+ </div>
51
+ <div class="flex items-center">
52
+ <button class="bg-black text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition">
53
+ Get in Touch
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- Hero Section -->
61
+ <div id="hero" class="hero-gradient min-h-screen flex items-center justify-center pt-16">
62
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
63
+ <div class="text-center">
64
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
65
+ <span class="text-gradient">Digital Artistry</span> <br>Meets Strategic Vision
66
+ </h1>
67
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
68
+ I transform ideas into visually stunning experiences. As a digital creator and creative director, I bridge the gap between art and strategy.
69
+ </p>
70
+ <div class="flex justify-center space-x-4">
71
+ <button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
72
+ View Portfolio
73
+ </button>
74
+ <button class="border border-white text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-white hover:text-gray-900 transition">
75
+ My Process
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Featured Work -->
83
+ <div class="py-20 bg-gray-50">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="text-center mb-16">
86
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
87
+ <p class="text-gray-600 max-w-2xl mx-auto">Selected works that represent my creative vision and technical expertise</p>
88
+ </div>
89
+
90
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
91
+ <!-- Project 1 -->
92
+ <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
93
+ <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
94
+ <span class="text-white text-xl font-bold">Digital Campaign</span>
95
+ </div>
96
+ <div class="p-6">
97
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Brand Transformation</h3>
98
+ <p class="text-gray-600 mb-4">Complete visual identity redesign for a tech startup</p>
99
+ <div class="flex items-center">
100
+ <span class="text-sm text-gray-500">Creative Direction</span>
101
+ <span class="mx-2 text-gray-300">•</span>
102
+ <span class="text-sm text-gray-500">Content Strategy</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Project 2 -->
108
+ <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
109
+ <div class="h-64 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
110
+ <span class="text-white text-xl font-bold">Social Media</span>
111
+ </div>
112
+ <div class="p-6">
113
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Influencer Campaign</h3>
114
+ <p class="text-gray-600 mb-4">360° content creation for luxury fashion brand</p>
115
+ <div class="flex items-center">
116
+ <span class="text-sm text-gray-500">Content Creation</span>
117
+ <span class="mx-2 text-gray-300">•</span>
118
+ <span class="text-sm text-gray-500">Art Direction</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Project 3 -->
124
+ <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
125
+ <div class="h-64 bg-gradient-to-r from-orange-500 to-yellow-400 flex items-center justify-center">
126
+ <span class="text-white text-xl font-bold">Interactive</span>
127
+ </div>
128
+ <div class="p-6">
129
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Augmented Reality</h3>
130
+ <p class="text-gray-600 mb-4">Immersive brand experience for art exhibition</p>
131
+ <div class="flex items-center">
132
+ <span class="text-sm text-gray-500">Digital Art</span>
133
+ <span class="mx-2 text-gray-300">•</span>
134
+ <span class="text-sm text-gray-500">Tech Integration</span>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="text-center mt-12">
141
+ <button class="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-900 hover:text-white transition">
142
+ View All Projects
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- About Section -->
149
+ <div class="py-20 bg-white">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="lg:flex lg:items-center lg:justify-between">
152
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
153
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">About Me</h2>
154
+ <p class="text-gray-600 mb-6">
155
+ With over 8 years in the creative industry, I've developed a unique approach that combines artistic sensibility with business acumen. My work has been featured in major publications and has helped brands connect with their audiences in meaningful ways.
156
+ </p>
157
+ <div class="space-y-4">
158
+ <div class="flex items-start">
159
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
160
+ <i data-feather="award"></i>
161
+ </div>
162
+ <p class="ml-3 text-gray-600">
163
+ <span class="font-medium text-gray-900">Award-winning</span> creative director with international recognition
164
+ </p>
165
+ </div>
166
+ <div class="flex items-start">
167
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
168
+ <i data-feather="users"></i>
169
+ </div>
170
+ <p class="ml-3 text-gray-600">
171
+ <span class="font-medium text-gray-900">300K+</span> engaged audience across social platforms
172
+ </p>
173
+ </div>
174
+ <div class="flex items-start">
175
+ <div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
176
+ <i data-feather="globe"></i>
177
+ </div>
178
+ <p class="ml-3 text-gray-600">
179
+ Worked with <span class="font-medium text-gray-900">50+ brands</span> worldwide across industries
180
+ </p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="lg:w-1/2 lg:pl-12">
185
+ <div class="bg-gray-100 rounded-2xl overflow-hidden">
186
+ <img src="http://static.photos/creative/1200x630/42" alt="Creative Director at work" class="w-full h-auto">
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Services -->
194
+ <div class="py-20 bg-gray-900 text-white">
195
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
196
+ <div class="text-center mb-16">
197
+ <h2 class="text-3xl font-bold mb-4">Creative Services</h2>
198
+ <p class="text-gray-300 max-w-2xl mx-auto">Comprehensive solutions tailored to your brand's needs</p>
199
+ </div>
200
+
201
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
202
+ <!-- Service 1 -->
203
+ <div class="bg-gray-800 p-8 rounded-xl card-hover">
204
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-6">
205
+ <i data-feather="pen-tool" class="text-white"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold mb-3">Creative Direction</h3>
208
+ <p class="text-gray-300 mb-4">
209
+ Developing compelling visual narratives that align with your brand strategy and resonate with your audience.
210
+ </p>
211
+ <ul class="space-y-2 text-gray-400">
212
+ <li class="flex items-center">
213
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
214
+ Brand Identity
215
+ </li>
216
+ <li class="flex items-center">
217
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
218
+ Campaign Concepting
219
+ </li>
220
+ <li class="flex items-center">
221
+ <i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
222
+ Visual Strategy
223
+ </li>
224
+ </ul>
225
+ </div>
226
+
227
+ <!-- Service 2 -->
228
+ <div class="bg-gray-800 p-8 rounded-xl card-hover">
229
+ <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center mb-6">
230
+ <i data-feather="camera" class="text-white"></i>
231
+ </div>
232
+ <h3 class="text-xl font-bold mb-3">Content Creation</h3>
233
+ <p class="text-gray-300 mb-4">
234
+ High-quality, platform-specific content designed to engage and grow your audience across digital channels.
235
+ </p>
236
+ <ul class="space-y-2 text-gray-400">
237
+ <li class="flex items-center">
238
+ <i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
239
+ Photo & Video Production
240
+ </li>
241
+ <li class="flex items-center">
242
+ <i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
243
+ Social Media Content
244
+ </li>
245
+ <li class="flex items-center">
246
+ <i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
247
+ Influencer Campaigns
248
+ </li>
249
+ </ul>
250
+ </div>
251
+
252
+ <!-- Service 3 -->
253
+ <div class="bg-gray-800 p-8 rounded-xl card-hover">
254
+ <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-6">
255
+ <i data-feather="trending-up" class="text-white"></i>
256
+ </div>
257
+ <h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
258
+ <p class="text-gray-300 mb-4">
259
+ Data-driven approaches to maximize your digital presence and connect with your target audience effectively.
260
+ </p>
261
+ <ul class="space-y-2 text-gray-400">
262
+ <li class="flex items-center">
263
+ <i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
264
+ Content Strategy
265
+ </li>
266
+ <li class="flex items-center">
267
+ <i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
268
+ Platform Optimization
269
+ </li>
270
+ <li class="flex items-center">
271
+ <i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
272
+ Performance Analytics
273
+ </li>
274
+ </ul>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Testimonials -->
281
+ <div class="py-20 bg-white">
282
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
283
+ <div class="text-center mb-16">
284
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Client Testimonials</h2>
285
+ <p class="text-gray-600 max-w-2xl mx-auto">What brands and collaborators say about working with me</p>
286
+ </div>
287
+
288
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
289
+ <!-- Testimonial 1 -->
290
+ <div class="bg-gray-50 p-8 rounded-xl">
291
+ <div class="flex items-center mb-6">
292
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
293
+ <img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover">
294
+ </div>
295
+ <div>
296
+ <h4 class="font-bold text-gray-900">Sarah Johnson</h4>
297
+ <p class="text-sm text-gray-500">CMO, Luxe Brands</p>
298
+ </div>
299
+ </div>
300
+ <p class="text-gray-600 italic mb-6">
301
+ "Working with CreativePulse transformed our brand's digital presence. Their strategic vision combined with stunning visuals helped us connect with a younger demographic."
302
+ </p>
303
+ <div class="flex">
304
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
305
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
306
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
307
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
308
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Testimonial 2 -->
313
+ <div class="bg-gray-50 p-8 rounded-xl">
314
+ <div class="flex items-center mb-6">
315
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
316
+ <img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover">
317
+ </div>
318
+ <div>
319
+ <h4 class="font-bold text-gray-900">Michael Chen</h4>
320
+ <p class="text-sm text-gray-500">Founder, TechNova</p>
321
+ </div>
322
+ </div>
323
+ <p class="text-gray-600 italic mb-6">
324
+ "The creative direction provided was exactly what our startup needed to stand out in a crowded market. The visual identity they created has become our strongest asset."
325
+ </p>
326
+ <div class="flex">
327
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
328
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
329
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
330
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
331
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Testimonial 3 -->
336
+ <div class="bg-gray-50 p-8 rounded-xl">
337
+ <div class="flex items-center mb-6">
338
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
339
+ <img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover">
340
+ </div>
341
+ <div>
342
+ <h4 class="font-bold text-gray-900">Emma Rodriguez</h4>
343
+ <p class="text-sm text-gray-500">Marketing Director, UrbanStyle</p>
344
+ </div>
345
+ </div>
346
+ <p class="text-gray-600 italic mb-6">
347
+ "Our influencer campaign exceeded all expectations. The content was not just beautiful but strategically crafted to drive engagement and conversions."
348
+ </p>
349
+ <div class="flex">
350
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
351
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
352
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
353
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
354
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Contact CTA -->
362
+ <div class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
363
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
364
+ <h2 class="text-3xl font-bold mb-6">Ready to elevate your brand?</h2>
365
+ <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-10">
366
+ Let's collaborate to create something extraordinary. I'm currently accepting select new projects.
367
+ </p>
368
+ <button class="bg-white text-blue-600 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
369
+ Get in Touch
370
+ </button>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Footer -->
375
+ <footer class="bg-gray-900 text-white py-12">
376
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
377
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
378
+ <div class="md:col-span-2">
379
+ <h3 class="text-xl font-bold mb-4">CreativePulse</h3>
380
+ <p class="text-gray-400 mb-6">
381
+ Bridging the gap between artistic vision and strategic execution to create impactful digital experiences.
382
+ </p>
383
+ <div class="flex space-x-4">
384
+ <a href="#" class="text-gray-400 hover:text-white">
385
+ <i data-feather="instagram"></i>
386
+ </a>
387
+ <a href="#" class="text-gray-400 hover:text-white">
388
+ <i data-feather="twitter"></i>
389
+ </a>
390
+ <a href="#" class="text-gray-400 hover:text-white">
391
+ <i data-feather="linkedin"></i>
392
+ </a>
393
+ <a href="#" class="text-gray-400 hover:text-white">
394
+ <i data-feather="dribbble"></i>
395
+ </a>
396
+ </div>
397
+ </div>
398
+ <div>
399
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h4>
400
+ <ul class="space-y-3">
401
+ <li><a href="#" class="text-gray-400 hover:text-white">Work</a></li>
402
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
403
+ <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>
404
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
405
+ </ul>
406
+ </div>
407
+ <div>
408
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Get in Touch</h4>
409
+ <ul class="space-y-3">
410
+ <li class="flex items-start">
411
+ <i data-feather="mail" class="w-4 h-4 mt-1 mr-2"></i>
412
+ <a href="mailto:hello@creativepulse.studio" class="text-gray-400 hover:text-white">hello@creativepulse.studio</a>
413
+ </li>
414
+ <li class="flex items-start">
415
+ <i data-feather="phone" class="w-4 h-4 mt-1 mr-2"></i>
416
+ <span class="text-gray-400">+1 (555) 123-4567</span>
417
+ </li>
418
+ <li class="flex items-start">
419
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2"></i>
420
+ <span class="text-gray-400">Los Angeles, CA</span>
421
+ </li>
422
+ </ul>
423
+ </div>
424
+ </div>
425
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
426
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
427
+ © 2023 CreativePulse Studio. All rights reserved.
428
+ </p>
429
+ <div class="flex space-x-6">
430
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
431
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </footer>
436
+
437
+ <script>
438
+ feather.replace();
439
+ VANTA.GLOBE({
440
+ el: "#hero",
441
+ mouseControls: true,
442
+ touchControls: true,
443
+ gyroControls: false,
444
+ minHeight: 200.00,
445
+ minWidth: 200.00,
446
+ scale: 1.00,
447
+ scaleMobile: 1.00,
448
+ color: 0x3b82f6,
449
+ backgroundColor: 0x111827,
450
+ size: 0.8
451
+ });
452
+ </script>
453
+ </body>
454
  </html>