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