meshak13/undefined
0
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>Blunt Embarkmentz || Digital Solutions</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 black: {17 500: '#000000',18 600: '#111111',19 700: '#1a1a1a',20 800: '#222222',21 900: '#2a2a2a'22 },23 green: {24 400: '#4ade80',25 500: '#22c55e',26 600: '#16a34a',27 700: '#15803d'28 },29 blue: {30 400: '#60a5fa',31 500: '#3b82f6',32 600: '#2563eb',33 700: '#1d4ed8'34 },35 gray: {36 300: '#d1d5db',37 400: '#9ca3af',38 500: '#6b7280',39 600: '#4b5563',40 700: '#374151',41 800: '#1f2937',42 900: '#111827'43 }44 }45 }46 }47 }48 </script>49 <style>50 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');51 body {52 font-family: 'Inter', sans-serif;53 background-color: #000000;54 color: #ffffff;55 overflow-x: hidden;56 }57 ::-webkit-scrollbar {58 display: none;59 }60 html {61 scrollbar-width: none;62 -ms-overflow-style: none;63 }64 .gradient-text {65 background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);66 -webkit-background-clip: text;67 -webkit-text-fill-color: transparent;68 background-clip: text;69 }70 .service-category {71 border-radius: 16px;72 padding: 2rem;73 margin-bottom: 3rem;74 position: relative;75 overflow: hidden;76 transition: all 0.3s ease;77 }78 .service-category::before {79 content: '';80 position: absolute;81 top: 0;82 left: 0;83 right: 0;84 bottom: 0;85 background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);86 z-index: -1;87 }88 .portfolio-grid {89 display: grid;90 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));91 gap: 1.5rem;92 }93 .portfolio-item {94 position: relative;95 overflow: hidden;96 border-radius: 12px;97 transition: transform 0.3s ease;98 }99 .portfolio-item:hover {100 transform: translateY(-5px);101 }102 .portfolio-overlay {103 position: absolute;104 top: 0;105 left: 0;106 right: 0;107 bottom: 0;108 background: rgba(0, 0, 0, 0.7);109 display: flex;110 align-items: center;111 justify-content: center;112 opacity: 0;113 transition: opacity 0.3s ease;114 }115 .portfolio-item:hover .portfolio-overlay {116 opacity: 1;117 }118 .dropdown-menu {119 opacity: 0;120 visibility: hidden;121 transform: translateY(-10px);122 transition: all 0.3s ease;123 }124 .dropdown:hover .dropdown-menu {125 opacity: 1;126 visibility: visible;127 transform: translateY(0);128 }129 .mobile-menu {130 transform: translateX(-100%);131 transition: transform 0.3s ease;132 }133 .mobile-menu.open {134 transform: translateX(0);135 }136 .logo-animation {137 animation: pulse 2s infinite;138 }139 @keyframes pulse {140 0% { transform: scale(1); }141 50% { transform: scale(1.05); }142 100% { transform: scale(1); }143 }144 .service-card {145 transition: all 0.3s ease;146 border: 1px solid #374151;147 }148 .service-card:hover {149 transform: translateY(-5px);150 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);151 }152 .personal-service {153 border-left: 4px solid #22c55e;154 }155 .business-service {156 border-left: 4px solid #3b82f6;157 }158 .cannabis-service {159 border-left: 4px solid #16a34a;160 }161 .section-divider {162 height: 4px;163 background: linear-gradient(90deg, #22c55e, #3b82f6);164 margin: 4rem 0;165 border-radius: 2px;166 }167 168 /* Enhanced Animations for Digital Solutions Section */169 @keyframes pulse-slow {170 0%, 100% { opacity: 0.5; transform: scale(1); }171 50% { opacity: 0.8; transform: scale(1.1); }172 }173 174 @keyframes bounce-slow {175 0%, 100% { transform: translateY(0); }176 50% { transform: translateY(-20px); }177 }178 179 @keyframes ping-slow {180 0% { transform: scale(1); opacity: 1; }181 75%, 100% { transform: scale(2); opacity: 0; }182 }183 184 @keyframes gradient-x {185 0%, 100% { background-position: 0% 50%; }186 50% { background-position: 100% 50%; }187 }188 189 @keyframes float-1 {190 0%, 100% { transform: translate(0, 0) rotate(0deg); }191 33% { transform: translate(30px, -50px) rotate(120deg); }192 66% { transform: translate(-20px, 20px) rotate(240deg); }193 }194 195 @keyframes float-2 {196 0%, 100% { transform: translate(0, 0) rotate(0deg); }197 33% { transform: translate(-40px, 30px) rotate(180deg); }198 66% { transform: translate(20px, -30px) rotate(300deg); }199 }200 201 @keyframes float-3 {202 0%, 100% { transform: translate(0, 0) rotate(0deg); }203 33% { transform: translate(50px, 20px) rotate(90deg); }204 66% { transform: translate(-30px, -40px) rotate(270deg); }205 }206 207 @keyframes float-4 {208 0%, 100% { transform: translate(0, 0) rotate(0deg); }209 33% { transform: translate(-30px, -20px) rotate(200deg); }210 66% { transform: translate(40px, 30px) rotate(340deg); }211 }212 213 @keyframes float-5 {214 0%, 100% { transform: translate(0, 0) rotate(0deg); }215 33% { transform: translate(20px, -40px) rotate(150deg); }216 66% { transform: translate(-50px, 20px) rotate(290deg); }217 }218 219 .animate-pulse-slow {220 animation: pulse-slow 6s ease-in-out infinite;221 }222 223 .animate-bounce-slow {224 animation: bounce-slow 8s ease-in-out infinite;225 }226 227 .animate-ping-slow {228 animation: ping-slow 4s cubic-bezier(0, 0, 0.2, 1) infinite;229 }230 231 .animate-gradient-x {232 background-size: 200% 200%;233 animation: gradient-x 6s ease infinite;234 }235 236 .animate-float-1 { animation: float-1 15s ease-in-out infinite; }237 .animate-float-2 { animation: float-2 18s ease-in-out infinite; }238 .animate-float-3 { animation: float-3 12s ease-in-out infinite; }239 .animate-float-4 { animation: float-4 20s ease-in-out infinite; }240 .animate-float-5 { animation: float-5 16s ease-in-out infinite; }241 242 .particle {243 position: absolute;244 width: 4px;245 height: 4px;246 background: linear-gradient(45deg, #22c55e, #3b82f6);247 border-radius: 50%;248 opacity: 0.6;249 }250 251 .particle-1 { top: 20%; left: 10%; }252 .particle-2 { top: 60%; left: 80%; }253 .particle-3 { top: 40%; left: 60%; }254 .particle-4 { top: 80%; left: 30%; }255 .particle-5 { top: 30%; left: 90%;256 }257 258 /* Category Selection Styles */259 .category-card {260 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);261 cursor: pointer;262 position: relative;263 overflow: hidden;264 }265 266 .category-card:hover {267 transform: translateY(-10px) scale(1.03);268 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);269 }270 271 .category-card::before {272 content: '';273 position: absolute;274 top: 0;275 left: 0;276 right: 0;277 bottom: 0;278 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);279 z-index: 1;280 }281 282 .category-icon {283 transition: all 0.3s ease;284 }285 286 .category-card:hover .category-icon {287 transform: scale(1.2);288 }289 290 .category-title {291 transition: all 0.3s ease;292 }293 294 .category-card:hover .category-title {295 color: #ffffff;296 text-shadow: 0 0 20px currentColor;297 }298 299 /* Welcome Section Animation */300 .welcome-fade-in {301 opacity: 0;302 transform: translateY(30px);303 animation: fadeInUp 1s ease forwards;304 }305 306 @keyframes fadeInUp {307 to {308 opacity: 1;309 transform: translateY(0);310 }311 }312 313 .delay-1 { animation-delay: 0.2s; }314 .delay-2 { animation-delay: 0.4s; }315 .delay-3 { animation-delay: 0.6s; }316 317 /* Interactive Elements */318 .interactive-element, * {319 cursor: pointer;320 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);321 user-select: none;322 -webkit-user-select: none;323 -moz-user-select: none;324 -ms-user-select: none;325 }326 327 .interactive-element:hover, *:hover {328 transform: translateY(-2px) scale(1.02);329 filter: brightness(1.1);330 }331 332 .service-card {333 cursor: pointer;334 position: relative;335 overflow: hidden;336 }337 338 .service-card:hover {339 transform: translateY(-8px) scale(1.03);340 box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6);341 z-index: 10;342 }343 344 .service-card:active {345 transform: translateY(-2px) scale(0.98);346 }347 348 .portfolio-item {349 cursor: pointer;350 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);351 }352 353 .portfolio-item:hover {354 transform: translateY(-10px) scale(1.05);355 z-index: 10;356 }357 358 .social-icon {359 cursor: pointer;360 transition: all 0.3s ease;361 display: inline-flex;362 align-items: center;363 justify-content: center;364 padding: 8px;365 border-radius: 50%;366 }367 368 .social-icon:hover {369 transform: translateY(-5px) scale(1.2);370 background: rgba(34, 197, 94, 0.1);371 }372 373 .footer-link {374 cursor: pointer;375 transition: all 0.3s ease;376 padding: 4px 8px;377 border-radius: 4px;378 display: inline-block;379 }380 381 .footer-link:hover {382 transform: translateX(8px);383 background: rgba(34, 197, 94, 0.1);384 padding-left: 16px;385 }386 387 /* Enhanced focus states */388 *:focus {389 outline: 2px solid #22c55e;390 outline-offset: 2px;391 border-radius: 4px;392 }393 394 /* Touch device optimizations */395 @media (hover: none) {396 .interactive-element:active, *:active {397 transform: scale(0.95);398 opacity: 0.8;399 }400 }401 402 /* Animation for all elements */403 @keyframes subtle-pulse {404 0%, 100% { transform: scale(1); }405 50% { transform: scale(1.01); }406 }407 408 * {409 animation: subtle-pulse 6s ease-in-out infinite;410 }411 412 /* Enhanced selection */413 ::selection {414 background: #22c55e;415 color: white;416 text-shadow: none;417 }418 419 /* Scrollbar styling */420 ::-webkit-scrollbar {421 width: 8px;422 }423 424 ::-webkit-scrollbar-track {425 background: #1a1a1a;426 }427 428 ::-webkit-scrollbar-thumb {429 background: #22c55e;430 border-radius: 4px;431 }432 433 ::-webkit-scrollbar-thumb:hover {434 background: #16a34a;435 }436</style>437</head>438<body class="bg-black text-white">439 <!-- Hero Section with Category Selection -->440 <section class="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-black-900 via-black-800 to-black-700">441 <!-- Animated Background Elements -->442 <div class="absolute inset-0 opacity-20">443 <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-green-500 to-blue-500 rounded-full animate-pulse-slow filter blur-3xl"></div>444 <div class="absolute bottom-1/3 right-1/3 w-80 h-80 bg-gradient-to-r from-blue-600 to-green-400 rounded-full animate-bounce-slow filter blur-3xl"></div>445 <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-gradient-to-r from-green-400 to-blue-600 rounded-full animate-ping-slow filter blur-2xl"></div>446 </div>447 448 <!-- Floating Particles -->449 <div class="absolute inset-0">450 <div class="particle particle-1 animate-float-1"></div>451 <div class="particle particle-2 animate-float-2"></div>452 <div class="particle particle-3 animate-float-3"></div>453 <div class="particle particle-4 animate-float-4"></div>454 <div class="particle particle-5 animate-float-5"></div>455 </div>456 <div class="container mx-auto px-4 relative z-10">457 <div class="text-center mb-16 welcome-fade-in">458 <h1 class="text-5xl md:text-7xl font-black mb-6 bg-gradient-to-r from-green-400 via-blue-500 to-green-400 bg-clip-text text-transparent animate-gradient-x interactive-element"459 data-interactive="true"460 onclick="this.style.animationPlayState = this.style.animationPlayState === 'paused' ? 'running' : 'paused'">461 Blunt Embarkmentz462 </h1>463 <p class="text-2xl text-gray-200 max-w-3xl mx-auto leading-relaxed font-light mb-8 interactive-element"464 data-interactive="true"465 onclick="this.classList.toggle('text-yellow-400')">466 Digital Solutions for the Modern Era467 </p>468 <p class="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed font-light interactive-element"469 data-interactive="true"470 onclick="this.textContent = this.textContent.includes('Select') ? 'Choose your path to digital excellence!' : 'Select your service category to begin your journey with us'">471 Select your service category to begin your journey with us472 </p>473 </div>474 <div class="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">475 <!-- Personal Services Card -->476 <div class="category-card group relative bg-gradient-to-br from-black-800/80 to-black-900/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-green-500/30 transition-all duration-500 interactive-element" onclick="navigateToCategory('personal')">477 <div class="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>478 <div class="relative z-10 flex flex-col items-center text-center">479 <div class="w-24 h-24 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-500/25">480 <i data-feather="user" class="w-12 h-12 text-white"></i>481 </div>482 <h3 class="text-3xl font-bold mb-4 text-gray-300 category-title group-hover:text-green-400 transition-colors duration-300">483 Personal Services484 </h3>485 <p class="text-gray-400 mb-8 text-lg leading-relaxed font-light">486 Digital solutions for individuals and personal projects487 </p>488 <div class="mt-auto">489 <button class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/25 interactive-element"490 data-interactive="true"491 onmouseenter="this.textContent = 'Let\\'s Go! 🚀'"492 onmouseleave="this.textContent = 'Explore Personal'"493 onclick="navigateToCategory('personal')">494 Explore Personal495 </button>496 </div>497 </div>498 </div>499 500 <!-- Business Services Card -->501 <div class="category-card group relative bg-gradient-to-br from-black-800/80 to-black-900/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-blue-500/30 transition-all duration-500 interactive-element" onclick="navigateToCategory('business')">502 <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-green-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>503 <div class="relative z-10 flex flex-col items-center text-center">504 <div class="w-24 h-24 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-blue-500/25">505 <i data-feather="briefcase" class="w-12 h-12 text-white"></i>506 </div>507 <h3 class="text-3xl font-bold mb-4 text-gray-300 category-title group-hover:text-blue-400 transition-colors duration-300">508 Business Services509 </h3>510 <p class="text-gray-400 mb-8 text-lg leading-relaxed font-light">511 Professional solutions for small businesses and corporations512 </p>513 <div class="mt-auto">514 <button class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 interactive-element"515 data-interactive="true"516 onmouseenter="this.textContent = 'Grow Your Business 📈'"517 onmouseleave="this.textContent = 'Explore Business'"518 onclick="navigateToCategory('business')">519 Explore Business520 </button>521 </div>522 </div>523 </div>524 525 <!-- Cannabis Industry Card -->526 <div class="category-card group relative bg-gradient-to-br from-black-800/80 to-black-900/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-green-600/30 transition-all duration-500 interactive-element" onclick="navigateToCategory('cannabis')">527 <div class="absolute inset-0 bg-gradient-to-r from-green-600/10 to-blue-400/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>528 <div class="relative z-10 flex flex-col items-center text-center">529 <div class="w-24 h-24 bg-gradient-to-r from-green-600 to-green-700 rounded-2xl flex items-center justify-center mb-6 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-600/25">530 <i data-feather="shield" class="w-12 h-12 text-white"></i>531 </div>532 <h3 class="text-3xl font-bold mb-4 text-gray-300 category-title group-hover:text-green-500 transition-colors duration-300">533 Cannabis Industry534 </h3>535 <p class="text-gray-400 mb-8 text-lg leading-relaxed font-light">536 Compliance-focused solutions for cannabis businesses537 </p>538 <div class="mt-auto">539 <button class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-green-600/25 interactive-element"540 data-interactive="true"541 onmouseenter="this.textContent = 'Compliance First 🌿'"542 onmouseleave="this.textContent = 'Explore Cannabis'"543 onclick="navigateToCategory('cannabis')">544 Explore Cannabis545 </button>546 </div>547 </div>548 </div>549 </div>550 </div>551 </section>552<!-- Services Overview Section -->553 <section class="py-20 bg-gradient-to-br from-black-800 to-black-900">554 <div class="container mx-auto px-4">555 <div class="text-center mb-16">556 <h2 class="text-4xl md:text-5xl font-black mb-6 bg-gradient-to-r from-green-400 via-blue-500 to-green-400 bg-clip-text text-transparent animate-gradient-x">557 Our Comprehensive Solutions558 </h2>559 <p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed font-light interactive-element"560 data-interactive="true"561 onclick="this.textContent = this.textContent.includes('Cutting-edge') ? 'Innovative solutions that transform your digital landscape!' : 'Cutting-edge digital services designed to elevate your presence and drive measurable results'">562 Cutting-edge digital services designed to elevate your presence and drive measurable results563 </p>564</div>565 <div class="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">566 <!-- Digital Marketing Card -->567 <div class="service-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-green-500/30 transition-all duration-500 interactive-element" onclick="window.location.href='#marketing'">568 <div class="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>569 <div class="relative z-10 flex flex-col items-center text-center">570 <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-500/25">571 <i data-feather="trending-up" class="w-10 h-10 text-white"></i>572 </div>573 <h3 class="text-3xl font-bold mb-4 text-white group-hover:text-green-400 transition-colors duration-300">574 Digital Marketing575 </h3>576 <p class="text-gray-300 mb-8 text-lg leading-relaxed font-light text-center">577 Multi-channel marketing strategies that deliver exceptional ROI through targeted campaigns and data-driven optimization.578 </p>579 <ul class="space-y-3 mb-8 text-left">580 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">581 <i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>582 <span class="font-medium">SMS/Email/Push Campaigns</span>583 </li>584 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">585 <i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>586 <span class="font-medium">Social Media Management</span>587 </li>588 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">589 <i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>590 <span class="font-medium">Search Engine Campaigns</span>591 </li>592 </ul>593 </div>594 </div>595 596 <!-- Software Development Card -->597 <div class="service-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-blue-500/30 transition-all duration-500 interactive-element" onclick="window.location.href='#development'">598 <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-green-500/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>599 <div class="relative z-10 flex flex-col items-center text-center">600 <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-blue-500/25">601 <i data-feather="code" class="w-10 h-10 text-white"></i>602 </div>603 <h3 class="text-3xl font-bold mb-4 text-white group-hover:text-blue-400 transition-colors duration-300">604 Software Development605 </h3>606 <p class="text-gray-300 mb-8 text-lg leading-relaxed font-light text-center">607 Cutting-edge technology solutions powered by AI, automation, and innovative software engineering.608 </p>609 <ul class="space-y-3 mb-8 text-left">610 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">611 <i data-feather="check-circle" class="w-5 h-5 text-blue-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>612 <span class="font-medium">AI & Machine Learning</span>613 </li>614 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">615 <i data-feather="check-circle" class="w-5 h-5 text-blue-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>616 <span class="font-medium">Process Automation</span>617 </li>618 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">619 <i data-feather="check-circle" class="w-5 h-5 text-blue-500 mr-3 group-hover:scale-110 transition-transform duration-300"></i>620 <span class="font-medium">Custom Widget Development</span>621 </li>622 </ul>623 </div>624 </div>625 626 <!-- Cannabis Industry Card -->627 <div class="service-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-3xl p-8 border border-gray-800/50 hover:border-green-600/30 transition-all duration-500 interactive-element" onclick="window.location.href='#cannabis-industry'">628 <div class="absolute inset-0 bg-gradient-to-r from-green-600/10 to-blue-400/10 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>629 <div class="relative z-10 flex flex-col items-center text-center">630 <div class="w-20 h-20 bg-gradient-to-r from-green-600 to-green-700 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-600/25">631 <i data-feather="shield" class="w-10 h-10 text-white"></i>632 </div>633 <h3 class="text-3xl font-bold mb-4 text-white group-hover:text-green-500 transition-colors duration-300">634 Cannabis Industry635 </h3>636 <p class="text-gray-300 mb-8 text-lg leading-relaxed font-light text-center">637 Compliance-focused solutions for cannabis businesses. SEP Member & 2025 Grant Recipient.638 </p>639 <ul class="space-y-3 mb-8 text-left">640 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">641 <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3 group-hover:scale-110 transition-transform duration-300"></i>642 <span class="font-medium">Regulatory Compliance</span>643 </li>644 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">645 <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3 group-hover:scale-110 transition-transform duration-300"></i>646 <span class="font-medium">Business Strategy & Planning</span>647 </li>648 <li class="flex items-center text-gray-200 group-hover:text-white transition-colors duration-300 interactive-element">649 <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3 group-hover:scale-110 transition-transform duration-300"></i>650 <span class="font-medium">Packaging & Design Compliance</span>651 </li>652 </ul>653 </div>654 </div>655 </div>656 </div>657 </section>658<!-- Footer -->659 <footer class="bg-black-700 border-t border-black-800">660 <div class="container mx-auto px-4 py-12">661 <div class="grid md:grid-cols-4 gap-8">662 <!-- Company Info -->663 <div class="flex flex-col items-center text-center">664 <img src="https://huggingface.co/spaces/meshak13/undefined/resolve/main/images/BE.com+animated+logo small.gif" alt="Blunt Embarkmentz" class="h-10 mb-4 mx-auto interactive-element" autoplay loop>665 <p class="text-gray-300 mb-4 interactive-element"666 data-interactive="true"667 onclick="this.textContent = this.textContent.includes('Digital Solutions') ? 'Your trusted partner in digital innovation since 2025!' : 'Digital Solutions provider specializing in marketing campaigns, software development, and cannabis industry compliance. SEP Member & 2025 Grant Recipient.'">668 Digital Solutions provider specializing in marketing campaigns, software development, and cannabis industry compliance. SEP Member & 2025 Grant Recipient.669 </p>670<div class="flex space-x-4 justify-center">671 <a href="#" class="text-gray-400 hover:text-green-500 transition-colors social-icon interactive-element">672 <i data-feather="facebook" class="w-5 h-5"></i>673 </a>674 <a href="#" class="text-gray-400 hover:text-green-500 transition-colors social-icon interactive-element">675 <i data-feather="twitter" class="w-5 h-5"></i>676 </a>677 <a href="#" class="text-gray-400 hover:text-green-500 transition-colors social-icon interactive-element">678 <i data-feather="instagram" class="w-5 h-5"></i>679 </a>680 <a href="#" class="text-gray-400 hover:text-green-500 transition-colors social-icon interactive-element">681 <i data-feather="linkedin" class="w-5 h-5"></i>682 </a>683 </div>684 </div>685<!-- News Section -->686 <div>687 <h3 class="text-lg font-bold mb-4">News</h3>688 <ul class="space-y-2">689 <li>690 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Blogs</a>691 </li>692 <li>693 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Press Release</a>694 </li>695 <li>696 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Coming Soon</a>697 </li>698 </ul>699 </div>700<!-- Help Us Grow -->701 <div>702 <h3 class="text-lg font-bold mb-4">Help Us Grow!</h3>703 <ul class="space-y-2">704 <li>705 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Careers</a>706 </li>707 <li>708 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Internships</a>709 </li>710 <li>711 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Volunteers</a>712 </li>713 <li>714 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Use Our Technology</a>715 </li>716 </ul>717 </div>718<!-- Legal & Contact -->719 <div>720 <h3 class="text-lg font-bold mb-4">Legal</h3>721 <ul class="space-y-2 mb-6">722 <li>723 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Privacy Policy</a>724 </li>725 <li>726 <a href="#" class="text-gray-300 hover:text-green-500 transition-colors footer-link interactive-element">Terms & Conditions</a>727 </li>728 </ul>729 <h3 class="text-lg font-bold mb-4">Contact</h3>730 <ul class="space-y-2">731 <li class="text-gray-300 interactive-element">bluntembarkmentz@gmail.com</li>732 <li class="text-gray-300 interactive-element">Boston, MA</li>733 </ul>734 </div>735 </div>736 <div class="border-t border-black-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">737 <p class="text-gray-400 mb-4 md:mb-0 interactive-element"738 data-interactive="true"739 onclick="this.textContent = this.textContent.includes('© 2025') ? 'Made with 💚 in Boston' : '© 2025 Blunt Embarkmentz. All rights reserved.'">740 © 2025 Blunt Embarkmentz. All rights reserved.741 </p>742<div class="flex items-center space-x-4">743 <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors font-bold interactive-element">CUSTOMER SERVICE</a>744 <span class="text-gray-400">|</span>745 <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors interactive-element">Open 24/7</a>746 </div>747 </div>748 </div>749 </footer>750 <script>751 // Initialize Feather Icons752 feather.replace();753 754 // Category navigation function755 function navigateToCategory(category) {756 // Store the selected category in localStorage757 localStorage.setItem('selectedCategory', category);758 759 // Redirect to the appropriate page760 switch(category) {761 case 'personal':762 window.location.href = '/personal-services.html';763 break;764 case 'business':765 window.location.href = '/business-services.html';766 break;767 case 'cannabis':768 window.location.href = '/cannabis-industry.html';769 break;770 default:771 console.log('Unknown category:', category);772 }773 }774 775 // Show onboarding popup on page load776 document.addEventListener('DOMContentLoaded', function() {777 // Create onboarding popup778 function showOnboardingPopup() {779 // Check if popup has been shown in this session780 if (sessionStorage.getItem('onboardingPopupShown')) {781 return;782 }783 784 const popup = document.createElement('div');785 popup.id = 'onboarding-popup';786 popup.className = 'fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-4';787 popup.innerHTML = `788 <div class="bg-gradient-to-br from-black-800 to-black-900 rounded-3xl p-8 max-w-4xl w-full border border-gray-800 relative">789 <button id="close-popup" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">×</button>790 <div class="text-center mb-8">791 <h2 class="text-4xl font-black mb-4 bg-gradient-to-r from-green-400 via-blue-500 to-green-400 bg-clip-text text-transparent animate-gradient-x">792 Digital Solutions for the Modern Era793 </h2>794 <p class="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed font-light">795 Select your service category to begin your journey with us796 </p>797 </div>798 <div class="grid lg:grid-cols-3 gap-6">799 <!-- Personal Services Card -->800 <div class="category-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-2xl p-6 border border-gray-800/50 hover:border-green-500/30 transition-all duration-500 cursor-pointer" onclick="navigateToCategory('personal')">801 <div class="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>802 <div class="relative z-10 flex flex-col items-center text-center">803 <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-4 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-500/25">804 <i data-feather="user" class="w-10 h-10 text-white"></i>805 </div>806 <h3 class="text-2xl font-bold mb-3 text-gray-300 category-title group-hover:text-green-400 transition-colors duration-300">807 Personal Services808 </h3>809 <p class="text-gray-400 mb-6 text-base leading-relaxed font-light">810 Digital solutions for individuals and personal projects811 </p>812 <button class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/25 w-full">813 Explore Personal814 </button>815 </div>816 </div>817 818 <!-- Business Services Card -->819 <div class="category-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-2xl p-6 border border-gray-800/50 hover:border-blue-500/30 transition-all duration-500 cursor-pointer" onclick="navigateToCategory('business')">820 <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-green-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>821 <div class="relative z-10 flex flex-col items-center text-center">822 <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-4 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-blue-500/25">823 <i data-feather="briefcase" class="w-10 h-10 text-white"></i>824 </div>825 <h3 class="text-2xl font-bold mb-3 text-gray-300 category-title group-hover:text-blue-400 transition-colors duration-300">826 Business Services827 </h3>828 <p class="text-gray-400 mb-6 text-base leading-relaxed font-light">829 Professional solutions for small businesses and corporations830 </p>831 <button class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 w-full">832 Explore Business833 </button>834 </div>835 </div>836 837 <!-- Cannabis Industry Card -->838 <div class="category-card group relative bg-gradient-to-br from-black-700/80 to-black-800/90 backdrop-blur-xl rounded-2xl p-6 border border-gray-800/50 hover:border-green-600/30 transition-all duration-500 cursor-pointer" onclick="navigateToCategory('cannabis')">839 <div class="absolute inset-0 bg-gradient-to-r from-green-600/10 to-blue-400/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>840 <div class="relative z-10 flex flex-col items-center text-center">841 <div class="w-20 h-20 bg-gradient-to-r from-green-600 to-green-700 rounded-2xl flex items-center justify-center mb-4 mx-auto category-icon group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-green-600/25">842 <i data-feather="shield" class="w-10 h-10 text-white"></i>843 </div>844 <h3 class="text-2xl font-bold mb-3 text-gray-300 category-title group-hover:text-green-500 transition-colors duration-300">845 Cannabis Industry846 </h3>847 <p class="text-gray-400 mb-6 text-base leading-relaxed font-light">848 Compliance-focused solutions for cannabis businesses849 </p>850 <button class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-green-600/25 w-full">851 Explore Cannabis852 </button>853 </div>854 </div>855 </div>856 <div class="mt-8 text-center">857 <p class="text-gray-500 text-sm">Please select a category to continue</p>858 </div>859 </div>860 `;861 862 document.body.appendChild(popup);863 feather.replace();864 865 // Close popup functionality866 document.getElementById('close-popup').addEventListener('click', function() {867 popup.remove();868 sessionStorage.setItem('onboardingPopupShown', 'true');869 });870 871 // Close popup when clicking outside872 popup.addEventListener('click', function(e) {873 if (e.target === popup) {874 popup.remove();875 sessionStorage.setItem('onboardingPopupShown', 'true');876 }877 });878 879 // Prevent closing when clicking inside the popup content880 popup.querySelector('.bg-gradient-to-br').addEventListener('click', function(e) {881 e.stopPropagation();882 });883 }884 885 // Show popup after a short delay886 setTimeout(showOnboardingPopup, 500);887 });888// Add global keyboard shortcuts889 document.addEventListener('keydown', function(e) {890 // Escape key closes modals891 if (e.key === 'Escape') {892 const modal = document.querySelector('#category-modal');893 if (modal) modal.remove();894 }895 896 // Space bar toggles animations897 if (e.key === ' ' && e.target === document.body) {898 e.preventDefault();899 document.body.classList.toggle('pause-animations');900 }901 });902 903 // Add pause animations class904 const pauseStyle = document.createElement('style');905 pauseStyle.textContent = `906 body.pause-animations * {907 animation-play-state: paused !important;908 }909 `;910 document.head.appendChild(pauseStyle);911 </script>912</body>913</html>914