please create a landing page promoting a workshop for cosmetology professionals to increase their business using social media to expand their buisness and personal brand. It is a free workshop hosted by CANIPEC (https://canipec.org.mx/) in Mazatlan, Sinaloa hosted in the evening starting with orientation on Friday Oct 24th ending with a social event Oct 25. Please use best copywriting practices with scroll stopping hooks. Use vivid visuals and a clean modern design. It should include a class schedule with 2.5 hour sessions. Also a section on discounted room rates of 600mxn for 3 nights at (https://www.olasaltasinn.com.mx/) as a workshop participant (shared with another participant and limited space available). Water and light snacks provided throughout the workshop but meals not included.
1b45ad2 verified Download index.html from nairobisdrive/glowup-social-media-masterclass: direct link, hf CLI and curl.
- Browser
- Download file 20.5 kB
-
https://huggingface.co/spaces/nairobisdrive/glowup-social-media-masterclass/resolve/main/index.html
- Command line
-
hf download hf://spaces/nairobisdrive/glowup-social-media-masterclass/index.html
-
curl -L -o index.html https://huggingface.co/spaces/nairobisdrive/glowup-social-media-masterclass/resolve/main/index.html
20.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GlowUp Social Media Masterclass | CANIPEC Mazatlán</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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: '#ec4899', | |
| secondary: '#f9a8d4', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(236,72,153,0.15) 0%, rgba(255,255,255,1) 70%); | |
| } | |
| .schedule-item { | |
| border-left: 4px solid #ec4899; | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.03); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800 bg-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex-shrink-0 flex items-center"> | |
| <img class="h-8 w-auto" src="http://static.photos/cosmetic/200x200/1" alt="CANIPEC Logo"> | |
| <span class="ml-2 text-xl font-bold text-primary">GlowUp</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#schedule" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Schedule</a> | |
| <a href="#hotel" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Hotel</a> | |
| <a href="#register" class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-pink-600">Register Now</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8 items-center"> | |
| <div class="mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"> | |
| <span class="text-primary">Triple Your Bookings</span><br> | |
| With Social Media Magic | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-8"> | |
| The free 2-day workshop that will transform your cosmetology business through powerful social media strategies. Limited seats available! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#register" class="bg-primary hover:bg-pink-600 text-white px-8 py-4 rounded-full text-lg font-bold shadow-lg hover-scale text-center"> | |
| Claim Your Spot | |
| </a> | |
| <a href="#schedule" class="border-2 border-primary text-primary hover:bg-pink-50 px-8 py-4 rounded-full text-lg font-bold hover-scale text-center"> | |
| See Schedule | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="http://static.photos/cosmetic/640x360/5" alt="Social media for beauty professionals" class="rounded-lg shadow-2xl border-8 border-white transform rotate-2"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary p-2 rounded-full"> | |
| <i data-feather="calendar" class="text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-bold">Oct 24-25, 2024</p> | |
| <p class="text-sm text-gray-600">Mazatlán, Sinaloa</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover-scale"> | |
| <div class="text-4xl font-bold text-primary mb-2">100%</div> | |
| <div class="text-gray-600">Free Workshop</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover-scale"> | |
| <div class="text-4xl font-bold text-primary mb-2">5</div> | |
| <div class="text-gray-600">Expert Sessions</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover-scale"> | |
| <div class="text-4xl font-bold text-primary mb-2">2</div> | |
| <div class="text-gray-600">Networking Events</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover-scale"> | |
| <div class="text-4xl font-bold text-primary mb-2">MX$600</div> | |
| <div class="text-gray-600">Discounted Lodging</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Why This Workshop Will Transform Your Business</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <img src="http://static.photos/workspace/640x360/10" alt="Beauty professional working" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Hosted by CANIPEC - Mexico's Beauty Industry Leaders</h3> | |
| <p class="text-gray-600 mb-6"> | |
| For the first time in Mazatlán, we're bringing together top social media experts and beauty industry leaders to share the exact strategies that are working right now to grow beauty businesses. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Whether you're a hairstylist, esthetician, makeup artist, or salon owner, you'll leave with actionable strategies to attract more clients and increase your income. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-primary rounded-full p-1"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Create scroll-stopping content that converts</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-primary rounded-full p-1"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Build a loyal community that books repeat appointments</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-primary rounded-full p-1"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Position yourself as the go-to expert in your specialty</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-primary rounded-full p-1"> | |
| <i data-feather="check" class="text-white w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-gray-700">Network with other beauty professionals</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schedule Section --> | |
| <section id="schedule" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Workshop Schedule</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Two days packed with actionable strategies to grow your beauty business</p> | |
| <div class="w-20 h-1 bg-primary mx-auto"></div> | |
| </div> | |
| <!-- Day 1 --> | |
| <div class="mb-16"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Friday, October 24th</h3> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto"> | |
| <div class="p-6 bg-primary"> | |
| <h4 class="text-white font-bold text-xl">Orientation & Welcome Mixer</h4> | |
| <p class="text-pink-100">5:30 PM - 7:00 PM</p> | |
| </div> | |
| <div class="p-6 schedule-item"> | |
| <h4 class="font-bold text-lg text-gray-900 mb-2">Session 1: The Algorithm Decoded</h4> | |
| <p class="text-gray-600 mb-4">7:00 PM - 9:30 PM</p> | |
| <p class="text-gray-700"> | |
| Learn how social media algorithms really work and how to make them work for your beauty business. We'll cover Instagram, TikTok, and Facebook strategies specifically for cosmetology professionals. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Day 2 --> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Saturday, October 25th</h3> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto"> | |
| <div class="p-6 schedule-item"> | |
| <h4 class="font-bold text-lg text-gray-900 mb-2">Session 2: Content That Converts</h4> | |
| <p class="text-gray-600 mb-4">9:00 AM - 11:30 AM</p> | |
| <p class="text-gray-700"> | |
| Transform your content strategy with proven frameworks for before/afters, client testimonials, educational content, and more. Includes hands-on content creation. | |
| </p> | |
| </div> | |
| <div class="p-6 bg-gray-50 schedule-item"> | |
| <h4 class="font-bold text-lg text-gray-900 mb-2">Session 3: Hashtags & SEO for Beauty Pros</h4> | |
| <p class="text-gray-600 mb-4">12:30 PM - 3:00 PM</p> | |
| <p class="text-gray-700"> | |
| Master the art of discovery with strategic hashtag use and search optimization. Get our exclusive list of high-performing beauty hashtags. | |
| </p> | |
| </div> | |
| <div class="p-6 schedule-item"> | |
| <h4 class="font-bold text-lg text-gray-900 mb-2">Session 4: Converting Followers to Clients</h4> | |
| <p class="text-gray-600 mb-4">3:30 PM - 6:00 PM</p> | |
| <p class="text-gray-700"> | |
| Turn your social media presence into a client-generating machine with effective DM strategies, booking links, and call-to-action techniques. | |
| </p> | |
| </div> | |
| <div class="p-6 bg-primary"> | |
| <h4 class="text-white font-bold text-xl">Networking Social</h4> | |
| <p class="text-pink-100">7:00 PM - 9:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hotel Section --> | |
| <section id="hotel" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Special Lodging Offer</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Exclusive rates for workshop participants</p> | |
| <div class="w-20 h-1 bg-primary mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Olas Altas Inn - MX$600/night</h3> | |
| <p class="text-gray-600 mb-6"> | |
| We've secured special rates at this charming beachfront hotel just minutes from the workshop venue. Price includes 3 nights (shared room with another participant) - Thursday check-in, Sunday check-out. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| <span class="font-bold">Limited availability!</span> Book early to secure your spot. Water and light snacks will be provided throughout the workshop, but meals are not included. | |
| </p> | |
| <a href="https://www.olasaltasinn.com.mx/" target="_blank" class="inline-block bg-primary hover:bg-pink-600 text-white px-6 py-3 rounded-full font-medium hover-scale"> | |
| View Hotel Website | |
| </a> | |
| </div> | |
| <div class="order-1 md:order-2"> | |
| <div class="relative rounded-lg overflow-hidden shadow-xl hover-scale"> | |
| <img src="http://static.photos/travel/640x360/15" alt="Olas Altas Inn" class="w-full h-auto"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> | |
| <h4 class="text-white font-bold text-xl">Olas Altas Inn</h4> | |
| <p class="text-pink-200">Beachfront location in Mazatlán</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Past Participants Say</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover-scale"> | |
| <div class="text-yellow-400 mb-4"> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6"> | |
| "After implementing just one strategy from this workshop, I booked 8 new clients in a week. Worth every minute!" | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="Maria G." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-900">Maria G.</p> | |
| <p class="text-sm text-gray-600">Hairstylist, Guadalajara</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover-scale"> | |
| <div class="text-yellow-400 mb-4"> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6"> | |
| "The networking alone was worth it, but the content strategies have transformed how I show up online. My engagement has tripled." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/2" alt="Carlos R." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-900">Carlos R.</p> | |
| <p class="text-sm text-gray-600">Salon Owner, Monterrey</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover-scale"> | |
| <div class="text-yellow-400 mb-4"> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| <i data-feather="star" class="inline"></i> | |
| </div> | |
| <p class="text-gray-700 italic mb-6"> | |
| "I was skeptical about social media for my spa, but now I have a clear strategy and my bookings are up 40%." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/3" alt="Ana L." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-900">Ana L.</p> | |
| <p class="text-sm text-gray-600">Esthetician, CDMX</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="register" class="py-20 bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Grow Your Beauty Business?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Join us October 24-25 in Mazatlán for this exclusive free workshop. Spaces are limited to ensure personalized attention. | |
| </p> | |
| <a href="#" class="inline-block bg-white text-primary hover:bg-gray-100 px-10 py-4 rounded-full text-lg font-bold shadow-lg hover-scale"> | |
| Register Now - It's Free! | |
| </a> | |
| <p class="mt-6 text-pink-200">Brought to you by CANIPEC - Mexico's Beauty Industry Association</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">GlowUp Workshop</h3> | |
| <p class="mb-4">A CANIPEC initiative to elevate Mexico's beauty professionals through education and networking.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="hover:text-white">About the Workshop</a></li> | |
| <li><a href="#schedule" class="hover:text-white">Schedule</a></li> | |
| <li><a href="#hotel" class="hover:text-white">Hotel Information</a></li> | |
| <li><a href="#register" class="hover:text-white">Register</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-bold mb-4">Contact</h3> | |
| <p class="mb-2"><i data-feather="mail" class="inline mr-2"></i> workshops@canipec.org.mx</p> | |
| <p><i data-feather="phone" class="inline mr-2"></i> +52 669 123 4567</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center"> | |
| <p>© 2024 CANIPEC. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |