Encourage new users to sign up for a personalized Pilates experience

Adds a sign-up section with a link to the /auth route and updates the CTA section background color to #B55076.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 88cd88e4-2dbe-4df6-8c8a-7e38f13ef1ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/7d944091-b7fa-454b-bec7-3deccb032e1c.jpg
This commit is contained in:
JeffEmmett 2025-05-21 12:51:11 +00:00
parent 79e3e8c7a9
commit cc5de73a71
1 changed files with 29 additions and 13 deletions

View File

@ -1,20 +1,36 @@
import { Link } from "wouter";
import { useAuth } from "@/hooks/use-auth";
export function CTASection() {
const { user } = useAuth();
return (
<section className="py-16 text-white" style={{ backgroundColor: '#0c8991' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h3 className="text-2xl md:text-3xl font-playfair font-semibold mb-8">
Ready to feel stronger, more connected, and at home in your body?
</h3>
<div className="flex justify-center">
<Link
href="/classes"
className="bg-white text-teal font-bold py-4 px-10 rounded-md shadow-md hover:bg-opacity-90 transition duration-300 text-lg"
>
Book a Class
</Link>
<section className="py-16 text-white" style={{ backgroundColor: '#B55076' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row items-center justify-between">
<div className="mb-8 md:mb-0 md:w-2/3 text-center md:text-left">
<h3 className="text-2xl md:text-3xl font-playfair font-semibold mb-4">
Create Your Personal Account
</h3>
<p className="text-white text-opacity-90 max-w-xl">
Join our community to book classes, track your progress, and connect with other Pilates enthusiasts.
</p>
</div>
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<Link
href="/auth"
className="bg-white text-rose-500 font-bold py-3 px-8 rounded-md shadow-md hover:bg-opacity-90 transition duration-300"
>
{user ? "My Account" : "Sign Up"}
</Link>
<Link
href="/classes"
className="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-md hover:bg-white hover:bg-opacity-20 transition duration-300"
>
Book a Class
</Link>
</div>
</div>
</div>
</section>