{/* Adjust the width and height as needed */}\n \n \n \n
\n {isMenuOpen && (\n \n )}\n \n
\n );\n};\n\nexport default ContactForm;","import React from 'react';\n\nconst AboutUs = () => {\n return (\n \n
\n 103 S Newtown Street Rd
\n Newtown Square, PA 19073\n \n\n
\n Contact Us
\n \n \n snails.beautyplace@gmail.com\n 103 S Newtown Street Rd
\n Newtown Square, PA 19073\n \n\n
\n
\n\n\n Questions?
\n \n\n
\n \n
\n \n );\n};\n\nexport default AboutUs;","import React from 'react';\nimport Slider from 'react-slick';\n\nconst Gallery = () => {\n const images = [\n '/SalonPic1.JPG',\n '/SalonPic2.JPG',\n '/SalonPic3.JPG',\n '/SalonPic4.JPG',\n '/SalonPic5.JPG'\n ];\n\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n adaptiveHeight: true\n };\n\n return (\n \n
\n About Us
\n\n Welcome to our premium nail salon, where advanced technology meets exceptional service. We offer a relaxing atmosphere and flawless results using top-quality products. From classic manicures to the latest nail art, we cater to all your needs with meticulous attention to detail.\n Experience the ultimate in nail care with us. Discover the difference in excellence and beauty.\n
\n {/* Full width and hide overflow */}\n \n {images.map((image, index) => (\n \n
\n );\n};\n\nexport default Gallery;\n","import React, { useEffect, useRef } from 'react';\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n title: string;\n children: React.ReactNode;\n}\n\nconst Modal: React.FC {/* Full width, auto height */}\n 
{/* Full width, auto height */}\n
\n ))}\n \n
\n );\n};\n\nexport default Modal;","import React, { useState, useRef } from 'react';\nimport './ServiceSection.css'; // Import the CSS file\nimport Modal from './Modal'; // Import the Modal component\n\ninterface Service {\n name: string;\n price: string;\n description: string;\n}\n\ninterface CategoryData {\n services: Service[];\n addons?: Service[]; // Only Cosmetology will have add-ons\n}\n\ninterface ServiceCategories {\n [category: string]: CategoryData;\n}\n\nconst serviceCategories: ServiceCategories = {\n 'Manicure': {\n services: [\n { name: \"Classic, European, Smart, Combined\", price: \"$40\", description: \"\" },\n { name: \"Gel remove, Manicure, Gel polish\", price: \"$75\", description: \"\" },\n { name: \"Gel remove, Manicure, Gel polish, Light Design\", price: \"$85\", description: \"\" },\n { name: \"Gel remove, Manicure, Gel polish, Extra Design\", price: \"$95\", description: \"\" },\n { name: \"Nail Care Naked\", price: \"$85\", description: \"\" },\n { name: \"P-Shine Japanese\", price: \"$100\", description: \"\" },\n { name: \"Manicure with Voesh three-stage ritual\", price: \"$75\", description: \"\" },\n ]\n },\n 'Pedicure': {\n services: [\n { name: \"Classic, European, Smart, Combined\", price: \"$60\", description: \"\" },\n { name: \"Gel remove, Pedicure, Gel polish\", price: \"$85\", description: \"\" },\n { name: \"Gel remove, Pedicure, Gel polish, Light Design\", price: \"$95\", description: \"\" },\n { name: \"Gel remove, Pedicure, Gel polish, Extra Design\", price: \"$105\", description: \"\" },\n { name: \"Nail Care Naked\", price: \"$95\", description: \"\" },\n { name: \"P-Shine Japanese\", price: \"$115\", description: \"\" },\n { name: \"Jelly Spa Bath\", price: \"$90\", description: \"\" },\n { name: \"Pedicure with Voesh four-stage ritual\", price: \"$100\", description: \"\" },\n ]\n },\n 'Four hands service': {\n services: [\n { name: \"Manicure & Pedicure Combo\", price: \"$130\", description: \"\" },\n { name: \"Manicure & Pedicure Combo with Gel Polish\", price: \"$175\", description: \"\" }\n ]\n },\n 'Sugaring': {\n services: [\n { name: \"Lips\", price: \"$20\", description: \"\" },\n { name: \"Chin\", price: \"$20\", description: \"\" },\n { name: \"Lips & Chin\", price: \"$35\", description: \"\" },\n { name: \"Underarms\", price: \"$30\", description: \"\" },\n { name: \"Full Arms\", price: \"$50\", description: \"\" },\n { name: \"Half Arms\", price: \"$45\", description: \"\" },\n { name: \"Full Legs\", price: \"$85\", description: \"\" },\n { name: \"Half Legs\", price: \"$55\", description: \"\" },\n { name: \"Chest\", price: \"$40\", description: \"\" },\n { name: \"Stomach\", price: \"$15\", description: \"\" },\n { name: \"Back\", price: \"$75\", description: \"\" },\n { name: \"Bikini\", price: \"$55\", description: \"\" },\n { name: \"Brazilian\", price: \"$65\", description: \"\" },\n { name: \"Full Body\", price: \"$230\", description: \"\" }\n ]\n },\n 'Cosmetology': {\n services: [\n {\n name: \"Collagen Renew 45 — 60 min.\",\n price: \"$130\",\n description: \"Lift & Sculpt facial — Instant lift & firming with powerful peptides for a youthful, sculpted look.\"\n },\n {\n name: \"Regenerative Refresh 45 — 60 min.\",\n price: \"$130\",\n description: \"Line-Refining Facial — Smooth fine lines, boost elasticity & refresh skin with anti-aging peptides.\"\n },\n {\n name: \"Spot Check 45 — 60 min.\",\n price: \"$110\",\n description: \"Complexion clarifying facial — Clear, refine & brighten with salicylic acid and antioxidants for a flawless glow.\"\n },\n {\n name: \"HydroGlow 45 — 60 min.\",\n price: \"$120\",\n description: \"Skin brightening facial — Even skin tone & boost radiance with vitamin C and gentle exfoliation.\"\n },\n {\n name: \"Moisture Infusion 45 — 60 min.\",\n price: \"$120\",\n description: \"Hydrating facial — Deeply hydrate, plump & restore glow with hyaluronic acid & peptides.\"\n },\n {\n name: \"Calming Recovery 45 — 60 min.\",\n price: \"$130\",\n description: \"Sensitivity soothing facial — Soothe, reduce redness & strengthen skin with anti-inflammatory botanicals.\"\n },\n {\n name: \"Facial with extraction 90+ min.\",\n price: \"$145+\",\n description: \"\"\n },\n {\n name: \"Peels 50 min\",\n price: \"$120\",\n description: \"\"\n },\n {\n name: \"LED therapy 45 min.\",\n price: \"$80\",\n description: \"\"\n }\n ],\n addons: [\n {\n name: \"LED therapy\",\n price: \"15 min. — $20 | 30 min. — $30\",\n description: \"\"\n },\n {\n name: \"Hydrojelly mask 20 min.\",\n price: \"$20\",\n description: \"\"\n }\n ]\n }\n};\n\nconst ServiceSection = () => {\n const [expandedCategory, setExpandedCategory] = useState\n
\n \n \n ×\n \n
\n {title}
\n{children}
\n \n {data.services.map((service, index) => (\n
\n );\n };\n\n return (\n \n
\n ))}\n {category === 'Cosmetology' && data.addons && data.addons.length > 0 && (\n <>\n \n
\n {service.description && (\n {service.name}
\n{service.price}
\n{service.description}
\n )}\nAdd Ons:
\n {data.addons.map((addon, index) => (\n\n
\n ))}\n \n )}\n \n
\n {addon.description && (\n {addon.name}
\n{addon.price}
\n{addon.description}
\n )}\n\n
\n ))}\n \n \n \n {categories.map((category) => (\n (contentRefs.current[category] = el)}\n className=\"transition-all duration-500 ease-in-out overflow-hidden bg-white slide-down\"\n >\n {renderCategoryContent(category)}\n
\n )}\n \n \n isDesktop\n ? handleModalOpen(renderCategoryContent(category))\n : handleToggle(category)\n }\n style={{ minHeight: '100px' }}\n >\n
\n {!isDesktop && expandedCategory === category && (\n \n {category}\n
\n\n
\n );\n};\n\nexport default AboutGallerySection;","\nimport React, { useState, useEffect } from 'react';\nimport './BookButton.css'; // Import the CSS file for pulsation effect\n\nconst BookButton = () => {\n const [isInContact, setIsInContact] = useState(false);\n const bookingUrl = 'https://www.vagaro.com//Users/BusinessWidget.aspx?enc=MMLjhIwJMcwFQhXLL7ifVFNiLgEghV9F8MtN18eSzKVEUNY01NuLL8OVXJ+7HzsXXqtePs84+NoafjLs9hVqawySCzDUGfk5wtBA+O/lpQbndzv7HEOylswQgGAS/J7gnUG8joXnEHzkFkn42/YpeAMTqM7uRtk7cht7Imsr8AT05DfHjCyeX0Bh2wj70gMKjrLSUbHe8a0/H8ZjOFtT7McMXxXbW0eykg8KcMIJkuA9MEMsFUJrwdGkaBolHHZCyzvG5g8wlfnvqtfPne4nlN0u2FNQaAK9FbLnlyUM9718KLM+pTm+Z+p54/G5x5SWyQ6MegQO7uWCb8qt/E0fUKOPY0We+2mYauzwzxqkrGc4+Igzd92XABjlbEVm/ijyb+L85VCUHDvQsdwvpB5OzC/0u9/XeAoymQQzuVwHV9o17sB3PfkdyWHI8tazjCK1OFq16SknUQQJ3wJbt9C7mw=='; // Replace with your actual booking URL\n\n useEffect(() => {\n const contactSection = document.getElementById('contact');\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n console.log('Intersection Observer Entry:', entry); // Debugging log\n setIsInContact(entry.isIntersecting);\n },\n {\n root: null,\n threshold: 0.1,\n }\n );\n\n if (contactSection) {\n observer.observe(contactSection);\n }\n\n return () => {\n if (contactSection) {\n observer.unobserve(contactSection);\n }\n };\n }, []);\n\n return (\n \n
\n {/* Same top margin for alignment */}\n
\n {/* Same top margin for alignment */}\n
\n \n \n Book Now\n \n
\n );\n};\n\nexport default BookButton;\n","import React from 'react';\nconst SloganSection = () => {\n const slogan = \"Snails: Experience the Beauty of Perfection\";\n\n // Ensure the slogan is 40 words or fewer\n const trimmedSlogan = slogan.split(' ').slice(0, 40).join(' ');\n\n const sectionStyle: React.CSSProperties = {\n backgroundImage: `url(/SalonPic5.JPG)`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n height: '50vh', // Adjust height as necessary\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n textAlign: 'center',\n color: 'white', // Adjust text color as necessary\n padding: '0 20px',\n marginTop: '10vh', // 10% of the viewport height\n };\n\n return (\n {trimmedSlogan}
\n\n \n \n
\n );\n};\n\nexport default App;","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport \"slick-carousel/slick/slick.css\";\nimport \"slick-carousel/slick/slick-theme.css\";\nimport reportWebVitals from './reportWebVitals';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\nroot.render(\n