Prompt to Build Your Therapy Website (Calm Nest):
Build a modern, responsive, and elegant therapy website called "Calm Nest" using Next.js App Router, Tailwind CSS, shadcn/ui, and Framer Motion.
Use a single-page structure in app/page.tsx that includes:
✅ Header with logo ("Calm Nest") and navigation links (Home, About, Services, Contact) ✅ Hero Section with:
Heading: "Heal. Grow. Thrive."
Subheading: “Empowering You Towards Inner Peace & Mental Clarity”
CTA button: “Book a Session”
✅ About Section:
Therapist Name: Priyanshu Sharma
Title: MSc Clinical Psychologist
Description: A brief intro about the therapist’s approach—compassionate, evidence-based, client-centered.
✅ Services Section: Use 3 cards using shadcn/ui Card and CardContent:
Individual Therapy
Relationship Counseling
Anxiety & Depression Management Each with a short description.
✅ Contact Section with a styled contact form:
Name, Email, Message fields (all required)
A submit button styled with Tailwind + Framer Motion
Add handleContactSubmit function (basic console log for now)
✅ Footer:
Text: “© 2025 Calm Nest. All rights reserved.”
Additional instructions:
Make it a Client Component ('use client') to enable Framer Motion.
Use Framer Motion for fade-in/up animations on each section.
Tailwind classes should use hardcoded hex colors, e.g.:
Background: #FFFDFC
Accent/Primary: #8ec5fc
Text: #1e293b
Typography: Use the Inter font in app/layout.tsx and assign to --font-sans.
Use a basic mobile menu button in header (burger icon), mark placeholder for future dropdown.
Ensure accessibility:
Use aria-labels
sr-only text for mobile menu icon
Required fields in the contact form
Update tailwind.config.ts and app/globals.css for custom primary color and font
Delete all unused components from the old section-based structure
Result should be a clean, elegant, animated, professional therapy website optimized for desktop and mobile.
Loading...
Build a modern, responsive, and elegant therapy website called "Calm Nest" using Next.js App Router, Tailwind CSS, shadcn/ui, and Framer Motion.
Use a single-page structure in app/page.tsx that includes the following sections:
✅ Header
Logo: “Calm Nest”
Navigation links: Home, About, Services, My Approach, Who This Is For, Testimonials, FAQ, Contact
Mobile menu button with burger icon (placeholder for dropdown)
✅ Hero Section
Heading: “Heal. Grow. Thrive.”
Subheading: “Empowering You Towards Inner Peace & Mental Clarity”
CTA Button: “Book a Session”
Soft, inviting background color: #FFFDFC, and text: #1e293b
✅ About Section
Name: Priyanshu Jangid
Title: Consultant Psychologist
Description: Brief paragraph about your qualifications, compassion-driven approach, and areas of expertise
✅ Services Section
Use 3–4 Card components from shadcn/ui with icons:
Individual Therapy
Relationship Counseling
Anxiety & Depression Management
Family Therapy (optional) Include short 2–3 line descriptions under each.
✅ My Approach Section
Use calming tone, explain your therapy style: e.g., CBT, mindfulness-based, trauma-informed
Emphasize: Safe space, confidentiality, personalized plans
✅ Who This Is For Section
A few bullet points or icons showing who can benefit:
Adults struggling with anxiety
Couples facing communication issues
Students under pressure
Anyone feeling stuck or lost
✅ Testimonials Section
Show 2–3 short client reviews (use dummy quotes for now)
Use Card + subtle animations
Add aria-label for accessibility
✅ FAQ Section
Use accordions or simple expandable sections for:
“How long is a session?”
“Is therapy confidential?”
“Do you offer online sessions?”
✅ Contact Section
A styled contact form: Name, Email, Message (all required)
Submit button using Tailwind + Framer Motion
A basic handleContactSubmit function (console log)
✅ Footer
Text: “© 2025 Calm Nest. All rights reserved.”
🔧 Technical & Design Instructions:
Add 'use client' at top of app/page.tsx
Animate each section using Framer Motion
Use Tailwind CSS with hardcoded hex colors:
Primary: #8ec5fc
Background: #FFFDFC
Text: #1e293b
Set global font in app/layout.tsx as Inter, and assign to --font-sans
Style all inputs with accessibility in mind: aria-label, sr-only, and required fields
Update tailwind.config.ts and app/globals.css for primary color and custom font
Delete all old section-based component files (previous multi-file structure)
The result should be a calming, trustworthy, mobile-friendly therapy website with smooth transitions and a modern UX.
Loading...
Replace the 'Book a Session' link with an integration to a scheduling tool like Calendly.