Spaces:
Running
Running
Clone website https://axeno.co/ put the name creopulse with Them of Red and with services details Our company is a leading provider of comprehensive services in the healthcare and creative industries, specializing in medical content writing, creative designing, digital marketing, public relations support, and event management. We are dedicated to offering end-to-end solutions that help healthcare organizations and brands effectively communicate and engage with their target audiences. Medical Content Writing We excel in delivering high-quality medical content across various formats, including medical newsletters, label writing (LBL), articles, and more. Our team of experienced medical writers ensures that all content is accurate, informative, and tailored to meet the specific needs of the healthcare sector. Creative Designing Our creative design services are focused on delivering visually engaging and impactful designs that enhance brand identity and communication. We specialize in the design of gimmick labels, visual aids, logos, and brochures, ensuring that each design is unique and aligned with the client’s goals. Digital Marketing In the realm of digital marketing, we offer a broad range of services including the creation of 2D and 3D videos, real character films, and website development. We also specialize in designing and executing dynamic digital campaigns to boost online visibility and engagement for healthcare brands and organizations. Public Relations Support Our PR services include comprehensive media outreach and support, such as securing radio and television placements to ensure maximum exposure for our clients. We work diligently to build strong relationships with the media and enhance our client’s presence in key media channels. Event Management We are experts in end-to-end event management, handling everything from conceptualization and planning to execution. We have experience organizing high-profile events, including the prestigious Asia Book of Records, ensuring seamless and memorable experiences for our clients. Publication Support In addition to our content and design services, we provide publication support, helping healthcare organizations manage their printed and digital publications. This includes assisting with the production, editing, and distribution of materials to ensure the highest standards of quality and consistent , create all the linked pages with Contact us Details form Digital Consulting encompassing services such as mobile application development and web application development. Ensure that the addition of this new page does not affect the functionality or content of the current pages within the 'What We Do' section or any other sections of the website ### AI-Powered Chatbot - Created a floating chat button that appears on all pages - Implemented an AI assistant using the AI SDK with OpenAI integration - The chatbot can answer questions about CreoPulse's services - Designed a modern chat interface with user and assistant messages clearly distinguished - Added loading states for a better user experience ### 2. WhatsApp Integration - Added a "Continue on WhatsApp" button in the chatbot that transfers the conversation - The WhatsApp integration preserves the conversation history when transferring - Created a dedicated WhatsApp button component for the contact page - The WhatsApp integration uses the business phone number for direct communication ### 3. Additional Features - Created a FAQ page that showcases common questions and encourages users to use the chatbot - Updated the contact page with WhatsApp and direct call options - Added a link to the FAQ page in the footer navigation - Ensured the chatbot is accessible and works on all devices - Initial Deployment
5757169 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CreoPulse - Healthcare & Creative Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#e63946', | |
| secondary: '#1d3557', | |
| accent: '#457b9d', | |
| light: '#f1faee', | |
| dark: '#1a1a1a', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(230,57,70,0.9) 0%, rgba(29,53,87,0.9) 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chatbot-container { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 1000; | |
| } | |
| .chatbot-button { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background-color: #25D366; | |
| color: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .chatbot-button:hover { | |
| transform: scale(1.1); | |
| } | |
| .chatbot-window { | |
| width: 350px; | |
| height: 500px; | |
| background-color: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| display: none; | |
| flex-direction: column; | |
| } | |
| .chatbot-header { | |
| background-color: #e63946; | |
| color: white; | |
| padding: 15px; | |
| font-weight: bold; | |
| } | |
| .chatbot-messages { | |
| flex-grow: 1; | |
| padding: 15px; | |
| overflow-y: auto; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| max-width: 80%; | |
| padding: 10px 15px; | |
| border-radius: 18px; | |
| } | |
| .user-message { | |
| background-color: #f1faee; | |
| margin-left: auto; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .bot-message { | |
| background-color: #e63946; | |
| color: white; | |
| margin-right: auto; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .chatbot-input { | |
| padding: 15px; | |
| border-top: 1px solid #eee; | |
| } | |
| .loading-dots { | |
| display: inline-block; | |
| } | |
| .loading-dots span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: white; | |
| margin: 0 2px; | |
| opacity: 0; | |
| animation: loading 1.4s infinite ease-in-out; | |
| } | |
| .loading-dots span:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .loading-dots span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .loading-dots span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes loading { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| .whatsapp-button { | |
| background-color: #25D366; | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 10px; | |
| cursor: pointer; | |
| } | |
| .whatsapp-button:hover { | |
| background-color: #128C7E; | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-dark"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-primary">Creo<span class="text-secondary">Pulse</span></a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="text-gray-800 hover:text-primary transition">Home</a> | |
| <a href="#services" class="text-gray-800 hover:text-primary transition">Services</a> | |
| <a href="#about" class="text-gray-800 hover:text-primary transition">About</a> | |
| <a href="#contact" class="text-gray-800 hover:text-primary transition">Contact</a> | |
| <a href="faq.html" class="text-gray-800 hover:text-primary transition">FAQ</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden focus:outline-none"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="mobile-menu" class="mobile-menu md:hidden"> | |
| <div class="px-2 pt-2 pb-4 space-y-1"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Home</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Services</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">About</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Contact</a> | |
| <a href="faq.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-32 pb-20 hero-gradient text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Innovative Solutions for Healthcare & Creative Industries</h1> | |
| <p class="text-xl mb-8">We deliver comprehensive services that help organizations communicate effectively and engage their audiences.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#services" class="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Our Services</a> | |
| <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition">Contact Us</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Healthcare and Creative Solutions" class="rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">Our Services</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive solutions tailored to meet your healthcare and creative communication needs.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Medical Content Writing --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-pen-fancy text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">Medical Content Writing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">We excel in delivering high-quality medical content across various formats, including medical newsletters, label writing (LBL), articles, and more.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>Medical newsletters</li> | |
| <li>Label writing (LBL)</li> | |
| <li>Scientific articles</li> | |
| <li>Patient education materials</li> | |
| </ul> | |
| <a href="medical-content.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Creative Designing --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-paint-brush text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">Creative Designing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Our creative design services deliver visually engaging and impactful designs that enhance brand identity and communication.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>Gimmick labels</li> | |
| <li>Visual aids</li> | |
| <li>Logos and branding</li> | |
| <li>Brochures and marketing materials</li> | |
| </ul> | |
| <a href="creative-design.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Digital Marketing --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-bullhorn text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">Digital Marketing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">We offer a broad range of digital marketing services to boost online visibility and engagement for healthcare brands.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>2D and 3D videos</li> | |
| <li>Real character films</li> | |
| <li>Website development</li> | |
| <li>Digital campaigns</li> | |
| </ul> | |
| <a href="digital-marketing.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- PR Support --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-newspaper text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">PR Support</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Our PR services include comprehensive media outreach and support to ensure maximum exposure for our clients.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>Media outreach</li> | |
| <li>Radio and TV placements</li> | |
| <li>Press releases</li> | |
| <li>Media relations</li> | |
| </ul> | |
| <a href="pr-support.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Event Management --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-calendar-alt text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">Event Management</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">We are experts in end-to-end event management, handling everything from conceptualization to execution.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>Conceptualization</li> | |
| <li>Planning and coordination</li> | |
| <li>Execution</li> | |
| <li>High-profile events</li> | |
| </ul> | |
| <a href="event-management.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Digital Consulting --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-laptop-code text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary">Digital Consulting</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Our digital consulting services help businesses transform their digital presence with cutting-edge solutions.</p> | |
| <ul class="list-disc pl-5 text-gray-600 mb-4"> | |
| <li>Mobile app development</li> | |
| <li>Web app development</li> | |
| <li>Digital strategy</li> | |
| <li>Technology consulting</li> | |
| </ul> | |
| <a href="digital-consulting.html" class="text-primary font-semibold hover:underline">Learn more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our Team" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-secondary">About CreoPulse</h2> | |
| <p class="text-lg text-gray-600 mb-6">CreoPulse is a leading provider of comprehensive services in the healthcare and creative industries. We specialize in delivering end-to-end solutions that help organizations effectively communicate and engage with their target audiences.</p> | |
| <p class="text-lg text-gray-600 mb-6">Our team of experienced professionals is dedicated to excellence, combining industry knowledge with creative expertise to deliver outstanding results for our clients.</p> | |
| <div class="flex space-x-4"> | |
| <div class="bg-primary text-white px-6 py-3 rounded-lg font-semibold">50+ Clients</div> | |
| <div class="bg-secondary text-white px-6 py-3 rounded-lg font-semibold">100+ Projects</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">What Our Clients Say</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Hear from organizations that have partnered with us.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"CreoPulse transformed our medical content strategy. Their writers have deep subject matter expertise and deliver consistently high-quality work."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 w-12 h-12 rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Dr. Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">Medical Director, HealthPlus</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The digital marketing campaign created by CreoPulse exceeded our expectations. Their creative approach and attention to detail were exceptional."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 w-12 h-12 rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Marketing Director, PharmaCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Their event management team flawlessly executed our product launch. The attention to detail and professionalism was outstanding."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 w-12 h-12 rounded-full mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Lisa Rodriguez</h4> | |
| <p class="text-gray-500 text-sm">CEO, MediTech Solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-secondary text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2> | |
| <p class="text-lg max-w-2xl mx-auto">Ready to discuss your project? Contact us today and let's create something amazing together.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Our Office</h4> | |
| <p>123 Business Avenue, Suite 456<br>New York, NY 10001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email Us</h4> | |
| <p>info@creopulse.com<br>support@creopulse.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Call Us</h4> | |
| <p>+1 (555) 123-4567<br>Mon-Fri, 9am-6pm EST</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="text-xl font-bold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white text-secondary w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-white text-secondary w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-white text-secondary w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-white text-secondary w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="whatsapp-button"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> | |
| <span>Chat on WhatsApp</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-white rounded-xl shadow-lg p-8 text-gray-800"> | |
| <h3 class="text-2xl font-bold mb-6 text-secondary">Send Us a Message</h3> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="John Doe"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="john@example.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="+1 (555) 123-4567"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label> | |
| <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select a service</option> | |
| <option value="medical-content">Medical Content Writing</option> | |
| <option value="creative-design">Creative Designing</option> | |
| <option value="digital-marketing">Digital Marketing</option> | |
| <option value="pr-support">PR Support</option> | |
| <option value="event-management">Event Management</option> | |
| <option value="digital-consulting">Digital Consulting</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tell us about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg font-semibold hover:bg-red-600 transition">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Page (hidden, linked in footer) --> | |
| <div id="faq-page" style="display: none;"> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">Frequently Asked Questions</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Find answers to common questions about our services.</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">General Questions</h3> | |
| <div class="space-y-4"> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-gray-800"> | |
| <span>What industries do you specialize in?</span> | |
| <i class="fas fa-chevron-down text-primary"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| We specialize in the healthcare and creative industries, providing tailored solutions for medical organizations, pharmaceutical companies, healthcare providers, and creative brands. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-gray-800"> | |
| <span>How do I get started with your services?</span> | |
| <i class="fas fa-chevron-down text-primary"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| Getting started is easy! Simply contact us through our website, email, or phone. We'll schedule a consultation to discuss your needs and provide a customized proposal. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold mb-4 text-primary">Service-Specific Questions</h3> | |
| <div class="space-y-4"> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-gray-800"> | |
| <span>What qualifications do your medical writers have?</span> | |
| <i class="fas fa-chevron-down text-primary"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| Our medical writers hold advanced degrees in life sciences or medicine, with extensive experience in medical communications. Many have clinical practice backgrounds and are trained in regulatory writing standards. | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-gray-800"> | |
| <span>Can you handle large-scale events?</span> | |
| <i class="fas fa-chevron-down text-primary"></i> | |
| </button> | |
| <div class="mt-2 text-gray-600"> | |
| Absolutely! We have experience managing events of all sizes, from intimate meetings to large conferences with thousands of attendees. Our team has successfully organized high-profile events including the Asia Book of Records. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <p class="text-lg mb-6">Didn't find your answer? Our AI assistant can help!</p> | |
| <button id="open-chatbot-faq" class="bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-600 transition">Chat with Our Assistant</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Creo<span class="text-primary">Pulse</span></h3> | |
| <p class="text-gray-400">Innovative solutions for healthcare and creative industries.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="medical-content.html" class="text-gray-400 hover:text-white transition">Medical Content Writing</a></li> | |
| <li><a href="creative-design.html" class="text-gray-400 hover:text-white transition">Creative Designing</a></li> | |
| <li><a href="digital-marketing.html" class="text-gray-400 hover:text-white transition">Digital Marketing</a></li> | |
| <li><a href="pr-support.html" class="text-gray-400 hover:text-white transition">PR Support</a></li> | |
| <li><a href="event-management.html" class="text-gray-400 hover:text-white transition">Event Management</a></li> | |
| <li><a href="digital-consulting.html" class="text-gray-400 hover:text-white transition">Digital Consulting</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Our Services</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| <li><a href="faq.html" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mr-3 mt-1 text-primary"></i> | |
| <span>123 Business Avenue, Suite 456<br>New York, NY 10001</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-primary"></i> | |
| <span>+1 (555) 123-4567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-primary"></i> | |
| <span>info@creopulse.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 CreoPulse. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chatbot --> | |
| <div class="chatbot-container"> | |
| <div id="chatbot-window" class="chatbot-window"> | |
| <div class="chatbot-header"> | |
| <div class="flex justify-between items-center"> | |
| <span>CreoPulse Assistant</span> | |
| <button id="close-chatbot" class="text-white focus:outline-none"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="chatbot-messages" class="chatbot-messages"> | |
| <div class="message bot-message"> | |
| Hello! I'm the CreoPulse assistant. How can I help you today? | |
| </div> | |
| </div> | |
| <div class="chatbot-input"> | |
| <div class="flex"> | |
| <input id="chatbot-input" type="text" placeholder="Type your message..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button id="send-message" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-red-600 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div id="whatsapp-transfer" class="whatsapp-button mt-3 hidden"> | |
| <i class="fab fa-whatsapp mr-2"></i> | |
| <span>Continue on WhatsApp</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="chatbot-button" class="chatbot-button"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Chatbot functionality | |
| const chatbotButton = document.getElementById('chatbot-button'); | |
| const chatbotWindow = document.getElementById('chatbot-window'); | |
| const closeChatbot = document.getElementById('close-chatbot'); | |
| const sendMessageButton = document.getElementById('send-message'); | |
| const chatbotInput = document.getElementById('chatbot-input'); | |
| const chatbotMessages = document.getElementById('chatbot-messages'); | |
| const whatsappTransfer = document.getElementById('whatsapp-transfer'); | |
| const openChatbotFaq = document.getElementById('open-chatbot-faq'); | |
| let isChatbotOpen = false; | |
| chatbotButton.addEventListener('click', () => { | |
| isChatbotOpen = !isChatbotOpen; | |
| chatbotWindow.style.display = isChatbotOpen ? 'flex' : 'none'; | |
| }); | |
| closeChatbot.addEventListener('click', () => { | |
| isChatbotOpen = false; | |
| chatbotWindow.style.display = 'none'; | |
| }); | |
| openChatbotFaq?.addEventListener('click', () => { | |
| isChatbotOpen = true; | |
| chatbotWindow.style.display = 'flex'; | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KumarMalaysingh/creopulse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |