Spaces:
Running
Running
Lets build a landing page for a company website mesisemglobal.com Mesisem Global LLC is a international series llc headquarted and founded in delware 15 years of proven success and contiuoued experiences and emence wealth of knowleedge expertise and vast network of contracts and clients from solopenuers and startups to small buinsenss enterprises and governemnt and private confidital contracts and partnerships mesisem global llc serves as the main holding and govenring body of all business operations and systems with konweldge and expertise as well as relevant certificatoins and licesness etc in marketing and business development, ai and llm automation and prompt engineering, ai implemntation and structure cyber security, nist compliance consulting and software devleopment and production saas and security as a serice AI as a serivce systems ip and copyright blockchain and encrytption crytpto currency and fintech, devlopment and production deployment and managment company assets and investments holdings etc this landing page should embody a global successful multifacted consulting and business services company centered around safety security trust and success color pallete is future inspiured by tech and cyber space
209d25c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mesisem Global LLC | Trusted Business Solutions</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0F172A', | |
| secondary: '#1E40AF', | |
| accent: '#3B82F6', | |
| cyber: '#10B981', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-primary text-white font-sans"> | |
| <!-- Navigation Component --> | |
| <custom-nav></custom-nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary via-gray-900 to-secondary overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/technology/1200x630/42')] bg-cover opacity-20"></div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-accent to-cyber">Mesisem Global</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10"> | |
| 15 Years of Trusted Global Business Solutions & Cybersecurity Excellence | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#services" class="px-8 py-4 bg-accent hover:bg-accent/90 rounded-lg font-semibold transition-all"> | |
| Explore Services | |
| </a> | |
| <a href="#contact" class="px-8 py-4 border-2 border-white hover:bg-white/10 rounded-lg font-semibold transition-all"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#about" class="text-white"> | |
| <i data-feather="chevron-down" class="w-10 h-10"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="text-accent">Global</span> Expertise, <span class="text-cyber">Local</span> Impact | |
| </h2> | |
| <p class="text-lg mb-6"> | |
| Founded in Delaware 15 years ago, Mesisem Global LLC has grown into a premier international consulting firm with a vast network of contracts and clients spanning startups, enterprises, and government agencies. | |
| </p> | |
| <p class="text-lg mb-8"> | |
| Our wealth of knowledge and certified expertise in cybersecurity, AI implementation, fintech, and business development makes us the trusted partner for organizations worldwide. | |
| </p> | |
| <a href="#services" class="inline-flex items-center text-accent font-semibold group"> | |
| Learn more about our services | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-secondary/20 p-6 rounded-xl border border-secondary/30"> | |
| <i data-feather="shield" class="w-10 h-10 text-cyber mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Security First</h3> | |
| <p class="text-gray-300">NIST compliance and cybersecurity frameworks</p> | |
| </div> | |
| <div class="bg-secondary/20 p-6 rounded-xl border border-secondary/30"> | |
| <i data-feather="globe" class="w-10 h-10 text-accent mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Global Network</h3> | |
| <p class="text-gray-300">Trusted partnerships worldwide</p> | |
| </div> | |
| <div class="bg-secondary/20 p-6 rounded-xl border border-secondary/30"> | |
| <i data-feather="cpu" class="w-10 h-10 text-cyber mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">AI Innovation</h3> | |
| <p class="text-gray-300">Cutting-edge LLM automation</p> | |
| </div> | |
| <div class="bg-secondary/20 p-6 rounded-xl border border-secondary/30"> | |
| <i data-feather="lock" class="w-10 h-10 text-accent mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">Blockchain</h3> | |
| <p class="text-gray-300">Secure fintech solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-primary"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-accent">Comprehensive</span> Services</h2> | |
| <p class="text-xl max-w-3xl mx-auto text-gray-300"> | |
| Tailored solutions for businesses of all sizes, from startups to government agencies | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-accent border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="w-6 h-6 text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Cybersecurity</h3> | |
| <p class="text-gray-300 mb-4"> | |
| NIST compliance consulting, security as a service, and comprehensive protection frameworks. | |
| </p> | |
| <a href="#" class="text-accent font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-cyber border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-cyber/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="w-6 h-6 text-cyber"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">AI Solutions</h3> | |
| <p class="text-gray-300 mb-4"> | |
| AI implementation, LLM automation, prompt engineering, and AI as a service systems. | |
| </p> | |
| <a href="#" class="text-cyber font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-accent border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="w-6 h-6 text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Software Development</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Custom SaaS solutions, production deployment, and management of company assets. | |
| </p> | |
| <a href="#" class="text-accent font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-cyber border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-cyber/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="w-6 h-6 text-cyber"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Fintech & Blockchain</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Cryptocurrency solutions, encryption services, and financial technology development. | |
| </p> | |
| <a href="#" class="text-cyber font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-accent border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="briefcase" class="w-6 h-6 text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Business Development</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Strategic partnerships, contract negotiations, and enterprise growth solutions. | |
| </p> | |
| <a href="#" class="text-accent font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| <!-- Service Card 6 --> | |
| <div class="bg-gray-800 rounded-xl p-8 hover:border-cyber border border-gray-700 transition-all hover:-translate-y-2"> | |
| <div class="w-14 h-14 bg-cyber/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="w-6 h-6 text-cyber"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">IP & Copyright</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Intellectual property protection, copyright services, and asset management. | |
| </p> | |
| <a href="#" class="text-cyber font-medium inline-flex items-center group"> | |
| Learn more | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-secondary/10"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by <span class="text-accent">Global</span> Leaders</h2> | |
| <p class="text-xl max-w-3xl mx-auto text-gray-300"> | |
| Our clients range from innovative startups to government agencies | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-800/50 rounded-xl p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Government Official</h4> | |
| <p class="text-sm text-gray-400">Confidential Contract</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic mb-6"> | |
| "Mesisem Global's cybersecurity framework exceeded all our compliance requirements while maintaining operational efficiency." | |
| </p> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-800/50 rounded-xl p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-cyber/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-cyber"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Tech Startup CEO</h4> | |
| <p class="text-sm text-gray-400">AI Implementation</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic mb-6"> | |
| "Their AI integration transformed our operations, delivering 300% efficiency gains in just three months." | |
| </p> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-800/50 rounded-xl p-8 border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Financial Director</h4> | |
| <p class="text-sm text-gray-400">Blockchain Solutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic mb-6"> | |
| "The fintech solutions provided unmatched security and streamlined our global transactions significantly." | |
| </p> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| Ready to <span class="text-accent">Transform</span> Your Business? | |
| </h2> | |
| <p class="text-lg mb-8"> | |
| Contact our team of experts to discuss how Mesisem Global can help secure and grow your organization. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mr-4 mt-1"> | |
| <i data-feather="mail" class="w-5 h-5 text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-1">Email Us</h4> | |
| <p class="text-gray-300">contact@mesisemglobal.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-cyber/10 flex items-center justify-center mr-4 mt-1"> | |
| <i data-feather="phone" class="w-5 h-5 text-cyber"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-1">Call Us</h4> | |
| <p class="text-gray-300">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mr-4 mt-1"> | |
| <i data-feather="map-pin" class="w-5 h-5 text-accent"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-1">Headquarters</h4> | |
| <p class="text-gray-300">Delaware, United States</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-gray-800/50 rounded-xl p-8 border border-gray-700"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-all"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-all"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="company" class="block text-sm font-medium mb-2">Company</label> | |
| <input type="text" id="company" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-all"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-sm font-medium mb-2">Service Interest</label> | |
| <select id="service" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-all"> | |
| <option>Cybersecurity</option> | |
| <option>AI Solutions</option> | |
| <option>Software Development</option> | |
| <option>Fintech & Blockchain</option> | |
| <option>Business Development</option> | |
| <option>IP & Copyright</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-sm font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-all"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-4 bg-accent hover:bg-accent/90 rounded-lg font-semibold transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Components --> | |
| <script src="components/nav.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |