Hugging Face's logo

Spaces:
dshunt
/
pixelpulse-creatives
Running

App Files Community
dshunt commited on
Commit
4f91b68
·
verified ·
1 Parent(s): 5217984

Create a creative agency portfolio with animated hero section, featured projects showcase with case studies, services we provide, team members grid, client testimonials slider, awards section, and get a quote form.

Browse files
Files changed (5) hide show
  1. README.md +7 -4
  2. components/navbar.js +46 -0
  3. index.html +473 -19
  4. script.js +84 -0
  5. style.css +58 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Pixelpulse Creatives
3
- emoji: 🌍
4
- colorFrom: purple
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: PixelPulse Creatives 🎨✨
3
+ colorFrom: green
 
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://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .navbar {
7
+ transition: all 0.3s ease;
8
+ }
9
+ .navbar.scrolled {
10
+ background-color: rgba(255, 255, 255, 0.95);
11
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
12
+ }
13
+ .mobile-menu {
14
+ max-height: 0;
15
+ overflow: hidden;
16
+ transition: max-height 0.3s ease-out;
17
+ }
18
+ .mobile-menu.open {
19
+ max-height: 500px;
20
+ }
21
+ @media (min-width: 1024px) {
22
+ .mobile-menu {
23
+ max-height: none !important;
24
+ }
25
+ }
26
+ </style>
27
+ <nav class="navbar fixed w-full z-50 top-0">
28
+ <div class="container mx-auto px-6 py-4">
29
+ <div class="flex items-center justify-between">
30
+ <!-- Logo -->
31
+ <a href="/" class="flex items-center">
32
+ <span class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">PixelPulse</span>
33
+ </a>
34
+
35
+ <!-- Desktop Menu -->
36
+ <div class="hidden lg:flex items-center space-x-10">
37
+ <a href="#work" class="text-dark hover:text-primary transition-colors font-medium">Work</a>
38
+ <a href="#services" class="text-dark hover:text-primary transition-colors font-medium">Services</a>
39
+ <a href="#about" class="text-dark hover:text-primary transition-colors font-medium">About</a>
40
+ <a href="#contact" class="text-dark hover:text-primary transition-colors font-medium">Contact</a>
41
+ <a href="#contact" class="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-medium hover:opacity-90 transition-opacity">Get a Quote</a>
42
+ </div>
43
+
44
+ <!-- Mobile Menu Button -->
45
+ <button class="lg:hidden focus:outline-none mobile-menu-button">
46
+ <i data-feather="menu" class="w-6 h-
index.html CHANGED
@@ -1,19 +1,473 @@
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>PixelPulse Creatives | Digital Agency</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ dark: '#1e293b',
19
+ light: '#f8fafc'
20
+ },
21
+ animation: {
22
+ 'float': 'float 6s ease-in-out infinite',
23
+ 'float-reverse': 'float-reverse 5s ease-in-out infinite',
24
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
25
+ },
26
+ keyframes: {
27
+ float: {
28
+ '0%, 100%': { transform: 'translateY(0)' },
29
+ '50%': { transform: 'translateY(-20px)' },
30
+ },
31
+ 'float-reverse': {
32
+ '0%, 100%': { transform: 'translateY(0)' },
33
+ '50%': { transform: 'translateY(15px)' },
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ </head>
41
+ <body class="bg-light text-dark font-sans antialiased">
42
+ <!-- Navigation -->
43
+ <custom-navbar></custom-navbar>
44
+
45
+ <!-- Hero Section -->
46
+ <section class="relative h-screen overflow-hidden">
47
+ <div class="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-90 z-0"></div>
48
+ <div class="absolute inset-0 flex items-center justify-center z-10 px-6">
49
+ <div class="text-center max-w-4xl mx-auto">
50
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in">We Create Digital Magic</h1>
51
+ <p class="text-xl md:text-2xl text-white/90 mb-10 max-w-2xl mx-auto">PixelPulse transforms ideas into immersive digital experiences that captivate and convert.</p>
52
+ <div class="flex gap-4 justify-center">
53
+ <a href="#work" class="px-8 py-3 bg-white text-primary rounded-full font-semibold hover:bg-opacity-90 transition-all hover:shadow-lg">View Work</a>
54
+ <a href="#contact" class="px-8 py-3 bg-transparent border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:text-primary transition-all">Get in Touch</a>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ <div class="absolute bottom-0 left-0 right-0 flex justify-center z-10 pb-10">
59
+ <a href="#about" class="text-white animate-bounce">
60
+ <i data-feather="chevron-down" class="w-10 h-10"></i>
61
+ </a>
62
+ </div>
63
+ <div class="absolute top-20 right-20 w-32 h-32 rounded-full bg-white/10 animate-float"></div>
64
+ <div class="absolute bottom-40 left-20 w-24 h-24 rounded-full bg-white/15 animate-float-reverse"></div>
65
+ <div class="absolute top-1/3 left-1/4 w-16 h-16 rounded-full bg-white/20 animate-pulse-slow"></div>
66
+ </section>
67
+
68
+ <!-- Featured Projects -->
69
+ <section id="work" class="py-20 px-6 bg-white">
70
+ <div class="max-w-7xl mx-auto">
71
+ <div class="text-center mb-16">
72
+ <span class="text-primary font-semibold">OUR WORK</span>
73
+ <h2 class="text-4xl font-bold mt-2 mb-4">Featured Projects</h2>
74
+ <p class="text-lg text-dark/70 max-w-2xl mx-auto">Explore our portfolio of digital masterpieces that have helped brands stand out and scale.</p>
75
+ </div>
76
+
77
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
78
+ <!-- Project 1 -->
79
+ <div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
80
+ <img src="http://static.photos/technology/1024x576/1" alt="Project 1" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
81
+ <div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
82
+ <div>
83
+ <h3 class="text-white text-xl font-bold">Nebula Design System</h3>
84
+ <p class="text-white/80 mt-2">UI/UX Design, Frontend Development</p>
85
+ <a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Project 2 -->
91
+ <div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
92
+ <img src="http://static.photos/workspace/1024x576/2" alt="Project 2" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
93
+ <div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
94
+ <div>
95
+ <h3 class="text-white text-xl font-bold">Omni Commerce Platform</h3>
96
+ <p class="text-white/80 mt-2">Web Development, E-commerce</p>
97
+ <a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Project 3 -->
103
+ <div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
104
+ <img src="http://static.photos/minimal/1024x576/3" alt="Project 3" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
105
+ <div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
106
+ <div>
107
+ <h3 class="text-white text-xl font-bold">Aurora Brand Identity</h3>
108
+ <p class="text-white/80 mt-2">Branding, Visual Design</p>
109
+ <a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="text-center mt-12">
116
+ <a href="portfolio.html" class="inline-flex items-center gap-2 px-6 py-3 border border-primary text-primary rounded-full font-semibold hover:bg-primary hover:text-white transition-all">
117
+ View All Projects
118
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
119
+ </a>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Services -->
125
+ <section class="py-20 px-6 bg-gradient-to-br from-primary/5 to-secondary/5">
126
+ <div class="max-w-7xl mx-auto">
127
+ <div class="text-center mb-16">
128
+ <span class="text-primary font-semibold">WHAT WE DO</span>
129
+ <h2 class="text-4xl font-bold mt-2 mb-4">Our Services</h2>
130
+ <p class="text-lg text-dark/70 max-w-2xl mx-auto">Comprehensive digital solutions tailored to your business needs.</p>
131
+ </div>
132
+
133
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
134
+ <!-- Service 1 -->
135
+ <div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
136
+ <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
137
+ <i data-feather="layout" class="w-6 h-6 text-primary"></i>
138
+ </div>
139
+ <h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
140
+ <p class="text-dark/70 mb-4">Beautiful, intuitive interfaces designed for optimal user experience and conversion.</p>
141
+ <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
142
+ Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
143
+ </a>
144
+ </div>
145
+
146
+ <!-- Service 2 -->
147
+ <div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
148
+ <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
149
+ <i data-feather="code" class="w-6 h-6 text-primary"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
152
+ <p class="text-dark/70 mb-4">Custom websites and web applications built with cutting-edge technologies.</p>
153
+ <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
154
+ Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
155
+ </a>
156
+ </div>
157
+
158
+ <!-- Service 3 -->
159
+ <div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
160
+ <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
161
+ <i data-feather="smartphone" class="w-6 h-6 text-primary"></i>
162
+ </div>
163
+ <h3 class="text-xl font-bold mb-3">Mobile Apps</h3>
164
+ <p class="text-dark/70 mb-4">Native and cross-platform mobile applications for iOS and Android.</p>
165
+ <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
166
+ Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
167
+ </a>
168
+ </div>
169
+
170
+ <!-- Service 4 -->
171
+ <div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
172
+ <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
173
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-primary"></i>
174
+ </div>
175
+ <h3 class="text-xl font-bold mb-3">Digital Marketing</h3>
176
+ <p class="text-dark/70 mb-4">Data-driven strategies to grow your online presence and customer base.</p>
177
+ <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
178
+ Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
179
+ </a>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Team -->
186
+ <section id="about" class="py-20 px-6 bg-white">
187
+ <div class="max-w-7xl mx-auto">
188
+ <div class="text-center mb-16">
189
+ <span class="text-primary font-semibold">OUR TEAM</span>
190
+ <h2 class="text-4xl font-bold mt-2 mb-4">Meet the Experts</h2>
191
+ <p class="text-lg text-dark/70 max-w-2xl mx-auto">The creative minds behind PixelPulse's success.</p>
192
+ </div>
193
+
194
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
195
+ <!-- Team Member 1 -->
196
+ <div class="team-member text-center">
197
+ <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
198
+ <img src="http://static.photos/people/320x240/1" alt="Alex Chen" class="w-full h-full object-cover">
199
+ </div>
200
+ <h3 class="text-xl font-bold">Alex Chen</h3>
201
+ <p class="text-primary font-medium mb-2">Creative Director</p>
202
+ <p class="text-dark/70 text-sm">Visionary designer with 10+ years experience in digital product design.</p>
203
+ <div class="flex justify-center gap-3 mt-4">
204
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
205
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
206
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="dribbble"></i></a>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Team Member 2 -->
211
+ <div class="team-member text-center">
212
+ <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
213
+ <img src="http://static.photos/people/320x240/2" alt="Jamie Rivera" class="w-full h-full object-cover">
214
+ </div>
215
+ <h3 class="text-xl font-bold">Jamie Rivera</h3>
216
+ <p class="text-primary font-medium mb-2">Lead Developer</p>
217
+ <p class="text-dark/70 text-sm">Full-stack wizard specializing in React, Node.js, and cloud architecture.</p>
218
+ <div class="flex justify-center gap-3 mt-4">
219
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="github"></i></a>
220
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
221
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Team Member 3 -->
226
+ <div class="team-member text-center">
227
+ <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
228
+ <img src="http://static.photos/people/320x240/3" alt="Taylor Wong" class="w-full h-full object-cover">
229
+ </div>
230
+ <h3 class="text-xl font-bold">Taylor Wong</h3>
231
+ <p class="text-primary font-medium mb-2">UX Researcher</p>
232
+ <p class="text-dark/70 text-sm">Human-centered design advocate with psychology background.</p>
233
+ <div class="flex justify-center gap-3 mt-4">
234
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
235
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
236
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="instagram"></i></a>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Team Member 4 -->
241
+ <div class="team-member text-center">
242
+ <div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
243
+ <img src="http://static.photos/people/320x240/4" alt="Morgan Patel" class="w-full h-full object-cover">
244
+ </div>
245
+ <h3 class="text-xl font-bold">Morgan Patel</h3>
246
+ <p class="text-primary font-medium mb-2">Marketing Strategist</p>
247
+ <p class="text-dark/70 text-sm">Growth hacker with expertise in digital campaigns and analytics.</p>
248
+ <div class="flex justify-center gap-3 mt-4">
249
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
250
+ <a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Testimonials -->
258
+ <section class="py-20 px-6 bg-gradient-to-br from-primary to-secondary">
259
+ <div class="max-w-7xl mx-auto">
260
+ <div class="text-center mb-16">
261
+ <span class="text-white/80 font-semibold">CLIENT LOVE</span>
262
+ <h2 class="text-4xl font-bold mt-2 mb-4 text-white">Testimonials</h2>
263
+ </div>
264
+
265
+ <div class="testimonial-slider relative">
266
+ <div class="flex overflow-hidden">
267
+ <!-- Testimonial 1 -->
268
+ <div class="testimonial-slide min-w-full px-4">
269
+ <div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
270
+ <div class="absolute -top-4 left-8 text-primary">
271
+ <i data-feather="quote" class="w-8 h-8"></i>
272
+ </div>
273
+ <p class="text-lg text-dark/80 mb-6">"PixelPulse transformed our digital presence completely. Their team delivered a website that not only looks stunning but has increased our conversion rate by 140%."</p>
274
+ <div class="flex items-center">
275
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
276
+ <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-full h-full object-cover">
277
+ </div>
278
+ <div>
279
+ <h4 class="font-bold">Sarah Johnson</h4>
280
+ <p class="text-sm text-dark/60">CEO, NovaTech</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Testimonial 2 -->
287
+ <div class="testimonial-slide min-w-full px-4">
288
+ <div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
289
+ <div class="absolute -top-4 left-8 text-primary">
290
+ <i data-feather="quote" class="w-8 h-8"></i>
291
+ </div>
292
+ <p class="text-lg text-dark/80 mb-6">"Working with PixelPulse has been a game-changer for our brand. Their creative approach to our mobile app resulted in the highest user retention we've ever seen."</p>
293
+ <div class="flex items-center">
294
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
295
+ <img src="http://static.photos/people/200x200/2" alt="Michael Rodriguez" class="w-full h-full object-cover">
296
+ </div>
297
+ <div>
298
+ <h4 class="font-bold">Michael Rodriguez</h4>
299
+ <p class="text-sm text-dark/60">CMO, UrbanFit</p>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Testimonial 3 -->
306
+ <div class="testimonial-slide min-w-full px-4">
307
+ <div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
308
+ <div class="absolute -top-4 left-8 text-primary">
309
+ <i data-feather="quote" class="w-8 h-8"></i>
310
+ </div>
311
+ <p class="text-lg text-dark/80 mb-6">"The e-commerce platform PixelPulse built for us exceeded all expectations. Their technical expertise and attention to detail are truly exceptional."</p>
312
+ <div class="flex items-center">
313
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
314
+ <img src="http://static.photos/people/200x200/3" alt="David Kim" class="w-full h-full object-cover">
315
+ </div>
316
+ <div>
317
+ <h4 class="font-bold">David Kim</h4>
318
+ <p class="text-sm text-dark/60">Founder, CraftedGoods</p>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <button class="testimonial-prev absolute left-0 top-1/2 -translate-y-1/2 -ml-2 bg-white/80 text-primary p-2 rounded-full shadow-md hover:bg-white z-10">
326
+ <i data-feather="chevron-left" class="w-6 h-6"></i>
327
+ </button>
328
+ <button class="testimonial-next absolute right-0 top-1/2 -translate-y-1/2 -mr-2 bg-white/80 text-primary p-2 rounded-full shadow-md hover:bg-white z-10">
329
+ <i data-feather="chevron-right" class="w-6 h-6"></i>
330
+ </button>
331
+
332
+ <div class="flex justify-center gap-2 mt-8">
333
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
334
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
335
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- Awards & Recognition -->
342
+ <section class="py-20 px-6 bg-white">
343
+ <div class="max-w-7xl mx-auto">
344
+ <div class="text-center mb-16">
345
+ <span class="text-primary font-semibold">OUR ACHIEVEMENTS</span>
346
+ <h2 class="text-4xl font-bold mt-2 mb-4">Awards & Recognition</h2>
347
+ <p class="text-lg text-dark/70 max-w-2xl mx-auto">Industry recognition for our innovative work and client impact.</p>
348
+ </div>
349
+
350
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
351
+ <div class="flex flex-col items-center text-center p-6">
352
+ <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
353
+ <i data-feather="award" class="w-8 h-8 text-primary"></i>
354
+ </div>
355
+ <h3 class="font-bold text-lg">Webby Awards</h3>
356
+ <p class="text-sm text-dark/70 mt-1">Best UX Design 2023</p>
357
+ </div>
358
+
359
+ <div class="flex flex-col items-center text-center p-6">
360
+ <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
361
+ <i data-feather="star" class="w-8 h-8 text-primary"></i>
362
+ </div>
363
+ <h3 class="font-bold text-lg">Awwwards</h3>
364
+ <p class="text-sm text-dark/70 mt-1">Site of the Month</p>
365
+ </div>
366
+
367
+ <div class="flex flex-col items-center text-center p-6">
368
+ <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
369
+ <i data-feather="trophy" class="w-8 h-8 text-primary"></i>
370
+ </div>
371
+ <h3 class="font-bold text-lg">CSS Design Awards</h3>
372
+ <p class="text-sm text-dark/70 mt-1">Innovation Excellence</p>
373
+ </div>
374
+
375
+ <div class="flex flex-col items-center text-center p-6">
376
+ <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
377
+ <i data-feather="medal" class="w-8 h-8 text-primary"></i>
378
+ </div>
379
+ <h3 class="font-bold text-lg">Clutch</h3>
380
+ <p class="text-sm text-dark/70 mt-1">Top Design Firm 2023</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Contact Form -->
387
+ <section id="contact" class="py-20 px-6 bg-gradient-to-br from-primary/5 to-secondary/5">
388
+ <div class="max-w-7xl mx-auto">
389
+ <div class="flex flex-col lg:flex-row gap-12">
390
+ <div class="lg:w-1/2">
391
+ <h2 class="text-4xl font-bold mb-6">Let's Work Together</h2>
392
+ <p class="text-lg text-dark/70 mb-8">Ready to bring your vision to life? Get in touch and let's create something amazing together.</p>
393
+
394
+ <div class="space-y-6">
395
+ <div class="flex items-start gap-4">
396
+ <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
397
+ <i data-feather="mail" class="w-5 h-5 text-primary"></i>
398
+ </div>
399
+ <div>
400
+ <h4 class="font-bold">Email Us</h4>
401
+ <a href="mailto:hello@pixelpulse.com" class="text-primary hover:underline">hello@pixelpulse.com</a>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="flex items-start gap-4">
406
+ <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
407
+ <i data-feather="phone" class="w-5 h-5 text-primary"></i>
408
+ </div>
409
+ <div>
410
+ <h4 class="font-bold">Call Us</h4>
411
+ <a href="tel:+18005551234" class="text-primary hover:underline">+1 (800) 555-1234</a>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="flex items-start gap-4">
416
+ <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
417
+ <i data-feather="map-pin" class="w-5 h-5 text-primary"></i>
418
+ </div>
419
+ <div>
420
+ <h4 class="font-bold">Visit Us</h4>
421
+ <p>123 Creative Lane<br>San Francisco, CA 94107</p>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="lg:w-1/2">
428
+ <form class="bg-white p-8 rounded-xl shadow-md">
429
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
430
+ <div>
431
+ <label for="name" class="block text-sm font-medium mb-2">Name</label>
432
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name">
433
+ </div>
434
+ <div>
435
+ <label for="email" class="block text-sm font-medium mb-2">Email</label>
436
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your email">
437
+ </div>
438
+ </div>
439
+
440
+ <div class="mb-6">
441
+ <label for="subject" class="block text-sm font-medium mb-2">Subject</label>
442
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="How can we help?">
443
+ </div>
444
+
445
+ <div class="mb-6">
446
+ <label for="message" class="block text-sm font-medium mb-2">Message</label>
447
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tell us about your project..."></textarea>
448
+ </div>
449
+
450
+ <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-90 transition-opacity">Send Message</button>
451
+ </form>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Footer -->
458
+ <custom-footer></custom-footer>
459
+
460
+ <!-- Component Scripts -->
461
+ <script src="components/navbar.js"></script>
462
+ <script src="components/footer.js"></script>
463
+
464
+ <!-- Main Script -->
465
+ <script src="script.js"></script>
466
+
467
+ <!-- Feather Icons -->
468
+ <script>
469
+ feather.replace();
470
+ </script>
471
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
472
+ </body>
473
+ </html>
script.js ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Testimonial Slider
3
+ const slider = document.querySelector('.testimonial-slider .flex');
4
+ const slides = document.querySelectorAll('.testimonial-slide');
5
+ const dots = document.querySelectorAll('.testimonial-dot');
6
+ const prevBtn = document.querySelector('.testimonial-prev');
7
+ const nextBtn = document.querySelector('.testimonial-next');
8
+ let currentIndex = 0;
9
+
10
+ function updateSlider() {
11
+ slider.style.transform = `translateX(-${currentIndex * 100}%)`;
12
+
13
+ // Update dots
14
+ dots.forEach((dot, index) => {
15
+ if(index === currentIndex) {
16
+ dot.classList.add('active');
17
+ dot.classList.remove('bg-white/50');
18
+ } else {
19
+ dot.classList.remove('active');
20
+ dot.classList.add('bg-white/50');
21
+ }
22
+ });
23
+ }
24
+
25
+ // Next slide
26
+ function nextSlide() {
27
+ currentIndex = (currentIndex + 1) % slides.length;
28
+ updateSlider();
29
+ }
30
+
31
+ // Previous slide
32
+ function prevSlide() {
33
+ currentIndex = (currentIndex - 1 + slides.length) % slides.length;
34
+ updateSlider();
35
+ }
36
+
37
+ // Dot navigation
38
+ dots.forEach((dot, index) => {
39
+ dot.addEventListener('click', () => {
40
+ currentIndex = index;
41
+ updateSlider();
42
+ });
43
+ });
44
+
45
+ // Button events
46
+ nextBtn.addEventListener('click', nextSlide);
47
+ prevBtn.addEventListener('click', prevSlide);
48
+
49
+ // Auto slide
50
+ let slideInterval = setInterval(nextSlide, 5000);
51
+
52
+ // Pause on hover
53
+ slider.addEventListener('mouseenter', () => {
54
+ clearInterval(slideInterval);
55
+ });
56
+
57
+ slider.addEventListener('mouseleave', () => {
58
+ slideInterval = setInterval(nextSlide, 5000);
59
+ });
60
+
61
+ // Initialize first dot
62
+ dots[0].classList.add('active');
63
+ dots[0].classList.remove('bg-white/50');
64
+
65
+ // Smooth scroll for anchor links
66
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
67
+ anchor.addEventListener('click', function(e) {
68
+ e.preventDefault();
69
+
70
+ const targetId = this.getAttribute('href');
71
+ if(targetId === '#') return;
72
+
73
+ const targetElement = document.querySelector(targetId);
74
+ if(targetElement) {
75
+ window.scrollTo({
76
+ top: targetElement.offsetTop - 80,
77
+ behavior: 'smooth'
78
+ });
79
+ }
80
+ });
81
+ });
82
+
83
+ // Mobile menu toggle (handled in navbar component)
84
+ });
style.css CHANGED
@@ -1,28 +1,68 @@
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ /* Base Styles */
4
+ html {
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
  body {
9
+ font-family: 'Inter', sans-serif;
10
+ }
11
+
12
+ /* Custom Animations */
13
+ @keyframes fade-in {
14
+ from {
15
+ opacity: 0;
16
+ transform: translateY(20px);
17
+ }
18
+ to {
19
+ opacity: 1;
20
+ transform: translateY(0);
21
+ }
22
+ }
23
+
24
+ .animate-fade-in {
25
+ animation: fade-in 1s ease-out forwards;
26
  }
27
 
28
+ /* Project Card Hover Effect */
29
+ .project-card {
30
+ transition: all 0.3s ease;
31
  }
32
 
33
+ .project-card:hover {
34
+ transform: translateY(-8px);
 
 
 
35
  }
36
 
37
+ /* Service Card Icon Animation */
38
+ .service-card:hover .feather {
39
+ animation: bounce 0.5s ease;
 
 
 
40
  }
41
 
42
+ @keyframes bounce {
43
+ 0%, 100% {
44
+ transform: translateY(0);
45
+ }
46
+ 50% {
47
+ transform: translateY(-5px);
48
+ }
49
  }
50
+
51
+ /* Testimonial Slider */
52
+ .testimonial-slider {
53
+ position: relative;
54
+ }
55
+
56
+ .testimonial-slide {
57
+ transition: transform 0.5s ease;
58
+ }
59
+
60
+ .testimonial-dot.active {
61
+ background-color: white;
62
+ width: 1rem;
63
+ }
64
+
65
+ /* Form Input Focus */
66
+ input:focus, textarea:focus {
67
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
68
+ }