Hugging Face's logo

Spaces:
WeBrandex
/
inkshark-ai-powered-document-wizardry
Running

App Files Community
WeBrandex commited on
Commit
7c849a6
·
verified ·
1 Parent(s): cc7b3ff

Create a modern 3D interactive website for WeBrandex Solutions, a creative digital agency from Tanzania specializing in AI-powered business documents, branding, and investor-ready presentations.

Browse files

The design should look premium, futuristic, and bold, communicating creativity and intelligence. Use smooth 3D motion, parallax depth, and animated layers to bring the brand alive.

Important:

Use the white WeBrandex logo (PNG) in the header and hero section.

Apply WeBrandex Brand Colors consistently:

Deep navy: #00001f

Rich blue: #00105c

Neon yellow accent: #e4ff00

Silver gray: #C0C0C0

White: #ffffff

Black: #000000

Design direction:

Hero section: large 3D hero scene with glowing geometric shapes or panels that represent “ideas transforming into investor-ready documents.”

Text animation: smooth fade-up and slight depth motion on scroll.

Add glowing accents in #e4ff00 to highlight buttons and CTAs.

Include light reflections and dynamic shadows to add realism and depth.

Subtle motion on hover (cards tilt or lift slightly).

Sections:

Hero: Animated 3D headline — “We Brand Success.”
Subtext: “Investor-ready proposals, pitch decks & company profiles that win funding.”
Buttons: “Request a Quote” and “See Portfolio.”

Services: 3D icon cards for — Business Proposals, Pitch Decks, Company Profiles, Business Plans, Market Research, Branding.

Portfolio: Dynamic 3D slider or grid with hover animation and lighting.

Why Choose Us: Floating 3D text or shapes around phrases like Fast. AI-Powered. Investor-Focused.

Contact: Sleek form with glowing edges, light depth shadows, and animated background particles.

Footer: Dark background (#00001f) with the white logo and neon yellow hover effects.

Style:

Clean, minimal, cinematic, and tech-driven.

White logo on dark backgrounds.

Use motion to express innovation — not too heavy, but alive and dynamic.

Must feel like an advanced creative agency that merges AI + design + strategy.

Tone: Confident, intelligent, and forward-thinking. This is not a basic website — it should look like the future of branding and business strategy.

Files changed (3) hide show
  1. index.html +3 -2
  2. index3d.html +476 -0
  3. newsletter.html +2 -1
index.html CHANGED
@@ -54,12 +54,13 @@ nav a {
54
  <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-20">
55
  </div>
56
  <nav class="hidden md:flex items-center space-x-8">
57
- <a href="#" class="text-primary font-medium">Home</a>
 
58
  <a href="#services" class="hover:text-primary transition">Services</a>
59
  <a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
60
  <a href="newsletter.html" class="hover:text-primary transition">Newsletter</a>
61
  <a href="#contact" class="hover:text-primary transition">Contact</a>
62
- </nav>
63
  <div class="md:hidden">
64
  <button class="text-gray-600 focus:outline-none">
65
  <i data-feather="menu"></i>
 
54
  <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-20">
55
  </div>
56
  <nav class="hidden md:flex items-center space-x-8">
57
+ <a href="index3d.html" class="text-primary font-medium">3D View</a>
58
+ <a href="#" class="hover:text-primary transition">Home</a>
59
  <a href="#services" class="hover:text-primary transition">Services</a>
60
  <a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
61
  <a href="newsletter.html" class="hover:text-primary transition">Newsletter</a>
62
  <a href="#contact" class="hover:text-primary transition">Contact</a>
63
+ </nav>
64
  <div class="md:hidden">
65
  <button class="text-gray-600 focus:outline-none">
66
  <i data-feather="menu"></i>
index3d.html ADDED
@@ -0,0 +1,476 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>WeBrandex Solutions - AI-Powered Business Documents</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Space Grotesk', sans-serif;
18
+ background-color: #00001f;
19
+ color: white;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, rgba(0, 16, 92, 0.8) 0%, rgba(0, 0, 31, 1) 100%);
25
+ }
26
+
27
+ .glow-effect {
28
+ box-shadow: 0 0 20px rgba(228, 255, 0, 0.3);
29
+ }
30
+
31
+ .glow-text {
32
+ text-shadow: 0 0 10px rgba(228, 255, 0, 0.5);
33
+ }
34
+
35
+ .service-card {
36
+ transition: all 0.3s ease;
37
+ transform-style: preserve-3d;
38
+ perspective: 1000px;
39
+ }
40
+
41
+ .service-card:hover {
42
+ transform: translateY(-10px) rotateX(5deg);
43
+ box-shadow: 0 25px 50px -12px rgba(228, 255, 0, 0.25);
44
+ }
45
+
46
+ .border-glow {
47
+ border: 1px solid rgba(228, 255, 0, 0.3);
48
+ box-shadow: inset 0 0 15px rgba(228, 255, 0, 0.2), 0 0 20px rgba(228, 255, 0, 0.1);
49
+ }
50
+
51
+ #vanta-bg {
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ z-index: -1;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="antialiased">
62
+ <!-- 3D Background -->
63
+ <div id="vanta-bg"></div>
64
+
65
+ <!-- Header -->
66
+ <header class="fixed w-full z-50">
67
+ <div class="container mx-auto px-6 py-5">
68
+ <div class="flex items-center justify-between">
69
+ <div class="flex items-center">
70
+ <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-16">
71
+ </div>
72
+ <nav class="hidden md:flex items-center space-x-8">
73
+ <a href="#" class="text-white font-medium hover:text-accent transition">Home</a>
74
+ <a href="#services" class="text-white hover:text-accent transition">Services</a>
75
+ <a href="#portfolio" class="text-white hover:text-accent transition">Portfolio</a>
76
+ <a href="newsletter.html" class="text-white hover:text-accent transition">Newsletter</a>
77
+ <a href="#contact" class="text-white hover:text-accent transition">Contact</a>
78
+ </nav>
79
+ <div class="md:hidden">
80
+ <button class="text-white focus:outline-none" aria-label="Mobile menu">
81
+ <i data-feather="menu"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Hero Section -->
89
+ <section class="min-h-screen flex items-center justify-center relative overflow-hidden hero-gradient">
90
+ <div class="container mx-auto px-6">
91
+ <div class="flex flex-col md:flex-row items-center">
92
+ <div class="md:w-1/2 mb-16 md:mb-0 text-center md:text-left">
93
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 glow-text" style="line-height: 1.2;">
94
+ <span class="animate-fade-in opacity-0">We Brand</span>
95
+ <span class="text-accent animate-fade-in opacity-0" style="animation-delay: 0.3s;">Success</span>
96
+ </h1>
97
+ <p class="text-xl md:text-2xl mb-8 opacity-90 animate-fade-in opacity-0" style="animation-delay: 0.6s;">
98
+ Investor-ready proposals, pitch decks & company profiles that win funding
99
+ </p>
100
+ <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4 animate-fade-in opacity-0" style="animation-delay: 0.9s;">
101
+ <a href="#contact" class="bg-accent hover:bg-accent-dark text-black px-8 py-4 rounded-lg font-bold transition duration-300 text-center transform hover:scale-105 glow-effect">
102
+ Request a Quote
103
+ </a>
104
+ <a href="#portfolio" class="border-2 border-accent text-white hover:bg-accent hover:text-black px-8 py-4 rounded-lg font-bold transition duration-300 text-center transform hover:scale-105 glow-effect">
105
+ See Portfolio
106
+ </a>
107
+ </div>
108
+ </div>
109
+ <div class="md:w-1/2 relative">
110
+ <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_8wREBB.json" background="transparent" speed="1" style="width: 100%; height: 500px;" loop autoplay></lottie-player>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <!-- Services Section -->
117
+ <section id="services" class="py-24 bg-secondary">
118
+ <div class="container mx-auto px-6">
119
+ <div class="text-center mb-20">
120
+ <h2 class="text-4xl font-bold mb-6">Our Premium Services</h2>
121
+ <p class="text-xl max-w-2xl mx-auto opacity-90">
122
+ AI-powered solutions tailored for Tanzanian businesses seeking funding
123
+ </p>
124
+ </div>
125
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
126
+ <!-- Service Card 1 -->
127
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
128
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
129
+ <i data-feather="file-text" class="text-accent w-10 h-10"></i>
130
+ </div>
131
+ <h3 class="text-2xl font-bold text-center mb-4">Business Proposals</h3>
132
+ <p class="text-center opacity-90">
133
+ Compelling proposals that clearly communicate your value proposition and secure deals.
134
+ </p>
135
+ </div>
136
+
137
+ <!-- Service Card 2 -->
138
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
139
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
140
+ <i data-feather="layers" class="text-accent w-10 h-10"></i>
141
+ </div>
142
+ <h3 class="text-2xl font-bold text-center mb-4">Pitch Decks</h3>
143
+ <p class="text-center opacity-90">
144
+ Visually stunning presentations that captivate investors and tell your business story.
145
+ </p>
146
+ </div>
147
+
148
+ <!-- Service Card 3 -->
149
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
150
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
151
+ <i data-feather="book-open" class="text-accent w-10 h-10"></i>
152
+ </div>
153
+ <h3 class="text-2xl font-bold text-center mb-4">Business Plans</h3>
154
+ <p class="text-center opacity-90">
155
+ Comprehensive strategic documents that outline your roadmap to success.
156
+ </p>
157
+ </div>
158
+
159
+ <!-- Service Card 4 -->
160
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
161
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
162
+ <i data-feather="user" class="text-accent w-10 h-10"></i>
163
+ </div>
164
+ <h3 class="text-2xl font-bold text-center mb-4">Company Profiles</h3>
165
+ <p class="text-center opacity-90">
166
+ Professional profiles that showcase your company's strengths and achievements.
167
+ </p>
168
+ </div>
169
+
170
+ <!-- Service Card 5 -->
171
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
172
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
173
+ <i data-feather="bar-chart-2" class="text-accent w-10 h-10"></i>
174
+ </div>
175
+ <h3 class="text-2xl font-bold text-center mb-4">Market Research</h3>
176
+ <p class="text-center opacity-90">
177
+ Data-driven insights about your industry, competitors, and target market.
178
+ </p>
179
+ </div>
180
+
181
+ <!-- Service Card 6 -->
182
+ <div class="service-card bg-primary bg-opacity-20 p-8 rounded-xl border-glow backdrop-blur-sm">
183
+ <div class="w-20 h-20 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-6 mx-auto">
184
+ <i data-feather="image" class="text-accent w-10 h-10"></i>
185
+ </div>
186
+ <h3 class="text-2xl font-bold text-center mb-4">Branding & Visuals</h3>
187
+ <p class="text-center opacity-90">
188
+ Distinctive visual identity that makes your business memorable and professional.
189
+ </p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Why Choose Us Section -->
196
+ <section class="py-24 bg-gradient-to-b from-primary to-secondary">
197
+ <div class="container mx-auto px-6">
198
+ <div class="flex flex-col lg:flex-row items-center">
199
+ <div class="lg:w-1/2 mb-16 lg:mb-0 lg:pr-16 relative">
200
+ <div class="relative">
201
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-accent rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
202
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-primary rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
203
+ <div class="relative">
204
+ <img src="http://static.photos/workspace/1024x576/5" alt="Team working" class="rounded-xl border-glow w-full">
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="lg:w-1/2">
209
+ <h2 class="text-4xl font-bold mb-8">Why Tanzanian Businesses Choose WeBrandex</h2>
210
+ <div class="space-y-8">
211
+ <div class="flex items-start">
212
+ <div class="flex-shrink-0 mt-1">
213
+ <div class="w-12 h-12 rounded-full bg-accent bg-opacity-20 flex items-center justify-center">
214
+ <i data-feather="zap" class="text-accent w-6 h-6"></i>
215
+ </div>
216
+ </div>
217
+ <div class="ml-6">
218
+ <h3 class="text-xl font-bold mb-2">Fast, Investor-Focused Deliverables</h3>
219
+ <p class="opacity-90">
220
+ We prioritize what investors care about most, delivering documents that get results quickly.
221
+ </p>
222
+ </div>
223
+ </div>
224
+ <div class="flex items-start">
225
+ <div class="flex-shrink-0 mt-1">
226
+ <div class="w-12 h-12 rounded-full bg-accent bg-opacity-20 flex items-center justify-center">
227
+ <i data-feather="cpu" class="text-accent w-6 h-6"></i>
228
+ </div>
229
+ </div>
230
+ <div class="ml-6">
231
+ <h3 class="text-xl font-bold mb-2">AI-Accelerated Research & Design</h3>
232
+ <p class="opacity-90">
233
+ Our proprietary AI tools streamline research and design for faster, data-backed results.
234
+ </p>
235
+ </div>
236
+ </div>
237
+ <div class="flex items-start">
238
+ <div class="flex-shrink-0 mt-1">
239
+ <div class="w-12 h-12 rounded-full bg-accent bg-opacity-20 flex items-center justify-center">
240
+ <i data-feather="map-pin" class="text-accent w-6 h-6"></i>
241
+ </div>
242
+ </div>
243
+ <div class="ml-6">
244
+ <h3 class="text-xl font-bold mb-2">Deep Tanzanian Market Knowledge</h3>
245
+ <p class="opacity-90">
246
+ We understand local business culture and investor expectations better than anyone.
247
+ </p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Portfolio Section -->
257
+ <section id="portfolio" class="py-24">
258
+ <div class="container mx-auto px-6">
259
+ <div class="text-center mb-20">
260
+ <h2 class="text-4xl font-bold mb-6">Our Work Speaks Volumes</h2>
261
+ <p class="text-xl max-w-2xl mx-auto opacity-90">
262
+ See samples of our investor-ready documents that have helped clients secure funding
263
+ </p>
264
+ </div>
265
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
266
+ <!-- Portfolio Item 1 -->
267
+ <div class="group overflow-hidden rounded-xl border-glow hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
268
+ <div class="h-64 overflow-hidden relative">
269
+ <img src="http://static.photos/finance/640x360/1" alt="Pitch Deck Sample" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
270
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
271
+ </div>
272
+ <div class="p-6">
273
+ <h3 class="text-2xl font-bold mb-2">Tech Startup Pitch Deck</h3>
274
+ <p class="opacity-90 mb-4">Helped secure $500K in seed funding</p>
275
+ <a href="#" class="text-accent font-medium flex items-center">
276
+ View Project <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
277
+ </a>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Portfolio Item 2 -->
282
+ <div class="group overflow-hidden rounded-xl border-glow hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
283
+ <div class="h-64 overflow-hidden relative">
284
+ <img src="http://static.photos/office/640x360/2" alt="Company Profile Sample" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
285
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
286
+ </div>
287
+ <div class="p-6">
288
+ <h3 class="text-2xl font-bold mb-2">Manufacturing Company Profile</h3>
289
+ <p class="opacity-90 mb-4">Used to secure distributor partnerships</p>
290
+ <a href="#" class="text-accent font-medium flex items-center">
291
+ View Project <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
292
+ </a>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Portfolio Item 3 -->
297
+ <div class="group overflow-hidden rounded-xl border-glow hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
298
+ <div class="h-64 overflow-hidden relative">
299
+ <img src="http://static.photos/technology/640x360/3" alt="Business Plan Sample" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
300
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
301
+ </div>
302
+ <div class="p-6">
303
+ <h3 class="text-2xl font-bold mb-2">Agriculture Business Plan</h3>
304
+ <p class="opacity-90 mb-4">Approved for government grant funding</p>
305
+ <a href="#" class="text-accent font-medium flex items-center">
306
+ View Project <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
307
+ </a>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ <div class="text-center mt-16">
312
+ <a href="#" class="inline-block border-2 border-accent text-white hover:bg-accent hover:text-black px-8 py-4 rounded-lg font-bold transition duration-300 transform hover:scale-105">
313
+ View All Projects
314
+ </a>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Contact Section -->
320
+ <section id="contact" class="py-24 relative overflow-hidden">
321
+ <div class="absolute inset-0 opacity-10">
322
+ <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_2cwDXD.json" background="transparent" speed="1" loop autoplay></lottie-player>
323
+ </div>
324
+ <div class="container mx-auto px-6 relative">
325
+ <div class="flex flex-col lg:flex-row">
326
+ <div class="lg:w-1/2 mb-16 lg:mb-0 lg:pr-16">
327
+ <h2 class="text-4xl font-bold mb-8">Ready to Transform Your Business Documents?</h2>
328
+ <p class="text-xl opacity-90 mb-8">
329
+ Get in touch with our team to discuss how we can create investor-ready documents that help you secure funding and grow your business.
330
+ </p>
331
+ <div class="space-y-8">
332
+ <div class="flex items-start">
333
+ <i data-feather="phone" class="w-8 h-8 mt-1 mr-6 text-accent"></i>
334
+ <div>
335
+ <h3 class="text-xl font-bold mb-2">Phone</h3>
336
+ <p class="opacity-90">+255 688 372 118</p>
337
+ <p class="opacity-90">+255 741 647 878</p>
338
+ </div>
339
+ </div>
340
+ <div class="flex items-start">
341
+ <i data-feather="mail" class="w-8 h-8 mt-1 mr-6 text-accent"></i>
342
+ <div>
343
+ <h3 class="text-xl font-bold mb-2">Email</h3>
344
+ <p class="opacity-90">webrandextz@gmail.com</p>
345
+ </div>
346
+ </div>
347
+ <div class="flex items-start">
348
+ <i data-feather="map-pin" class="w-8 h-8 mt-1 mr-6 text-accent"></i>
349
+ <div>
350
+ <h3 class="text-xl font-bold mb-2">Location</h3>
351
+ <p class="opacity-90">Dar es Salaam, Tanzania</p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <div class="lg:w-1/2 bg-primary bg-opacity-20 rounded-xl border-glow backdrop-blur-sm p-10">
357
+ <h3 class="text-3xl font-bold mb-8">Send Us a Message</h3>
358
+ <form>
359
+ <div class="mb-6">
360
+ <label for="name" class="block text-lg font-medium mb-3">Your Name</label>
361
+ <input type="text" id="name" class="w-full px-6 py-4 bg-primary bg-opacity-20 border border-accent border-opacity-30 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-400">
362
+ </div>
363
+ <div class="mb-6">
364
+ <label for="email" class="block text-lg font-medium mb-3">Email Address</label>
365
+ <input type="email" id="email" class="w-full px-6 py-4 bg-primary bg-opacity-20 border border-accent border-opacity-30 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-400">
366
+ </div>
367
+ <div class="mb-6">
368
+ <label for="service" class="block text-lg font-medium mb-3">Service Needed</label>
369
+ <select id="service" class="w-full px-6 py-4 bg-primary bg-opacity-20 border border-accent border-opacity-30 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent text-white">
370
+ <option value="" disabled selected>Select a service</option>
371
+ <option value="proposals">Business Proposals</option>
372
+ <option value="pitch-decks">Pitch Decks</option>
373
+ <option value="plans">Business Plans</option>
374
+ <option value="profiles">Company Profiles</option>
375
+ <option value="research">Market Research</option>
376
+ <option value="branding">Branding & Visuals</option>
377
+ </select>
378
+ </div>
379
+ <div class="mb-6">
380
+ <label for="message" class="block text-lg font-medium mb-3">Message</label>
381
+ <textarea id="message" rows="4" class="w-full px-6 py-4 bg-primary bg-opacity-20 border border-accent border-opacity-30 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-400"></textarea>
382
+ </div>
383
+ <button type="submit" class="w-full bg-accent hover:bg-accent-dark text-black px-8 py-4 rounded-lg font-bold transition duration-300 transform hover:scale-105 glow-effect">
384
+ Send Message
385
+ </button>
386
+ </form>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </section>
391
+
392
+ <!-- Footer -->
393
+ <footer class="bg-secondary py-16">
394
+ <div class="container mx-auto px-6">
395
+ <div class="flex flex-col md:flex-row justify-between items-center">
396
+ <div class="mb-8 md:mb-0">
397
+ <div class="flex items-center space-x-4">
398
+ <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-12">
399
+ <span class="text-2xl font-bold">WeBrandex Solutions</span>
400
+ </div>
401
+ <p class="mt-4 opacity-90 max-w-md">
402
+ We Brand Success through AI-powered documents and branding.
403
+ </p>
404
+ </div>
405
+ <div class="flex space-x-6">
406
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center hover:bg-accent hover:text-black transition">
407
+ <i data-feather="facebook" class="w-5 h-5"></i>
408
+ </a>
409
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center hover:bg-accent hover:text-black transition">
410
+ <i data-feather="twitter" class="w-5 h-5"></i>
411
+ </a>
412
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center hover:bg-accent hover:text-black transition">
413
+ <i data-feather="linkedin" class="w-5 h-5"></i>
414
+ </a>
415
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center hover:bg-accent hover:text-black transition">
416
+ <i data-feather="instagram" class="w-5 h-5"></i>
417
+ </a>
418
+ </div>
419
+ </div>
420
+ <div class="border-t border-white border-opacity-20 mt-12 pt-8 text-center opacity-80">
421
+ <p>&copy; 2025 WeBrandex Solutions. All rights reserved.</p>
422
+ </div>
423
+ </div>
424
+ </footer>
425
+
426
+ <script>
427
+ // Initialize Vanta.js background
428
+ VANTA.NET({
429
+ el: "#vanta-bg",
430
+ mouseControls: true,
431
+ touchControls: true,
432
+ gyroControls: false,
433
+ minHeight: 200.00,
434
+ minWidth: 200.00,
435
+ scale: 1.00,
436
+ scaleMobile: 1.00,
437
+ color: 0x00105c,
438
+ backgroundColor: 0x00001f,
439
+ points: 10.00,
440
+ maxDistance: 20.00,
441
+ spacing: 15.00
442
+ });
443
+
444
+ // Initialize feather icons
445
+ feather.replace();
446
+
447
+ // Smooth scrolling for anchor links
448
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
449
+ anchor.addEventListener('click', function (e) {
450
+ e.preventDefault();
451
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
452
+ behavior: 'smooth'
453
+ });
454
+ });
455
+ });
456
+
457
+ // Animation on scroll
458
+ document.addEventListener('DOMContentLoaded', () => {
459
+ const animateElements = document.querySelectorAll('.animate-fade-in');
460
+
461
+ const observer = new IntersectionObserver((entries) => {
462
+ entries.forEach(entry => {
463
+ if (entry.isIntersecting) {
464
+ entry.target.classList.add('opacity-100');
465
+ observer.unobserve(entry.target);
466
+ }
467
+ });
468
+ }, { threshold: 0.1 });
469
+
470
+ animateElements.forEach(el => {
471
+ observer.observe(el);
472
+ });
473
+ });
474
+ </script>
475
+ </body>
476
+ </html>
newsletter.html CHANGED
@@ -37,12 +37,13 @@ nav a {
37
  <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-20">
38
  </div>
39
  <nav class="hidden md:flex items-center space-x-8">
 
40
  <a href="index.html" class="hover:text-primary transition">Home</a>
41
  <a href="index.html#services" class="hover:text-primary transition">Services</a>
42
  <a href="index.html#portfolio" class="hover:text-primary transition">Portfolio</a>
43
  <a href="newsletter.html" class="text-primary font-medium">Newsletter</a>
44
  <a href="index.html#contact" class="hover:text-primary transition">Contact</a>
45
- </nav>
46
  <div class="md:hidden">
47
  <button class="text-gray-600 focus:outline-none">
48
  <i data-feather="menu"></i>
 
37
  <img src="https://huggingface.co/spaces/WeBrandex/inkshark-ai-powered-document-wizardry/resolve/main/images/2.png" alt="WeBrandex Logo" class="h-20">
38
  </div>
39
  <nav class="hidden md:flex items-center space-x-8">
40
+ <a href="index3d.html" class="hover:text-primary transition">3D View</a>
41
  <a href="index.html" class="hover:text-primary transition">Home</a>
42
  <a href="index.html#services" class="hover:text-primary transition">Services</a>
43
  <a href="index.html#portfolio" class="hover:text-primary transition">Portfolio</a>
44
  <a href="newsletter.html" class="text-primary font-medium">Newsletter</a>
45
  <a href="index.html#contact" class="hover:text-primary transition">Contact</a>
46
+ </nav>
47
  <div class="md:hidden">
48
  <button class="text-gray-600 focus:outline-none">
49
  <i data-feather="menu"></i>