import React, { useState, useEffect } from 'react';
// This is the complete component that can be pasted into a Squarespace 7.1 code block
const SquarespaceYogaStudio = () => {
// State variables for the form
const [isFormOpen, setIsFormOpen] = useState(false);
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
eventType: "",
dates: "",
guestCount: "",
elements: {
yoga: false,
soundBath: false,
meditation: false,
intentionSetting: false,
breathwork: false,
other: false
},
vision: ""
});
const [isSubmitting, setIsSubmitting] = useState(false);
// Form handling functions
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleCheckboxChange = (element) => {
setFormData(prev => ({
...prev,
elements: {
...prev.elements,
[element]: !prev.elements[element]
}
}));
};
const handleSubmit = (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
// Build the elements list
const selectedElements = Object.entries(formData.elements)
.filter(([_, isSelected]) => isSelected)
.map(([element]) => {
const elementMap = {
yoga: "Yoga Session",
soundBath: "Sound Bath",
meditation: "Guided Meditation",
intentionSetting: "Intention-Setting",
breathwork: "Breathwork",
other: "Other"
};
return elementMap[element];
});
// Prepare email content
const subject = `Private Event Request from ${formData.name}`;
const body = `
Name: ${formData.name}
Email: ${formData.email}
Phone: ${formData.phone}
Event Type: ${formData.eventType}
Preferred Dates: ${formData.dates}
Guest Count: ${formData.guestCount}
Selected Elements: ${selectedElements.join(', ') || 'None selected'}
Vision/Special Requests:
${formData.vision}
`;
// Create mailto link
const mailtoLink = `mailto:info@loveandlightsfyoga.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
// Open email client
window.location.href = mailtoLink;
// Show success message
alert("Contact form ready to send. Your email client has been opened with the contact information.");
// Reset form
setFormData({
name: "",
email: "",
phone: "",
eventType: "",
dates: "",
guestCount: "",
elements: {
yoga: false,
soundBath: false,
meditation: false,
intentionSetting: false,
breathwork: false,
other: false
},
vision: ""
});
setIsFormOpen(false);
} catch (error) {
alert("Something went wrong. Please try again or contact us directly at info@loveandlightsfyoga.com");
} finally {
setIsSubmitting(false);
}
};
// ContactForm component
const ContactForm = () => {
return (
<>
{/* Fixed contact button at the bottom right */}
{/* Contact form modal */}
{isFormOpen && (
)}
);
};
// Initialize media items for the bento gallery
const studioMediaItems = [
{
id: 1,
type: "image",
title: "Studio Interior",
desc: "A beautiful view of our yoga studio",
url: "https://lh3.googleusercontent.com/p/AF1QipNAQWlM66azFgILFyA3E4H4AkkzXgeWnAXFI3_Z=s680-w680-h510",
},
{
id: 2,
type: "image",
title: "Studio Space",
desc: "Our serene yoga environment",
url: "https://lh3.googleusercontent.com/p/AF1QipPFY00TdWhDtqEFQuFLQYa_95VKm953lCKBztNs=s680-w680-h510",
},
{
id: 3,
type: "video",
title: "Studio in Motion",
desc: "Experience the energy of our space",
url: "https://eacgtvivlujpzllwdnbf.supabase.co/storage/v1/object/public/22//Untitled%20design%20(20).mp4%20(1).mp4",
},
{
id: 4,
type: "image",
title: "Studio Lighting",
desc: "Warm ambient lighting for relaxation",
url: "https://lh3.googleusercontent.com/p/AF1QipMZgGF4dObfwrbMBf3Wh5ZztWgv0WPM_ivbCR45=s680-w680-h510",
},
{
id: 5,
type: "image",
title: "Studio Interior",
desc: "Our peaceful yoga space",
url: "https://lh3.googleusercontent.com/p/AF1QipMaK58tr9kRSuPg5CQuVTQ628vFLG3YyPLUsHaB=s680-w680-h510",
},
{
id: 6,
type: "image",
title: "Studio Detail",
desc: "Thoughtfully designed space",
url: "https://lh3.googleusercontent.com/p/AF1QipM0EEkwFLtnCLAbUvwPyOQlEjZ25aRl8llXJn8j=s680-w680-h510",
},
{
id: 7,
type: "image",
title: "Studio Environment",
desc: "A welcoming atmosphere",
url: "https://lh3.googleusercontent.com/p/AF1QipNexw5B0vUjRSC9nToQRywFlI7nGXMbhrug5x1B=s680-w680-h510",
},
{
id: 8,
type: "image",
title: "Studio Event",
desc: "Perfect for private events",
url: "https://eacgtvivlujpzllwdnbf.supabase.co/storage/v1/object/public/22//2025-02-23-fotor-2025030145157.png",
},
{
id: 9,
type: "image",
title: "Studio Experience",
desc: "Create special memories here",
url: "https://eacgtvivlujpzllwdnbf.supabase.co/storage/v1/object/public/22//ChatGPT%20Image%20Mar%2030,%202025,%2011_54_35%20AM-fotor-20250330115733.png",
},
];
// Implement TextRotate component
const TextRotate = ({ texts, rotationInterval = 3000 }) => {
const [currentIndex, setCurrentIndex] = useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length);
}, rotationInterval);
return () => clearInterval(interval);
}, [texts, rotationInterval]);
return (
{texts[currentIndex]}
);
};
return (
setIsFormOpen(false)}>
Create Your Private Event
{/* Social Media Icons positioned at top right of the main page */}
);
};
export default SquarespaceYogaStudio;
{/* Hero Section with simplified heading */}
Discover
{/* "Rise Radiate Reconnect" Section */}
{/* Gallery Section */}
{/* Thoughtful Design Section */}
{/* Host Your Private Yoga Event Section */}
{/* Feature Image Section */}
.png)
{/* FAQ Section */}
{/* Location Map Section */}
{/* Pricing Information Section - MOVED TO BOTTOM AS ANIMATED MARQUEE */}
{/* Footer */}
{/* Contact Form Component */}
Discover
Rise Radiate Reconnect
{/* Gallery Implementation */}
{/* Logo Background */}
{/* Google Review link */}
{/* Studio Features Section */}
{studioMediaItems.map((item) => (
{item.type === 'video' ? (
) : (
)}
))}
{item.title}
Welcome to our newly remodeled 1,100-square-foot yoga studio—an elegant sanctuary nested in the vibrant heart of San Francisco.
Our space features:
- A calm, neutral color palette and warm laminated wood flooring that create an atmosphere of serenity.
- A soaring ceiling with recessed lighting that fills the room with a gentle glow.
- A Bluetooth-powered ceiling speaker system that delivers an immersive auditory experience for classes and events.
In the quiet rear of the studio, you'll find:
- A discreetly tucked-away kitchenette with a sink and refrigerator for your refreshment needs.
- A private, ADA-compliant restroom conveniently hidden behind a room divider—ensuring accessibility without disrupting the flow of the space.
Every detail has been thoughtfully designed to offer seamless comfort and preserve the studio's peaceful, modern ambiance.
Host Your Private Yoga Event
Perfect for:
Bridal Showers
Create special memories with a relaxing yoga session before the big day.
Bachelorette Parties
A refreshing alternative to traditional celebrations, bringing balance and joy.
Milestone Celebrations
Mark important life events with mindfulness and connection in our serene space.
Birthdays
Celebrate another trip around the sun with relaxation and rejuvenation.
…and more!
Treat your guests to a unique experience in a space designed for calm, connection, and celebration.
🌿 Private Event FAQ – Discover Calm & Connection
Our sanctuary is perfect for bachelorette parties, bridal showers, birthdays, milestones, and soulful celebrations. Whether you're honoring a personal moment or gathering with your tribe, we create a sacred space for movement, connection, and peace.
We're nestled in the vibrant heart of the Excelsior district in San Francisco, offering a serene escape within the city. Full address and directions are provided upon booking confirmation.
The studio features a calm, neutral color palette, warm wood floors, ambient recessed lighting, a Bluetooth ceiling speaker system, a kitchenette with a fridge and sink, and a private, ADA-compliant restroom—perfectly tucked away for flow and ease.
Yes! You can tailor your session with yoga, sound healing, meditation, intention-setting, and more. We'll co-create the experience to match your event's mood and intention.
The 1,100-square-foot space comfortably hosts small to medium-sized gatherings. We'll confirm ideal group size based on the style of event and movement involved.
Light refreshments are welcome, especially with our kitchenette on-site. Let us know your plans, and we'll guide you on best practices for keeping the space serene.
Yes, there is accessible parking nearby and multiple public transport options for your convenience.
Simply fill out the contact form below. We'll respond with custom pricing based on your vision, group size, and date preferences.
4877 Mission St, San Francisco
Pricing Information •
Please submit form using contact button for pricing information •
Pricing Information •
Please submit form using contact button for pricing information •
Pricing Information •
Please submit form using contact button for pricing information •