44 |

Add New Appointment

45 | {message &&

{message}

} 46 | 47 |

48 | Date 49 | 57 | 58 | Time 59 | 67 | 68 | Description 69 |

77 | 
78 |         <button type="submit">Create Appointment</button>
79 |       </form>
80 |     </div>
81 |   );
82 | }
83 |

--------------------------------------------------------------------------------
/src/styles/Register.css:
--------------------------------------------------------------------------------
 1 | /* src/styles/Register.css */
 2 | 
 3 | /* Full-page layout with two panels: left for branding, right for the registration form */
 4 | .register-page {
 5 |   display: flex;               /* Use Flexbox to create side-by-side panels */
 6 |   height: 100vh;               /* Full viewport height */
 7 |   font-family: 'Segoe UI', sans-serif; /* Page font */
 8 | }
 9 | 
10 | /* Left panel: contains welcome content, features, and testimonial */
11 | .left-panel {
12 |   flex: 1;                     /* Occupies half the width */
13 |   background-color: #f5f5fa;   /* Light background color */
14 |   padding: 60px;               /* Spacing around content */
15 |   display: flex;
16 |   flex-direction: column;
17 |   justify-content: center;     /* Vertically center content */
18 |   color: #333;                 /* Dark text color */
19 | }
20 | 
21 | /* Feature list styling in the left panel */
22 | .feature-list {
23 |   margin: 20px 0;              /* Vertical spacing */
24 |   line-height: 1.6;            /* Increased line spacing for readability */
25 | }
26 | 
27 | /* Testimonial styling */
28 | .testimonial {
29 |   margin-top: 30px;            /* Space above testimonial */
30 |   font-style: italic;          /* Italic text style */
31 |   color: #666;                 /* Medium gray color */
32 | }
33 | 
34 | /* Right panel: contains the registration form */
35 | .right-panel {
36 |   flex: 1;                     /* Occupies the other half of the width */
37 |   display: flex;
38 |   justify-content: center;     /* Center the form horizontally */
39 |   align-items: center;         /* Center the form vertically */
40 |   padding: 60px;
41 |   background-color: #ffffff;   /* White background for contrast */
42 | }
43 | 
44 | /* Form container styling */
45 | .register-form {
46 |   width: 100%;
47 |   max-width: 400px;            /* Limit maximum form width */
48 |   display: flex;
49 |   flex-direction: column;      /* Stack form elements vertically */
50 | }
51 | 
52 | /* Form title styling */
53 | .register-form h2 {
54 |   margin-bottom: 20px;         /* Space below the title */
55 |   color: #222;                 /* Dark text for the title */
56 | }
57 | 
58 | /* Input fields and select dropdown styling */
59 | .register-form input,
60 | .register-form select {
61 |   margin-bottom: 15px;         /* Space between form elements */
62 |   padding: 12px;               /* Padding inside each input */
63 |   border: 1px solid #ccc;      /* Light gray border */
64 |   border-radius: 6px;          /* Rounded corners */
65 |   font-size: 16px;             /* Set font size */
66 | }
67 | 
68 | /* Submit button styling */
69 | .register-form button {
70 |   background-color: #6a47d4;   /* Purple background */
71 |   color: white;                /* White text */
72 |   border: none;                /* No border */
73 |   padding: 12px;               /* Padding for the button */
74 |   font-size: 16px;             /* Font size */
75 |   border-radius: 6px;          /* Rounded corners */
76 |   cursor: pointer;             /* Cursor changes to pointer on hover */
77 |   transition: background-color 0.2s ease; /* Smooth background transition */
78 | }
79 | 
80 | /* Button hover effect */
81 | .register-form button:hover {
82 |   background-color: #593bb6;   /* Darker purple on hover */
83 | }
84 | 
85 | /* Message styling for success or error feedback */
86 | .message {
87 |   margin-top: 10px;
88 |   color: green;                /* Green text for success messages */
89 | }
90 | 
91 | /* Link styling below the form */
92 | .link {
93 |   margin-top: 16px;
94 |   text-align: center;          /* Center the link text */
95 |   font-size: 14px;             /* Smaller font size */
96 | }
97 |

--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | // src/components/Navbar.tsx
  2 | 
  3 | import React, { useContext, useState } from 'react';
  4 | import { Link, useNavigate } from 'react-router-dom';
  5 | import { UserContext } from '../hooks/UserContext';
  6 | import '../styles/Navbar.css';
  7 | 
  8 | export default function Navbar() {
  9 |   // Get current user object and logout function from UserContext
 10 |   const { user, logout } = useContext(UserContext);
 11 | 
 12 |   // Hook to navigate programmatically (e.g., redirect after logout)
 13 |   const navigate = useNavigate();
 14 | 
 15 |   // Track whether mobile menu is open or closed
 16 |   const [isMenuOpen, setIsMenuOpen] = useState(false);
 17 | 
 18 |   // Handle user logout: clear auth state and go to homepage
 19 |   const handleLogout = () => {
 20 |     logout();       // Clear user state and remove token
 21 |     navigate('/');  // Redirect to home
 22 |   };
 23 | 
 24 |   // Toggle mobile menu open/closed
 25 |   const toggleMenu = () => {
 26 |     setIsMenuOpen(!isMenuOpen);
 27 |   };
 28 | 
 29 |   // Close mobile menu when any link is clicked
 30 |   const closeMenu = () => {
 31 |     if (isMenuOpen) setIsMenuOpen(false);
 32 |   };
 33 | 
 34 |   return (
 35 |     <nav className="navbar">
 36 |       <div className="navbar-container">
 37 |         {/* Logo / brand link - always shows */}
 38 |         <div className="navbar-brand">
 39 |           <Link to="/" onClick={closeMenu}>MindVision</Link>
 40 |         </div>
 41 | 
 42 |         {/* Hamburger icon for mobile menu toggle */}
 43 |         <div className="menu-icon" onClick={toggleMenu}>
 44 |           <span className={isMenuOpen ? 'menu-icon-bar open' : 'menu-icon-bar'}></span>
 45 |           <span className={isMenuOpen ? 'menu-icon-bar open' : 'menu-icon-bar'}></span>
 46 |           <span className={isMenuOpen ? 'menu-icon-bar open' : 'menu-icon-bar'}></span>
 47 |         </div>
 48 | 
 49 |         {/* Navigation links - adapt to screen size */}
 50 |         <ul className={isMenuOpen ? 'navbar-links active' : 'navbar-links'}>
 51 |           {/* Always visible links */}
 52 |           <li>
 53 |             <Link to="/" onClick={closeMenu}>Home</Link>
 54 |           </li>
 55 |           <li>
 56 |             <Link to="/services" onClick={closeMenu}>Services</Link>
 57 |           </li>
 58 |           <li>
 59 |             <Link to="/blog" onClick={closeMenu}>Blog</Link>
 60 |           </li>
 61 | 
 62 |           {/* Conditional links based on auth status */}
 63 |           {user ? (
 64 |             <>
 65 |               {/* Only visible when logged in */}
 66 |               <li>
 67 |                 <Link to="/appointments" onClick={closeMenu}>Appointments</Link>
 68 |               </li>
 69 |               <li>
 70 |                 <Link to="/appointments/add" onClick={closeMenu}>Add Appointment</Link>
 71 |               </li>
 72 |               <li>
 73 |                 <button
 74 |                   onClick={() => {
 75 |                     closeMenu();
 76 |                     handleLogout();
 77 |                   }}
 78 |                   className="logout-button"
 79 |                 >
 80 |                   Logout
 81 |                 </button>
 82 |               </li>
 83 |             </>
 84 |           ) : (
 85 |             <>
 86 |               {/* Only visible when logged out */}
 87 |               <li>
 88 |                 <Link to="/login" onClick={closeMenu}>Login</Link>
 89 |               </li>
 90 |               <li>
 91 |                 <Link to="/register" onClick={closeMenu}>Register</Link>
 92 |               </li>
 93 |             </>
 94 |           )}
 95 |         </ul>
 96 |       </div>
 97 |     </nav>
 98 |   );
 99 | }
100 |

--------------------------------------------------------------------------------
/src/styles/Navbar.css:
--------------------------------------------------------------------------------
  1 | /* src/styles/Navbar.css */
  2 | 
  3 | /* Main navbar styles */
  4 | .navbar {
  5 |     background-color: white;
  6 |     height: 60px;
  7 |     width: 100%;
  8 |     display: flex;
  9 |     justify-content: center;
 10 |     align-items: center;
 11 |     position: sticky;
 12 |     top: 0;
 13 |     z-index: 999;
 14 |     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 15 |   }
 16 |   
 17 |   .navbar-container {
 18 |     display: flex;
 19 |     justify-content: center;
 20 |     align-items: center;
 21 |     width: 100%;
 22 |     max-width: 1200px;
 23 |     padding: 0 20px;
 24 |     height: 60px;
 25 |   }
 26 |   
 27 |   /* Brand/logo styles */
 28 |   .navbar-brand {
 29 |     margin-right: 20px;
 30 |   }
 31 |   
 32 |   .navbar-brand a {
 33 |     color: #3a6ea5;
 34 |     font-size: 1.5rem;
 35 |     font-weight: 700;
 36 |     text-decoration: none;
 37 |   }
 38 |   
 39 |   /* Navigation links */
 40 |   .navbar-links {
 41 |     display: flex;
 42 |     flex-direction: row;
 43 |     align-items: center;
 44 |     list-style: none;
 45 |     padding: 0;
 46 |     margin: 0;
 47 |   }
 48 |   
 49 |   .navbar-links li {
 50 |     margin-left: 30px;
 51 |     display: inline-block;
 52 |   }
 53 |   
 54 |   .navbar-links a {
 55 |     color: #343a40;
 56 |     text-decoration: none;
 57 |     font-weight: 500;
 58 |     padding: 0.5rem 0;
 59 |     transition: color 0.3s;
 60 |   }
 61 |   
 62 |   .navbar-links a:hover {
 63 |     color: #3a6ea5;
 64 |   }
 65 |   
 66 |   /* Logout button */
 67 |   .logout-button {
 68 |     background-color: #ff6b6b;
 69 |     color: white;
 70 |     border: none;
 71 |     padding: 0.5rem 1rem;
 72 |     border-radius: 4px;
 73 |     cursor: pointer;
 74 |     font-weight: 600;
 75 |     transition: background-color 0.3s;
 76 |   }
 77 |   
 78 |   .logout-button:hover {
 79 |     background-color: #ff5252;
 80 |   }
 81 |   
 82 |   /* Mobile menu icon - hidden by default */
 83 |   .menu-icon {
 84 |     display: none;
 85 |   }
 86 |   
 87 |   .menu-icon-bar {
 88 |     display: block;
 89 |     width: 25px;
 90 |     height: 3px;
 91 |     margin: 5px auto;
 92 |     background-color: #343a40;
 93 |     transition: all 0.3s ease-in-out;
 94 |   }
 95 |   
 96 |   /* Mobile responsive styles */
 97 |   @media screen and (max-width: 768px) {
 98 |     .navbar-container {
 99 |       justify-content: space-between;
100 |     }
101 |     
102 |     .menu-icon {
103 |       display: block;
104 |       cursor: pointer;
105 |       z-index: 1000;
106 |     }
107 |   
108 |     .menu-icon-bar.open:nth-child(1) {
109 |       transform: rotate(-45deg) translate(-5px, 6px);
110 |     }
111 |   
112 |     .menu-icon-bar.open:nth-child(2) {
113 |       opacity: 0;
114 |     }
115 |   
116 |     .menu-icon-bar.open:nth-child(3) {
117 |       transform: rotate(45deg) translate(-5px, -6px);
118 |     }
119 |   
120 |     .navbar-links {
121 |       display: flex;
122 |       flex-direction: column;
123 |       width: 100%;
124 |       height: auto;
125 |       position: absolute;
126 |       top: 60px;
127 |       left: -100%;
128 |       opacity: 0;
129 |       transition: all 0.5s ease;
130 |       background-color: white;
131 |       box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
132 |       padding: 1rem 0;
133 |     }
134 |   
135 |     .navbar-links.active {
136 |       left: 0;
137 |       opacity: 1;
138 |       transition: all 0.5s ease;
139 |       z-index: 1;
140 |     }
141 |   
142 |     .navbar-links li {
143 |       margin: 1rem 0;
144 |       text-align: center;
145 |       width: 100%;
146 |     }
147 |   
148 |     .navbar-links a {
149 |       display: block;
150 |       width: 100%;
151 |       padding: 0.5rem 0;
152 |     }
153 |   }

--------------------------------------------------------------------------------
/src/hooks/UserContext.tsx:
--------------------------------------------------------------------------------
  1 | // src/hooks/UserContext.tsx
  2 | import React, { createContext, useState, ReactNode, useEffect } from 'react';
  3 | import api from '../services/api';
  4 | 
  5 | // Define the structure for our user data
  6 | interface User {
  7 |   _id: string;
  8 |   name: string;
  9 |   email: string;
 10 |   token: string;
 11 | }
 12 | 
 13 | // Define the context interface including login, register, logout, and update functions.
 14 | interface UserContextType {
 15 |   user: User | null;
 16 |   login: (email: string, password: string) => Promise<void>;
 17 |   register: (name: string, email: string, password: string) => Promise<void>;
 18 |   logout: () => void;
 19 |   updateUser: (userData: Partial<User>) => void;
 20 | }
 21 | 
 22 | // Create the context with default (dummy) implementations.
 23 | export const UserContext = createContext<UserContextType>({
 24 |   user: null,
 25 |   login: async () => {},
 26 |   register: async () => {},
 27 |   logout: () => {},
 28 |   updateUser: () => {}
 29 | });
 30 | 
 31 | // Provider props type.
 32 | interface Props {
 33 |   children: ReactNode;
 34 | }
 35 | 
 36 | // The UserProvider wraps the app and provides authentication state.
 37 | export const UserProvider = ({ children }: Props) => {
 38 |   // Initialize user state from localStorage for persistence.
 39 |   const [user, setUser] = useState<User | null>(() => {
 40 |     const storedUser = localStorage.getItem('user');
 41 |     return storedUser ? JSON.parse(storedUser) : null;
 42 |   });
 43 | 
 44 |   // Update localStorage and the Axios default header whenever user state changes.
 45 |   useEffect(() => {
 46 |     if (user) {
 47 |       localStorage.setItem('user', JSON.stringify(user));
 48 |       api.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;
 49 |     } else {
 50 |       localStorage.removeItem('user');
 51 |       delete api.defaults.headers.common['Authorization'];
 52 |     }
 53 |   }, [user]);
 54 | 
 55 |   // Login function: calls POST /api/auth/login then GET /api/auth/me to get user info.
 56 |   const login = async (email: string, password: string) => {
 57 |     try {
 58 |       const response = await api.post('/api/auth/login', { email, password });
 59 |       const token = response.data.token;
 60 |       // Set the token in the default header
 61 |       api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
 62 |       // Now fetch the user info using GET /api/auth/me
 63 |       const meResponse = await api.get('/api/auth/me');
 64 |       const userData = { ...meResponse.data, token };
 65 |       setUser(userData);
 66 |     } catch (err: any) {
 67 |       throw new Error(err.response?.data?.msg || 'Login failed');
 68 |     }
 69 |   };
 70 | 
 71 |   // Register function: calls POST /api/auth/register then GET /api/auth/me.
 72 |   const register = async (name: string, email: string, password: string) => {
 73 |     try {
 74 |       const response = await api.post('/api/auth/register', { name, email, password });
 75 |       const token = response.data.token;
 76 |       // Set the token in the default header
 77 |       api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
 78 |       // Now fetch the user info using GET /api/auth/me
 79 |       const meResponse = await api.get('/api/auth/me');
 80 |       const userData = { ...meResponse.data, token };
 81 |       setUser(userData);
 82 |     } catch (err: any) {
 83 |       throw new Error(err.response?.data?.msg || 'Registration failed');
 84 |     }
 85 |   };
 86 | 
 87 |   // Logout function: clears the user state.
 88 |   const logout = () => {
 89 |     setUser(null);
 90 |   };
 91 | 
 92 |   // updateUser function: merges new user data with the existing state.
 93 |   const updateUser = (userData: Partial<User>) => {
 94 |     setUser(prev => (prev ? { ...prev, ...userData } : null));
 95 |   };
 96 | 
 97 |   return (
 98 |     <UserContext.Provider value={{ user, login, register, logout, updateUser }}>
 99 |       {children}
100 |     </UserContext.Provider>
101 |   );
102 | };
103 |

--------------------------------------------------------------------------------
/src/styles/Login.css:
--------------------------------------------------------------------------------
  1 | /* src/styles/Login.css */
  2 | 
  3 | /* Full-page layout for the login page */
  4 | .login-page {
  5 |   display: flex;               /* Create two side-by-side panels */
  6 |   min-height: 100vh;           /* Full viewport height */
  7 |   background-color: #f9f9ff;   /* Light background color */
  8 | }
  9 | 
 10 | /* LEFT PANEL: Branding / Welcome Content */
 11 | .login-left {
 12 |   flex: 1;                     /* Take up half the width */
 13 |   padding: 4rem 3rem;          /* Spacing inside the panel */
 14 |   background-color: #f4f3ff;   /* Light purple background for contrast */
 15 |   display: flex;
 16 |   flex-direction: column;
 17 |   justify-content: center;     /* Center content vertically */
 18 |   align-items: center;         /* Center content horizontally */
 19 |   text-align: left;
 20 |   max-width: 480px;
 21 |   margin: 0 auto;
 22 | }
 23 | 
 24 | /* RIGHT PANEL: Login Form Container */
 25 | .login-right {
 26 |   flex: 1;                     /* Take up the remaining half */
 27 |   padding: 4rem 3rem;          /* Spacing inside the panel */
 28 |   background-color: #f4f3ff;   /* Consistent background with left panel */
 29 |   display: flex;
 30 |   flex-direction: column;
 31 |   justify-content: center;
 32 | }
 33 | 
 34 | /* Login box styling */
 35 | .login-container {
 36 |   width: 100%;
 37 |   max-width: 380px;            /* Limit maximum width */
 38 |   background-color: #fff;      /* White background for the form */
 39 |   padding: 2rem;               /* Spacing inside the form */
 40 |   border-radius: 12px;         /* Rounded corners */
 41 |   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow */
 42 | }
 43 | 
 44 | /* Form title styling */
 45 | .login-title {
 46 |   font-size: 1.5rem;
 47 |   font-weight: 600;
 48 |   margin-bottom: 1.5rem;
 49 |   color: #222;
 50 | }
 51 | 
 52 | /* Form layout */
 53 | .login-form {
 54 |   display: flex;
 55 |   flex-direction: column;
 56 |   gap: 1rem;                 /* Space between input fields */
 57 | }
 58 | 
 59 | /* Input fields styling */
 60 | .login-input {
 61 |   padding: 0.75rem 1rem;
 62 |   font-size: 1rem;
 63 |   border: 1px solid #ccc;
 64 |   border-radius: 6px;
 65 | }
 66 | 
 67 | /* Submit button styling */
 68 | .login-button {
 69 |   padding: 0.75rem;
 70 |   background-color: #6c5ce7;   /* Purple background */
 71 |   color: white;
 72 |   font-weight: bold;
 73 |   border: none;
 74 |   border-radius: 6px;
 75 |   cursor: pointer;
 76 |   transition: background 0.3s; /* Smooth background transition */
 77 | }
 78 | 
 79 | .login-button:hover {
 80 |   background-color: #574b90;   /* Darker purple on hover */
 81 | }
 82 | 
 83 | /* Error message styling */
 84 | .login-error {
 85 |   color: red;
 86 |   font-size: 0.9rem;
 87 |   margin-top: 0.5rem;
 88 | }
 89 | 
 90 | /* Signup link styling */
 91 | .signup-text {
 92 |   margin-top: 1rem;
 93 |   text-align: center;
 94 |   font-size: 0.9rem;
 95 | }
 96 | 
 97 | .signup-text a {
 98 |   color: #6c5ce7;
 99 |   text-decoration: none;
100 | }
101 | 
102 | /* Additional branding styles for the left panel */
103 | .welcome-title {
104 |   font-size: 2.5rem;
105 |   font-weight: 800;
106 |   line-height: 1.2;
107 |   color: #222;
108 |   margin-bottom: 1rem;
109 | }
110 | 
111 | .welcome-subtext {
112 |   font-size: 1rem;
113 |   color: #555;
114 |   margin-bottom: 2rem;
115 | }
116 | 
117 | .benefits-list {
118 |   list-style: none;
119 |   padding: 0;
120 |   margin-bottom: 2rem;
121 |   color: #333;
122 | }
123 | 
124 | .benefits-list li {
125 |   margin-bottom: 0.5rem;
126 |   font-size: 1rem;
127 | }
128 | 
129 | .testimonial {
130 |   font-style: italic;
131 |   color: #555;
132 | }
133 | 
134 | .client-credit {
135 |   margin-top: 0.5rem;
136 |   font-style: normal;
137 |   font-size: 0.9rem;
138 |   color: #777;
139 | }
140 | 
141 | /* Animated halo for branding (if used) */
142 | .halo {
143 |   display: inline-block;
144 |   animation: float 2s ease-in-out infinite;
145 | }
146 | 
147 | @keyframes float {
148 |   0%, 100% { transform: translateY(0); }
149 |   50% { transform: translateY(-4px); }
150 | }
151 |

--------------------------------------------------------------------------------
/src/pages/Login.tsx:
--------------------------------------------------------------------------------
  1 | // src/pages/Login.tsx
  2 | import React, { useState, useContext } from 'react';
  3 | import { Link, useNavigate } from 'react-router-dom';
  4 | import { UserContext } from '../hooks/UserContext';
  5 | import '../styles/Login.css'; 
  6 | 
  7 | /**
  8 |  * Login Component
  9 |  * ----------------
 10 |  * This component renders a two-panel layout:
 11 |  * - Left Panel: Branding and welcome message.
 12 |  * - Right Panel: Login form.
 13 |  *
 14 |  * It uses the global UserContext to call the login function. Upon successful login,
 15 |  * it redirects the user to the dashboard (or home). Errors are displayed if login fails.
 16 |  */
 17 | const Login: React.FC = () => {
 18 |   // Retrieve the login function from UserContext
 19 |   const { login } = useContext(UserContext);
 20 |   // useNavigate allows for programmatic redirection
 21 |   const navigate = useNavigate();
 22 | 
 23 |   // Local state for email and password input fields
 24 |   const [email, setEmail] = useState('');
 25 |   const [password, setPassword] = useState('');
 26 |   // Local state to hold error messages if login fails
 27 |   const [error, setError] = useState<string | null>(null);
 28 | 
 29 |   // Handle form submission
 30 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 31 |     e.preventDefault(); // Prevent page reload on form submit
 32 |     if (!email || !password) {
 33 |       setError('Email and password are required.');
 34 |       return;
 35 |     }
 36 |     setError(null);
 37 |     try {
 38 |       // Call the login function from context
 39 |       await login(email, password);
 40 |       // On successful login, redirect to the dashboard (or home page)
 41 |       navigate('/dashboard');
 42 |     } catch (err: any) {
 43 |       // Capture and display the error message if login fails
 44 |       setError(err.message);
 45 |       console.error("Login error:", err);
 46 |     }
 47 |   };
 48 | 
 49 |   return (
 50 |     <div className="login-page">
 51 |       {/* LEFT PANEL: Branding and Welcome Information */}
 52 |       <div className="login-left login-branding">
 53 |         <h1 className="welcome-title">
 54 |           Welcome to <br /> MindVision <span className="halo">🪐</span>
 55 |         </h1>
 56 |         <p className="welcome-subtext">
 57 |           Your journey to clarity and confidence starts here.
 58 |         </p>
 59 |         <ul className="benefits-list">
 60 |           <li>✓ Personal Growth</li>
 61 |           <li>✓ 1-on-1 Sessions</li>
 62 |           <li>✓ Secure & Confidential</li>
 63 |         </ul>
 64 |         <blockquote className="testimonial">
 65 |           <em>"Working with MindVision changed my life!"</em>
 66 |           <br />
 67 |           <span className="client-credit">- A grateful client 💜</span>
 68 |         </blockquote>
 69 |       </div>
 70 | 
 71 |       {/* RIGHT PANEL: Login Form */}
 72 |       <div className="login-right">
 73 |         <div className="login-container">
 74 |           <h1 className="login-title">Login to MindVision</h1>
 75 |           <form className="login-form" onSubmit={handleSubmit}>
 76 |             {/* Email Input */}
 77 |             <input
 78 |               type="email"
 79 |               placeholder="Email address"
 80 |               className="login-input"
 81 |               value={email}
 82 |               onChange={(e) => setEmail(e.target.value)}
 83 |               required
 84 |             />
 85 |             {/* Password Input */}
 86 |             <input
 87 |               type="password"
 88 |               placeholder="Password"
 89 |               className="login-input"
 90 |               value={password}
 91 |               onChange={(e) => setPassword(e.target.value)}
 92 |               required
 93 |             />
 94 |             {/* Display error if login fails */}
 95 |             {error && <div className="login-error">{error}</div>}
 96 |             {/* Submit Button */}
 97 |             <button type="submit" className="login-button">
 98 |               Login
 99 |             </button>
100 |           </form>
101 |           {/* Link to the Register page */}
102 |           <p className="signup-text">
103 |             Don't have an account? <Link to="/register">Sign up</Link>
104 |           </p>
105 |         </div>
106 |       </div>
107 |     </div>
108 |   );
109 | };
110 | 
111 | export default Login;
112 |

--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import { useNavigate } from 'react-router-dom';
  3 | import '../styles/Home.css';
  4 | 
  5 | // Shape of quote from API
  6 | interface Quote {
  7 |   content: string;
  8 |   author: string;
  9 | }
 10 | 
 11 | export default function Home() {
 12 |   const navigate = useNavigate();
 13 |   const [quote, setQuote] = useState<Quote | null>(null);
 14 |   const [error, setError] = useState<string | null>(null);
 15 | 
 16 |   // Fetch quote from quotable API (using HTTPS to avoid mixed-content issues)
 17 |   const fetchQuote = async () => {
 18 |     try {
 19 |       // This endpoint returns an array with one quote object
 20 |       const response = await fetch('https://api.quotable.io/quotes/random');
 21 |       if (!response.ok) throw new Error('Failed to fetch quote');
 22 |       const data = await response.json();
 23 |       // data is an array of length 1, so we use data[0]
 24 |       setQuote(data[0]);
 25 |     } catch (err: any) {
 26 |       setError(err.message);
 27 |     }
 28 |   };
 29 | 
 30 |   // Load quote on mount
 31 |   useEffect(() => {
 32 |     fetchQuote();
 33 |   }, []);
 34 | 
 35 |   return (
 36 |     <div className="home-container">
 37 |       {/* 👋 Hero Section */}
 38 |       <div className="hero-section">
 39 |         <div className="hero-content">
 40 |           <div className="hero-text">
 41 |             <h1>Welcome to MindVision Coaching</h1>
 42 |             <p className="hero-subtitle">Empower yourself with inspiration!</p>
 43 |             <button className="cta-button" onClick={() => navigate('/login')}>
 44 |               Book Your Free Consultation
 45 |             </button>
 46 |           </div>
 47 |           <div className="hero-image">
 48 |             <div className="profile-circle">
 49 |               <img src="/Image1.jpg" alt="Profile" />
 50 |             </div>
 51 |           </div>
 52 |         </div>
 53 |       </div>
 54 | 
 55 |       {/* 📘 About Section */}
 56 |       <div className="about-section">
 57 |         <h2>About My Coaching</h2>
 58 |         <div className="about-content">
 59 |           <div className="about-text">
 60 |             <p>
 61 |               I help clients unlock their full potential through personalized
 62 |               coaching strategies that address mindset, goals, and personal
 63 |               growth. My approach combines proven psychological techniques with
 64 |               practical strategies for real-world results.
 65 |             </p>
 66 |             <p>
 67 |               Every coaching journey is tailored to your unique needs and
 68 |               aspirations, creating a supportive space where transformation
 69 |               happens naturally.
 70 |             </p>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         {/* 💎 Coaching Approach Section (NEW) */}
 75 |         <div className="benefits-section">
 76 |           <h2>My Coaching Approach</h2>
 77 |           <div className="benefits-container">
 78 |             <div className="benefit-item">
 79 |               <div className="benefit-icon">🧠</div>
 80 |               <h3>Mindset Transformation</h3>
 81 |               <p>
 82 |                 Identify and reframe limiting beliefs that hold you back from
 83 |                 reaching your full potential.
 84 |               </p>
 85 |             </div>
 86 |             <div className="benefit-item">
 87 |               <div className="benefit-icon">🎯</div>
 88 |               <h3>Strategic Goal Setting</h3>
 89 |               <p>
 90 |                 Create meaningful goals with clear action steps aligned with your
 91 |                 values and aspirations.
 92 |               </p>
 93 |             </div>
 94 |             <div className="benefit-item">
 95 |               <div className="benefit-icon">⚡</div>
 96 |               <h3>Sustainable Growth</h3>
 97 |               <p>
 98 |                 Develop habits and systems that support long-term success and
 99 |                 continued personal evolution.
100 |               </p>
101 |             </div>
102 |           </div>
103 |         </div>
104 |       </div>
105 | 
106 |       {/* 💬 Quote Section */}
107 |       <div className="quote-section">
108 |         {error && <p className="error">{error}</p>}
109 |         {quote ? (
110 |           <blockquote className="quote">
111 |             <p>"{quote.content}"</p>
112 |             <footer>- {quote.author}</footer>
113 |           </blockquote>
114 |         ) : (
115 |           <p className="loading">Loading quote...</p>
116 |         )}
117 |         <button className="refresh-quote" onClick={fetchQuote}>
118 |           New Quote
119 |         </button>
120 |       </div>
121 |     </div>
122 |   );
123 | }
124 |

--------------------------------------------------------------------------------
/src/pages/Register.tsx:
--------------------------------------------------------------------------------
  1 | // src/pages/Register.tsx
  2 | import React, { useState, useContext } from 'react';
  3 | import { Link, useNavigate } from 'react-router-dom';
  4 | import '../styles/Register.css'; 
  5 | import { UserContext } from '../hooks/UserContext';
  6 | 
  7 | /**
  8 |  * Register Component
  9 |  * ------------------
 10 |  * This component renders the registration form with a two-panel layout.
 11 |  * The left panel contains branding and feature information, while the right panel 
 12 |  * contains the form where a user can register.
 13 |  *
 14 |  * When the form is submitted, it calls the register function from UserContext.
 15 |  * Upon successful registration, it fetches the full user info via GET /api/auth/me,
 16 |  * stores the data (including the JWT token) in the context, and redirects the user
 17 |  * to the dashboard.
 18 |  */
 19 | const Register: React.FC = () => {
 20 |   // Local state to manage form data
 21 |   const [formData, setFormData] = useState({
 22 |     name: '',
 23 |     email: '',
 24 |     password: '',
 25 |     role: 'client',
 26 |   });
 27 |   
 28 |   // Local state for displaying success/error messages to the user
 29 |   const [message, setMessage] = useState<string>('');
 30 |   
 31 |   // Get the register function from the global UserContext
 32 |   const { register } = useContext(UserContext);
 33 |   // useNavigate hook to programmatically navigate to a different route after registration
 34 |   const navigate = useNavigate();
 35 | 
 36 |   // Handle input changes by updating the formData state
 37 |   const handleChange = (
 38 |     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
 39 |   ) => {
 40 |     setFormData({ ...formData, [e.target.name]: e.target.value });
 41 |   };
 42 | 
 43 |   // Handle form submission
 44 |   const handleSubmit = async (e: React.FormEvent) => {
 45 |     e.preventDefault();
 46 |     try {
 47 |       // Call the register function from context, which performs the registration 
 48 |       // and immediately fetches the user info via GET /api/auth/me.
 49 |       await register(formData.name, formData.email, formData.password);
 50 |       // If registration is successful, update the message state
 51 |       setMessage('✅ Registration successful!');
 52 |       // Redirect the user to the dashboard (or home) page
 53 |       navigate('/dashboard');
 54 |     } catch (err: any) {
 55 |       console.error('❌ Registration failed:', err.response?.data || err.message);
 56 |       // Display the error message from the backend, if available
 57 |       setMessage(err.response?.data?.msg || '❌ Registration failed. Please try again.');
 58 |     }
 59 |   };
 60 | 
 61 |   return (
 62 |     <div className="register-page">
 63 |       {/* Left Panel: Branding and Features */}
 64 |       <div className="left-panel">
 65 |         <h1>Welcome to MindVision 💫</h1>
 66 |         <p>Your journey to clarity and confidence starts here.</p>
 67 |         <div className="feature-list">
 68 |           <p>✔ Personal Growth</p>
 69 |           <p>✔ 1-on-1 Sessions</p>
 70 |           <p>✔ Secure & Confidential</p>
 71 |         </div>
 72 |         <div className="testimonial">
 73 |           <em>"Working with MindVision changed my life!"</em>
 74 |           <p>- A grateful client 💜</p>
 75 |         </div>
 76 |       </div>
 77 | 
 78 |       {/* Right Panel: Registration Form */}
 79 |       <div className="right-panel">
 80 |         <form className="register-form" onSubmit={handleSubmit}>
 81 |           <h2>Create Your Account</h2>
 82 | 
 83 |           <input
 84 |             type="text"
 85 |             name="name"
 86 |             placeholder="Full Name"
 87 |             value={formData.name}
 88 |             onChange={handleChange}
 89 |             required
 90 |           />
 91 | 
 92 |           <input
 93 |             type="email"
 94 |             name="email"
 95 |             placeholder="Email Address"
 96 |             value={formData.email}
 97 |             onChange={handleChange}
 98 |             required
 99 |           />
100 | 
101 |           <input
102 |             type="password"
103 |             name="password"
104 |             placeholder="Create Password"
105 |             value={formData.password}
106 |             onChange={handleChange}
107 |             required
108 |           />
109 | 
110 |           <select name="role" value={formData.role} onChange={handleChange}>
111 |             <option value="client">Client</option>
112 |             <option value="coach">Coach</option>
113 |           </select>
114 | 
115 |           <button type="submit">Sign Up</button>
116 | 
117 |           {/* Display success or error message */}
118 |           <p className="message">{message}</p>
119 | 
120 |           <p className="link">
121 |             Already have an account? <Link to="/login">Log in</Link>
122 |           </p>
123 |         </form>
124 |       </div>
125 |     </div>
126 |   );
127 | };
128 | 
129 | export default Register;
130 |

--------------------------------------------------------------------------------
/src/pages/Services.tsx:
--------------------------------------------------------------------------------
  1 | // src/pages/Services.tsx
  2 | 
  3 | import React from 'react';
  4 | import { Link } from 'react-router-dom';
  5 | import '../styles/Services.css';
  6 | 
  7 | export default function Services() {
  8 |   return (
  9 |     <div className="services-container">
 10 |       {/* Header */}
 11 |       <div className="services-header">
 12 |         <h1>Services</h1>
 13 |         <p className="services-tagline">
 14 |           Personalized coaching solutions to transform your mindset and achieve your goals
 15 |         </p>
 16 |       </div>
 17 | 
 18 |       {/* Pricing Cards */}
 19 |       <div className="pricing-section">
 20 |         <h2>Coaching Programs</h2>
 21 |         <div className="pricing-cards">
 22 |           <div className="pricing-card">
 23 |             <div className="pricing-card-header">
 24 |               <h3>Discovery Session</h3>
 25 |               <div className="pricing-amount">$99</div>
 26 |               <p className="pricing-period">One-time session</p>
 27 |             </div>
 28 |             <div className="pricing-features">
 29 |               <ul>
 30 |                 <li>90-minute deep dive consultation</li>
 31 |                 <li>Personalized action plan</li>
 32 |                 <li>Identify key limiting beliefs</li>
 33 |                 <li>Goal setting framework</li>
 34 |               </ul>
 35 |             </div>
 36 |             <Link to="/register" className="pricing-cta">Get Started</Link>
 37 |           </div>
 38 | 
 39 |           <div className="pricing-card popular">
 40 |             <div className="popular-badge">Most Popular</div>
 41 |             <div className="pricing-card-header">
 42 |               <h3>Transformation Package</h3>
 43 |               <div className="pricing-amount">$497</div>
 44 |               <p className="pricing-period">Monthly</p>
 45 |             </div>
 46 |             <div className="pricing-features">
 47 |               <ul>
 48 |                 <li>4 one-hour coaching sessions per month</li>
 49 |                 <li>Weekly accountability check-ins</li>
 50 |                 <li>Personalized growth exercises</li>
 51 |                 <li>Email support between sessions</li>
 52 |                 <li>Custom resource library access</li>
 53 |               </ul>
 54 |             </div>
 55 |             <Link to="/register" className="pricing-cta">Transform Your Life</Link>
 56 |           </div>
 57 | 
 58 |           <div className="pricing-card">
 59 |             <div className="pricing-card-header">
 60 |               <h3>VIP Intensive</h3>
 61 |               <div className="pricing-amount">$1,997</div>
 62 |               <p className="pricing-period">3-month commitment</p>
 63 |             </div>
 64 |             <div className="pricing-features">
 65 |               <ul>
 66 |                 <li>6 one-hour coaching sessions per month</li>
 67 |                 <li>Unlimited text/email support</li>
 68 |                 <li>Customized mindset training</li>
 69 |                 <li>Personal development assessment</li>
 70 |                 <li>VIP day (4 hours of focused coaching)</li>
 71 |                 <li>Priority scheduling</li>
 72 |               </ul>
 73 |             </div>
 74 |             <Link to="/register" className="pricing-cta">Apply Now</Link>
 75 |           </div>
 76 | 
 77 |           <div className="pricing-card">
 78 |             <div className="pricing-card-header">
 79 |               <h3>Executive Mastery</h3>
 80 |               <div className="pricing-amount">$2,997</div>
 81 |               <p className="pricing-period">3-month commitment</p>
 82 |             </div>
 83 |             <div className="pricing-features">
 84 |               <ul>
 85 |                 <li>8 one-hour sessions per month</li>
 86 |                 <li>Leadership development focus</li>
 87 |                 <li>Strategic career planning</li>
 88 |                 <li>Work-life balance optimization</li>
 89 |                 <li>Communication skills enhancement</li>
 90 |                 <li>Team dynamics coaching</li>
 91 |                 <li>24/7 priority support</li>
 92 |               </ul>
 93 |             </div>
 94 |             <Link to="/register" className="pricing-cta">Elevate Your Leadership</Link>
 95 |           </div>
 96 |         </div>
 97 |       </div>
 98 | 
 99 |       {/* Benefits Section */}
100 |       <div className="benefits-section">
101 |         <h2>How You'll Benefit</h2>
102 |         <div className="benefits-container">
103 |           <div className="benefit-item">
104 |             <div className="benefit-icon">✨</div>
105 |             <h3>Clarity & Direction</h3>
106 |             <p>Gain crystal-clear vision on your goals and the optimal path to achieve them</p>
107 |           </div>
108 |           <div className="benefit-item">
109 |             <div className="benefit-icon">💪</div>
110 |             <h3>Confidence & Resilience</h3>
111 |             <p>Develop unwavering self-belief and the ability to overcome any obstacle</p>
112 |           </div>
113 |           <div className="benefit-item">
114 |             <div className="benefit-icon">🚀</div>
115 |             <h3>Accelerated Results</h3>
116 |             <p>Achieve your goals faster with proven strategies and personalized guidance</p>
117 |           </div>
118 |           <div className="benefit-item">
119 |             <div className="benefit-icon">🔄</div>
120 |             <h3>Lasting Transformation</h3>
121 |             <p>Create sustainable change through new mindsets and empowering habits</p>
122 |           </div>
123 |         </div>
124 |       </div>
125 | 
126 |       {/* CTA Section */}
127 |       <div className="cta-section">
128 |         <div className="cta-content">
129 |           <h2>Ready to Transform Your Life?</h2>
130 |           <p>
131 |             <span className="highlight">Take the first step</span> toward becoming your best self today.
132 |           </p>
133 |           <Link to="/register" className="cta-button">Begin Your Journey Now</Link>
134 |         </div>
135 |       </div>
136 |     </div>
137 |   );
138 | }
139 |

--------------------------------------------------------------------------------
/src/styles/Services.css:
--------------------------------------------------------------------------------
  1 | .services-container {
  2 |   /* Instead of padding: 5rem 5%, we use a fixed max-width + auto margin 
  3 |      to avoid horizontal overflow on wide screens. */
  4 |   background-color: var(--light);
  5 |   max-width: 1400px;       /* The container won’t exceed 1400px in width */
  6 |   margin: 0 auto;          /* Centers the container horizontally */
  7 |   padding: 5rem 2rem;      /* Vertical and horizontal padding */
  8 |   box-sizing: border-box;  /* Ensures padding is included in total width */
  9 | }
 10 | 
 11 | /* =============== SECTION HEADINGS =============== */
 12 | .services-header,
 13 | .pricing-section,
 14 | .benefits-section,
 15 | .cta-section {
 16 |   text-align: center;
 17 |   margin-bottom: 4rem;
 18 | }
 19 | 
 20 | .services-header h1,
 21 | .pricing-section h2,
 22 | .benefits-section h2,
 23 | .cta-section h2 {
 24 |   font-family: 'Playfair Display', serif;
 25 |   font-size: 2.5rem;
 26 |   color: var(--secondary);
 27 |   margin-bottom: 1rem;
 28 | }
 29 | 
 30 | .services-tagline,
 31 | .cta-section p {
 32 |   font-size: 1.2rem;
 33 |   max-width: 700px;
 34 |   margin: 0 auto;
 35 |   color: var(--primary);
 36 | }
 37 | 
 38 | /* =============== PRICING SECTION =============== */
 39 | .pricing-cards {
 40 |   display: grid;
 41 |   grid-template-columns: repeat(4, 1fr);
 42 |   gap: 2rem;
 43 |   max-width: 1200px;        /* The grid won’t exceed 1200px */
 44 |   margin: 0 auto 5rem;      /* Centered and spaced from bottom */
 45 |   padding: 0 2rem;          /* Horizontal padding so cards aren’t flush against screen edges */
 46 |   box-sizing: border-box;
 47 | }
 48 | 
 49 | .pricing-card {
 50 |   background-color: white;
 51 |   border-radius: 16px;
 52 |   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
 53 |   padding: 2rem;
 54 |   position: relative;
 55 |   transition: transform 0.3s, box-shadow 0.3s;
 56 |   height: 100%;
 57 |   display: flex;
 58 |   flex-direction: column;
 59 | }
 60 | 
 61 | .pricing-card:hover {
 62 |   transform: translateY(-5px);
 63 |   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
 64 | }
 65 | 
 66 | .popular-badge {
 67 |   position: absolute;
 68 |   top: -12px;
 69 |   right: -12px;
 70 |   background-color: var(--accent);
 71 |   color: white;
 72 |   padding: 0.4rem 0.8rem;
 73 |   font-size: 0.75rem;
 74 |   font-weight: bold;
 75 |   border-radius: 6px;
 76 | }
 77 | 
 78 | .pricing-card-header h3 {
 79 |   color: var(--secondary);
 80 |   font-size: 1.4rem;
 81 |   margin-bottom: 0.5rem;
 82 | }
 83 | 
 84 | .pricing-amount {
 85 |   font-size: 2rem;
 86 |   font-weight: bold;
 87 |   color: var(--primary);
 88 | }
 89 | 
 90 | .pricing-period {
 91 |   color: var(--text);
 92 |   font-size: 0.95rem;
 93 |   margin-bottom: 1rem;
 94 | }
 95 | 
 96 | .pricing-features ul {
 97 |   list-style: none;
 98 |   padding: 0;
 99 |   margin: 1rem 0;
100 |   font-size: 0.95rem;
101 | }
102 | 
103 | .pricing-features li {
104 |   margin-bottom: 0.5rem;
105 | }
106 | 
107 | .pricing-cta {
108 |   display: inline-block;
109 |   margin-top: 1rem;
110 |   background-color: var(--secondary);
111 |   color: white;
112 |   padding: 0.6rem 1.2rem;
113 |   font-weight: 600;
114 |   border-radius: 4px;
115 |   text-decoration: none;
116 |   transition: background-color 0.3s;
117 | }
118 | 
119 | .pricing-cta:hover {
120 |   background-color: var(--primary);
121 | }
122 | 
123 | /* =============== BENEFITS SECTION =============== */
124 | .benefits-container {
125 |   display: grid;
126 |   grid-template-columns: repeat(4, 1fr);
127 |   gap: 2rem;
128 |   max-width: 2400px;       /* The grid won’t exceed 1200px */
129 |   margin: 0 auto 5rem;     /* Centered and spaced from bottom */
130 |   padding: 0 2rem;         /* Horizontal padding so boxes aren’t flush against screen edges */
131 |   box-sizing: border-box;
132 | }
133 | 
134 | .benefit-item {
135 |   background-color: white;
136 |   padding: 2rem;
137 |   border-radius: 12px;
138 |   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.07);
139 |   text-align: center;
140 |   height: 100%;
141 |   display: flex;
142 |   flex-direction: column;
143 | }
144 | 
145 | .benefit-icon {
146 |   font-size: 2.5rem;
147 |   margin-bottom: 1rem;
148 |   color: var(--accent);
149 | }
150 | 
151 | .benefit-item h3 {
152 |   color: var(--secondary);
153 |   font-size: 1.25rem;
154 |   margin-bottom: 0.5rem;
155 | }
156 | 
157 | .benefit-item p {
158 |   font-size: 0.95rem;
159 |   color: var(--text);
160 | }
161 | 
162 | /* =============== CTA SECTION =============== */
163 | .cta-section {
164 |   padding: 5rem 2rem;
165 |   background-color: #ffffff;
166 |   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
167 |   margin: 6rem auto 0;
168 |   max-width: 900px;
169 |   border-radius: 12px;
170 | }
171 | 
172 | .cta-content {
173 |   text-align: center;
174 | }
175 | 
176 | .cta-content h2 {
177 |   font-family: 'Playfair Display', serif;
178 |   font-size: 2.8rem;
179 |   font-weight: 700;
180 |   color: var(--secondary);
181 |   margin-bottom: 1rem;
182 | }
183 | 
184 | .cta-content p {
185 |   font-size: 1.15rem;
186 |   color: var(--text);
187 |   margin-bottom: 2.2rem;
188 |   max-width: 600px;
189 |   margin-inline: auto;
190 |   line-height: 1.6;
191 | }
192 | 
193 | .cta-content .highlight {
194 |   font-weight: 600;
195 |   color: var(--primary);
196 | }
197 | 
198 | .cta-button {
199 |   display: inline-block;
200 |   background-color: var(--primary);
201 |   color: white;
202 |   font-size: 1rem;
203 |   padding: 0.9rem 2.2rem;
204 |   border-radius: 8px;
205 |   text-decoration: none;
206 |   font-weight: 600;
207 |   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
208 |   transition: background-color 0.3s ease, transform 0.2s ease;
209 | }
210 | 
211 | .cta-button:hover {
212 |   background-color: var(--secondary);
213 |   transform: translateY(-2px);
214 | }
215 | 
216 | /* =============== RESPONSIVE BREAKPOINTS =============== */
217 | @media (max-width: 1200px) {
218 |   .pricing-cards,
219 |   .benefits-container {
220 |     grid-template-columns: repeat(2, 1fr);
221 |   }
222 | }
223 | 
224 | @media (max-width: 768px) {
225 |   .pricing-cards,
226 |   .benefits-container {
227 |     grid-template-columns: 1fr;
228 |   }
229 | }
230 |

--------------------------------------------------------------------------------
/src/styles/Home.css:
--------------------------------------------------------------------------------
  1 | @media (max-width: 1100px) {
  2 |   /* Responsive styling for medium screens */
  3 |   .benefits-container {
  4 |     justify-content: center;
  5 |   }
  6 |   
  7 |   .benefit-item {
  8 |     flex-basis: calc(50% - 2rem);
  9 |     margin: 1rem auto;
 10 |   }
 11 | }
 12 | 
 13 | @media (max-width: 768px) {
 14 |   /* Responsive styling for small screens */
 15 |   .hero-content {
 16 |     flex-direction: column;
 17 |   }
 18 |   
 19 |   .hero-text {
 20 |     padding-right: 0;
 21 |     margin-bottom: 2rem;
 22 |   }
 23 |   
 24 |   .benefit-item {
 25 |     flex-basis: 100%;
 26 |     max-width: 400px;
 27 |     margin: 1rem auto;
 28 |   }
 29 | }/* Import Google Fonts - Montserrat for body text and Playfair Display for headings */
 30 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
 31 | 
 32 | /* CSS Variables for consistent color scheme throughout the site */
 33 | :root {
 34 |   --primary: #3a6ea5;   
 35 |   --secondary: #004e98;  
 36 |   --accent: #ff6b6b;     
 37 |   --light: #f8f9fa;
 38 |   --dark: #343a40;       
 39 |   --text: #212529;       /* Main text color */
 40 | }
 41 | 
 42 | /* Reset default browser styles */
 43 | * {
 44 |   margin: 0;
 45 |   padding: 0;
 46 |   box-sizing: border-box;
 47 | }
 48 | 
 49 | /* Base body styles */
 50 | body {
 51 |   font-family: 'Montserrat', sans-serif;
 52 |   line-height: 1.6;
 53 |   color: var(--text);
 54 |   background-color: var(--light);
 55 | }
 56 | 
 57 | /* Main container that wraps all content */
 58 | .home-container {
 59 |   width: 100%;
 60 | }
 61 | 
 62 | /* Hero section - full height landing area with gradient background */
 63 | .hero-section {
 64 |   min-height: 100vh;
 65 |   padding: 80px 5% 40px;
 66 |   display: flex;
 67 |   align-items: center;
 68 |   background: linear-gradient(135deg, rgba(0,78,152,0.05) 0%, rgba(58,110,165,0.1) 100%);
 69 | }
 70 | 
 71 | /* Content container for the hero section - uses flexbox for responsive layout */
 72 | .hero-content {
 73 |   display: flex;
 74 |   width: 100%;
 75 |   max-width: 1200px;
 76 |   margin: 0 auto;
 77 |   align-items: center;
 78 |   justify-content: space-between;
 79 | }
 80 | 
 81 | /* Left side of hero with heading and call-to-action */
 82 | .hero-text {
 83 |   flex: 1;
 84 |   padding-right: 2rem;
 85 | }
 86 | 
 87 | /* Main headline styling with elegant serif font */
 88 | .hero-text h1 {
 89 |   font-family: 'Playfair Display', serif;
 90 |   font-size: 3rem;
 91 |   margin-bottom: 1rem;
 92 |   color: var(--secondary);
 93 | }
 94 | 
 95 | /* Subtitle text below main heading */
 96 | .hero-subtitle {
 97 |   font-size: 1.2rem;
 98 |   margin-bottom: 2rem;
 99 |   max-width: 600px;
100 | }
101 | 
102 | /* Call-to-action button styling */
103 | .cta-button {
104 |   background-color: var(--primary);
105 |   color: white;
106 |   border: none;
107 |   padding: 0.8rem 2rem;
108 |   border-radius: 4px;
109 |   font-weight: 600;
110 |   font-size: 1rem;
111 |   cursor: pointer;
112 |   transition: background-color 0.3s; /* Smooth transition for hover effect */
113 | }
114 | 
115 | /* Button hover state - darkens slightly */
116 | .cta-button:hover {
117 |   background-color: var(--secondary);
118 | }
119 | 
120 | /* Right side of hero containing the profile image */
121 | .hero-image {
122 |   flex: 1;
123 |   display: flex;
124 |   justify-content: center;
125 | }
126 | 
127 | /* Circular container for profile image */
128 | .profile-circle {
129 |   width: 350px;
130 |   height: 350px;
131 |   border-radius: 50%;
132 |   overflow: hidden;
133 |   border: 8px solid white; /* White border around circle */
134 |   box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Subtle shadow for depth */
135 |   background-color: #e9ecef; /* Fallback color if image fails to load */
136 |   display: flex;
137 |   align-items: center;
138 |   justify-content: center;
139 | }
140 | 
141 | /* Image styling to ensure proper fit in circle */
142 | .profile-circle img {
143 |   width: 100%;
144 |   height: 100%;
145 |   object-fit: cover; /* Ensures image covers area without distortion */
146 | }
147 | 
148 | /* About section styling - white background with padding */
149 | .about-section {
150 |   padding: 5rem 5%;
151 |   background-color: white;
152 | }
153 | 
154 | /* About section heading */
155 | .about-section h2 {
156 |   font-family: 'Playfair Display', serif;
157 |   font-size: 2.5rem;
158 |   text-align: center;
159 |   margin-bottom: 3rem;
160 |   color: var(--secondary);
161 | }
162 | 
163 | /* Content container for about text */
164 | .about-content {
165 |   max-width: 800px;
166 |   margin: 0 auto;
167 |   margin-bottom: 3rem; /* Reduced space between About and Approach sections */
168 | }
169 | 
170 | /* Paragraph styling within about text */
171 | .about-text p {
172 |   margin-bottom: 1.5rem;
173 |   font-size: 1.1rem;
174 | }
175 | 
176 | /* Coaching Approach / Benefits section styling */
177 | .benefits-section {
178 |   margin-top: 2rem; /* Reduced space above the Approach section */
179 |   padding-top: 1rem;
180 |   border-top: 1px solid rgba(0,0,0,0.05); /* Subtle divider between sections */
181 | }
182 | 
183 | /* Container for the 3-column layout */
184 | .benefits-container {
185 |   display: flex;
186 |   flex-wrap: wrap; /* Allows responsive column layout */
187 |   justify-content: flex-start; /* Align to the left to create space on the right */
188 |   gap: 2.5rem; /* Space between columns for better readability */
189 |   max-width: 75%; /* Reduce the width to create space on the right */
190 |   margin: 0 auto 0 0; /* Align container to the left */
191 |   padding-left: 5%; /* Add padding to match other sections */
192 | }
193 | 
194 | /* Individual benefit/approach card styling */
195 | .benefit-item {
196 |   flex: 1;
197 |   min-width: 300px;
198 |   max-width: 350px;
199 |   padding: 2rem;
200 |   background-color: white;
201 |   border-radius: 8px;
202 |   box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Subtle shadow for depth */
203 |   text-align: center;
204 |   transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover animation */
205 |   margin: 0 auto; /* Center the cards */
206 | }
207 | 
208 | /* Hover effect for benefit items - slight lift and enhanced shadow */
209 | .benefit-item:hover {
210 |   transform: translateY(-5px);
211 |   box-shadow: 0 8px 20px rgba(0,0,0,0.08);
212 | }
213 | 
214 | /* Emoji icon styling for benefit items */
215 | .benefit-icon {
216 |   font-size: 2.5rem;
217 |   margin-bottom: 1rem;
218 | }
219 | 
220 | /* Benefit item heading style */
221 | .benefit-item h3 {
222 |   font-family: 'Playfair Display', serif;
223 |   font-size: 1.5rem;
224 |   margin-bottom: 1rem;
225 |   color: var(--secondary);
226 | }
227 | 
228 | /* Benefit item paragraph text */
229 | .benefit-item p {
230 |   font-size: 1rem;
231 |   color: var(--text);
232 | }
233 | 
234 | /* Quote section with purple background */
235 | .quote-section {
236 |   padding: 5rem 5%;
237 |   background-color: rgb(131, 60, 163);
238 |   color: white;
239 |   text-align: center;
240 | }
241 | 
242 | /* Quote styling - larger elegant font */
243 | .quote {
244 |   max-width: 800px;
245 |   margin: 0 auto 2rem;
246 |   font-family: 'Playfair Display', serif;
247 |   font-size: 1.8rem;
248 |   font-style: italic;
249 |   line-height: 1.4;
250 | }
251 | 
252 | /* Quote paragraph styling */
253 | .quote p {
254 |   margin-bottom: 1rem;
255 | }
256 | 
257 | /* Quote attribution styling */
258 | .quote footer {
259 |   font-size: 1.2rem;
260 |   font-weight: 500;
261 |   font-family: 'Montserrat', sans-serif;
262 | }
263 | 
264 | /* Loading state text for quote */
265 | .loading {
266 |   font-size: 1.2rem;
267 |   margin-bottom: 2rem;
268 | }
269 | 
270 | /* Error message styling */
271 | .error {
272 |   color: var(--accent);
273 |   margin-bottom: 1rem;
274 |   font-weight: 500;
275 | }
276 | 
277 | /* Quote refresh button - semi-transparent with border */
278 | .refresh-quote {
279 |   background-color: rgba(34, 88, 211, 0.2);
280 |   color: white;
281 |   border: 2px solid white;
282 |   padding: 0.5rem 1.5rem;
283 |   border-radius: 4px;
284 |   cursor: pointer;
285 |   font-weight: 500;
286 |   transition: background-color 0.3s; /* Smooth hover transition */
287 | }
288 | 
289 | /* Refresh button hover state */
290 | .refresh-quote:hover {
291 |   background-color: rgba(255, 255, 255, 0.3);
292 | }

--------------------------------------------------------------------------------

Blog

{post.title}

Appointments

62 | {dateStr} at {timeStr} 63 |

Add New Appointment