jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance website aesthetics with teal accents and unique class images 

Updates the color theme to teal and uses distinct images for each class type.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: acaf01d7-65a7-4fc5-901d-853488e196e8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/725cddc1-d370-4b9b-a488-f35bbfa8cd97.jpg
This commit is contained in:
JeffEmmett 2025-05-10 00:14:21 +00:00
parent de877f254e
commit 8f586105ba
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/classes/class-card.tsx
View File

@ -3,7 +3,9 @@ import { useAuth } from "@/hooks/use-auth";
import { useState } from "react"; import { useState } from "react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { useLocation } from "wouter"; import { useLocation } from "wouter";
import FadiaClassImage from "../../assets/Fadia-156.jpg"; import FadiaGroupClassImage from "../../assets/Fadia-15.jpg";
import FadiaSmallGroupClassImage from "../../assets/Fadia-156.jpg";
import FadiaPrivateClassImage from "../../assets/Fadia-132.jpg";
interface ClassCardProps { interface ClassCardProps {
classData: Class; classData: Class;
@ -67,10 +69,20 @@ export function ClassCard({ classData, onBookClick }: ClassCardProps) {
} }
}; };
// Get class image based on class type
const getClassImage = () => {
switch (classData.classType) {
case "group": return FadiaGroupClassImage;
case "small-group": return FadiaSmallGroupClassImage;
case "private": return FadiaPrivateClassImage;
default: return FadiaGroupClassImage;
}
};
return ( return (
<div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105"> <div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105">
<img <img
src={FadiaClassImage} src={getClassImage()}
alt={classData.name} alt={classData.name}
className="w-full h-48 object-cover" className="w-full h-48 object-cover"
/> />

6
client/src/components/home/cta-section.tsx
View File

@ -2,7 +2,7 @@ import { Link } from "wouter";
export function CTASection() { export function CTASection() {
return ( return (
<section className="py-20 text-white" style={{ backgroundColor: '#9D5E9B' }}> <section className="py-20 text-white" style={{ backgroundColor: '#0c8991' }}>
<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 text-center">
<h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-6"> <h2 className="text-3xl md:text-4xl font-playfair font-semibold mb-6">
Ready to feel stronger, more connected, and at home in your body? Ready to feel stronger, more connected, and at home in your body?
@ -15,13 +15,13 @@ export function CTASection() {
<div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<Link <Link
href="/classes" href="/classes"
className="bg-white text-purple font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300" className="bg-white text-teal font-medium py-3 px-10 hover:bg-opacity-90 transition duration-300"
> >
Join a Class Join a Class
</Link> </Link>
<Link <Link
href="/contact" href="/contact"
className="bg-transparent border border-white text-white font-medium py-3 px-10 hover:bg-white hover:text-purple transition duration-300" className="bg-transparent border border-white text-white font-medium py-3 px-10 hover:bg-white hover:text-teal transition duration-300"
> >
Contact Fadia Contact Fadia
</Link> </Link>