|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Serenity Psychology | Professional Mental Health Services</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
|
|
|
:root { |
|
|
--primary: #4a6fa5; |
|
|
--primary-light: #6b8fc7; |
|
|
--primary-dark: #2d4b7e; |
|
|
--secondary: #ff8a5b; |
|
|
--light: #f8f9fa; |
|
|
--dark: #343a40; |
|
|
--gray: #6c757d; |
|
|
--light-gray: #e9ecef; |
|
|
--white: #ffffff; |
|
|
--success: #28a745; |
|
|
} |
|
|
|
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 12px 30px; |
|
|
border-radius: 50px; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
text-align: center; |
|
|
border: none; |
|
|
font-size: 16px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: var(--primary); |
|
|
color: var(--white); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: var(--primary-dark); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background-color: var(--secondary); |
|
|
color: var(--white); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background-color: #e07a4f; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(255, 138, 91, 0.3); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background-color: transparent; |
|
|
border: 2px solid var(--primary); |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background-color: var(--primary); |
|
|
color: var(--white); |
|
|
} |
|
|
|
|
|
.section { |
|
|
padding: 80px 0; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 0; |
|
|
width: 60px; |
|
|
height: 4px; |
|
|
background-color: var(--secondary); |
|
|
} |
|
|
|
|
|
.text-center { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.text-center .section-title::after { |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
z-index: 1000; |
|
|
background-color: var(--white); |
|
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
header.scrolled { |
|
|
padding: 10px 0; |
|
|
background-color: rgba(255, 255, 255, 0.98); |
|
|
} |
|
|
|
|
|
.header-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 20px 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
font-family: 'Playfair Display', serif; |
|
|
color: var(--primary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo img { |
|
|
height: 40px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-links li { |
|
|
margin-left: 30px; |
|
|
} |
|
|
|
|
|
.nav-links a { |
|
|
color: var(--dark); |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--secondary); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.nav-links a:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
color: var(--dark); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
background: linear-gradient(135deg, rgba(74, 111, 165, 0.9), rgba(74, 111, 165, 0.7)); |
|
|
background-image: url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-blend-mode: overlay; |
|
|
color: var(--white); |
|
|
padding: 200px 0 120px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -100px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 200px; |
|
|
background-color: var(--white); |
|
|
transform: skewY(-5deg); |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
max-width: 600px; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 3.2rem; |
|
|
margin-bottom: 20px; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 30px; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.hero-btns { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.features { |
|
|
background-color: var(--white); |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.features-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
margin-top: 50px; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background-color: var(--white); |
|
|
border-radius: 10px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
font-size: 2.5rem; |
|
|
color: var(--primary); |
|
|
margin-bottom: 20px; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.feature-card h3 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
|
|
|
.about { |
|
|
background-color: var(--light-gray); |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
margin-top: 50px; |
|
|
} |
|
|
|
|
|
.about-img { |
|
|
flex: 1; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.about-img img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.about-text h2 { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.about-text p { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.services { |
|
|
background-color: var(--white); |
|
|
} |
|
|
|
|
|
.services-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
margin-top: 50px; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background-color: var(--white); |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.service-img { |
|
|
height: 200px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.service-img img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.service-card:hover .service-img img { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.service-content { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.service-content h3 { |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark); |
|
|
font-size: 1.4rem; |
|
|
} |
|
|
|
|
|
.service-content p { |
|
|
margin-bottom: 20px; |
|
|
color: var(--gray); |
|
|
} |
|
|
|
|
|
|
|
|
.testimonials { |
|
|
background-color: var(--light-gray); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.testimonials::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 50px; |
|
|
background-color: var(--white); |
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); |
|
|
} |
|
|
|
|
|
.testimonials-container { |
|
|
position: relative; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding-top: 50px; |
|
|
} |
|
|
|
|
|
.testimonial-slide { |
|
|
background-color: var(--white); |
|
|
padding: 40px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
|
margin: 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.testimonial-slide::before { |
|
|
content: '\201C'; |
|
|
font-family: Georgia, serif; |
|
|
font-size: 5rem; |
|
|
color: var(--light-gray); |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 20px; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.testimonial-content { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
margin-bottom: 20px; |
|
|
font-style: italic; |
|
|
color: var(--gray); |
|
|
} |
|
|
|
|
|
.testimonial-author { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.author-img { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
overflow: hidden; |
|
|
margin-right: 15px; |
|
|
} |
|
|
|
|
|
.author-img img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.author-info h4 { |
|
|
margin-bottom: 5px; |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.author-info p { |
|
|
color: var(--gray); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.cta { |
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
|
|
color: var(--white); |
|
|
text-align: center; |
|
|
padding: 100px 0; |
|
|
} |
|
|
|
|
|
.cta h2 { |
|
|
color: var(--white); |
|
|
margin-bottom: 20px; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.cta p { |
|
|
font-size: 1.2rem; |
|
|
max-width: 700px; |
|
|
margin: 0 auto 30px; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background-color: var(--dark); |
|
|
color: var(--white); |
|
|
padding: 60px 0 20px; |
|
|
} |
|
|
|
|
|
.footer-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 40px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.footer-col h3 { |
|
|
color: var(--white); |
|
|
margin-bottom: 20px; |
|
|
font-size: 1.3rem; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.footer-col h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -8px; |
|
|
left: 0; |
|
|
width: 40px; |
|
|
height: 2px; |
|
|
background-color: var(--secondary); |
|
|
} |
|
|
|
|
|
.footer-col p, .footer-col a, .footer-col li { |
|
|
color: var(--light-gray); |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
.footer-col a:hover { |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.contact-info { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.contact-info li { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.contact-info i { |
|
|
margin-right: 10px; |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 50%; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
background-color: var(--secondary); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
text-align: center; |
|
|
padding-top: 20px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.footer-bottom p { |
|
|
font-size: 0.9rem; |
|
|
color: var(--light-gray); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
z-index: 2000; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: var(--white); |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
margin: 50px auto; |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
animation: modalopen 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes modalopen { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-50px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.close-modal { |
|
|
position: absolute; |
|
|
top: 15px; |
|
|
right: 15px; |
|
|
font-size: 1.5rem; |
|
|
color: var(--gray); |
|
|
cursor: pointer; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
|
|
|
.close-modal:hover { |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 20px; |
|
|
border-bottom: 1px solid var(--light-gray); |
|
|
} |
|
|
|
|
|
.modal-header h2 { |
|
|
color: var(--primary); |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: 12px 15px; |
|
|
border: 1px solid var(--light-gray); |
|
|
border-radius: 5px; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 992px) { |
|
|
.hero h1 { |
|
|
font-size: 2.8rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.about-img, .about-text { |
|
|
flex: none; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: calc(100vh - 80px); |
|
|
background-color: var(--white); |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
padding-top: 30px; |
|
|
transition: left 0.4s ease; |
|
|
} |
|
|
|
|
|
.nav-links.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.nav-links li { |
|
|
margin: 15px 0; |
|
|
} |
|
|
|
|
|
.header-container { |
|
|
padding: 15px 0; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
padding: 150px 0 100px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.hero-btns { |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.hero-btns .btn { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.section { |
|
|
padding: 60px 0; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 576px) { |
|
|
.hero h1 { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
width: 95%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header id="header"> |
|
|
<div class="container header-container"> |
|
|
<a href="#" class="logo"> |
|
|
<i class="fas fa-brain" style="margin-right: 10px; font-size: 1.8rem;"></i> |
|
|
<span>Serenity Psychology</span> |
|
|
</a> |
|
|
<button class="mobile-menu-btn" id="mobileMenuBtn"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<ul class="nav-links" id="navLinks"> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#about">About</a></li> |
|
|
<li><a href="#services">Services</a></li> |
|
|
<li><a href="#testimonials">Testimonials</a></li> |
|
|
<li><a href="#contact">Contact</a></li> |
|
|
<li><a href="#" class="btn btn-outline" id="bookNowBtn">Book Appointment</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero" id="home"> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<h1>Find Your Peace of Mind With Professional Therapy</h1> |
|
|
<p>Personalized mental health services designed to help you overcome challenges, build resilience, and live a more fulfilling life. Our licensed psychologists provide compassionate care in a safe, confidential environment.</p> |
|
|
<div class="hero-btns"> |
|
|
<a href="#" class="btn btn-primary" id="heroBookBtn">Book Your Session Today</a> |
|
|
<a href="#services" class="btn btn-secondary">Our Services</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section features"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title text-center">Why Choose Serenity Psychology?</h2> |
|
|
<p class="text-center" style="max-width: 700px; margin: 0 auto 50px;">We're committed to providing the highest quality mental health care with a personalized approach.</p> |
|
|
|
|
|
<div class="features-grid"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<h3>Licensed Professionals</h3> |
|
|
<p>All our therapists are fully licensed with years of clinical experience and ongoing training in the latest therapeutic approaches.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-user-lock"></i> |
|
|
</div> |
|
|
<h3>100% Confidential</h3> |
|
|
<p>Your privacy is our priority. All sessions are completely confidential in a safe, comfortable environment.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</div> |
|
|
<h3>Compassionate Care</h3> |
|
|
<p>We offer non-judgmental, empathetic support tailored to your unique needs and life circumstances.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3>Flexible Options</h3> |
|
|
<p>Choose in-person or virtual sessions to fit your schedule and comfort level, with flexible appointment times.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-hand-holding-heart"></i> |
|
|
</div> |
|
|
<h3>Evidence-Based</h3> |
|
|
<p>Our therapeutic methods are grounded in scientific research and proven to be effective for lasting change.</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-calendar-check"></i> |
|
|
</div> |
|
|
<h3>Easy Scheduling</h3> |
|
|
<p>Book, reschedule or cancel appointments easily through our online system with 24/7 access.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section about" id="about"> |
|
|
<div class="container"> |
|
|
<div class="about-content"> |
|
|
<div class="about-img"> |
|
|
<img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Therapist with client"> |
|
|
</div> |
|
|
<div class="about-text"> |
|
|
<h2 class="section-title">About Our Practice</h2> |
|
|
<p>Serenity Psychology was founded with the mission to make high-quality mental health care accessible and stigma-free. We believe everyone deserves support on their journey to better mental health.</p> |
|
|
<p>Our team of experienced psychologists specializes in various therapeutic approaches including Cognitive Behavioral Therapy (CBT), Psychodynamic Therapy, Mindfulness-Based Therapy, and more. We work with adults, adolescents, couples, and families dealing with a wide range of mental health concerns.</p> |
|
|
<p>Whether you're facing anxiety, depression, relationship issues, life transitions, or simply want to better understand yourself, we're here to help you navigate these challenges with expertise and compassion.</p> |
|
|
<a href="#" class="btn btn-primary" id="aboutBtn">Meet Our Therapists</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section services" id="services"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title text-center">Our Therapeutic Services</h2> |
|
|
<p class="text-center" style="max-width: 700px; margin: 0 auto 50px;">We offer comprehensive mental health services tailored to your individual needs.</p> |
|
|
|
|
|
<div class="services-grid"> |
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Individual Therapy"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Individual Therapy</h3> |
|
|
<p>One-on-one sessions to address personal challenges, mental health concerns, and personal growth in a safe environment.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1529333164855-9f5d5e335b25?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Couples Counseling"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Couples Counseling</h3> |
|
|
<p>Improve communication, resolve conflicts, and strengthen your relationship with professional guidance.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1573497491765-dccce02b29df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Family Therapy"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Family Therapy</h3> |
|
|
<p>Help your family navigate challenges, improve dynamics, and build healthier relationships with each other.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1530099486328-e021101a494a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Teen & Adolescent"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Teen & Adolescent Therapy</h3> |
|
|
<p>Specialized support for young people dealing with school stress, social issues, anxiety, and behavioral concerns.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Trauma Therapy"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Trauma Therapy</h3> |
|
|
<p>Evidence-based approaches to help process traumatic experiences and build resilience.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card"> |
|
|
<div class="service-img"> |
|
|
<img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Anxiety & Depression"> |
|
|
</div> |
|
|
<div class="service-content"> |
|
|
<h3>Anxiety & Depression Treatment</h3> |
|
|
<p>Specialized care for anxiety disorders, depression, and mood-related challenges using proven methods.</p> |
|
|
<a href="#" class="btn btn-outline">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section testimonials" id="testimonials"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title text-center">What Our Clients Say</h2> |
|
|
|
|
|
<div class="testimonials-container"> |
|
|
<div class="testimonial-slide"> |
|
|
<p class="testimonial-content">"Working with my therapist at Serenity Psychology has been life-changing. I've learned coping strategies that have helped me manage my anxiety in ways I never thought possible. I'm forever grateful for their compassionate and professional approach."</p> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-img"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>Sarah J.</h4> |
|
|
<p>Anxiety Treatment</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-slide" style="display: none;"> |
|
|
<p class="testimonial-content">"Couples counseling saved our marriage. We were on the brink of separation when we started, and through the guidance of our therapist, we've rebuilt trust and communication. We now have tools to resolve conflicts in healthy ways."</p> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-img"> |
|
|
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Michelle R."> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>Michelle R.</h4> |
|
|
<p>Couples Counseling</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-slide" style="display: none;"> |
|
|
<p class="testimonial-content">"After my PTSD diagnosis, I didn't think I'd ever feel like myself again. The trauma therapy I received here helped me process my experiences and regain control of my life. The team is incredibly skilled and genuinely cares."</p> |
|
|
<div class="testimonial-author"> |
|
|
<div class="author-img"> |
|
|
<img src="https://randomuser.me/api/portraits/men/28.jpg" alt="Daniel T."> |
|
|
</div> |
|
|
<div class="author-info"> |
|
|
<h4>Daniel T.</h4> |
|
|
<p>Trauma Therapy</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="text-align: center; margin-top: 30px;"> |
|
|
<span class="testimonial-dot active" data-slide="0"></span> |
|
|
<span class="testimonial-dot" data-slide="1"></span> |
|
|
<span class="testimonial-dot" data-slide="2"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section cta"> |
|
|
<div class="container"> |
|
|
<h2>Ready to Take the First Step?</h2> |
|
|
<p>Your mental health journey starts with a single conversation. Schedule your confidential consultation today and begin your path to healing and growth.</p> |
|
|
<a href="#" class="btn btn-secondary" id="ctaBtn">Book Your Free 15-Minute Consultation</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="section footer" id="contact"> |
|
|
<div class="container"> |
|
|
<div class="footer-container"> |
|
|
<div class="footer-col"> |
|
|
<h3>Serenity Psychology</h3> |
|
|
<p>Providing compassionate, professional mental health services to help you live your best life.</p> |
|
|
<div class="social-links"> |
|
|
<a href="#"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Quick Links</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#about">About Us</a></li> |
|
|
<li><a href="#services">Services</a></li> |
|
|
<li><a href="#testimonials">Testimonials</a></li> |
|
|
<li><a href="#" id="footerBookBtn">Book Appointment</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Services</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#">Individual Therapy</a></li> |
|
|
<li><a href="#">Couples Counseling</a></li> |
|
|
<li><a href="#">Family Therapy</a></li> |
|
|
<li><a href="#">Teen Therapy</a></li> |
|
|
<li><a href="#">Trauma Therapy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Contact Us</h3> |
|
|
<ul class="contact-info"> |
|
|
<li> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
<span>123 Wellness Drive, Suite 200<br>Portland, OR 97201</span> |
|
|
</li> |
|
|
<li> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
<span>(503) 555-1234</span> |
|
|
</li> |
|
|
<li> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span>info@serenitypsychology.com</span> |
|
|
</li> |
|
|
<li> |
|
|
<i class="fas fa-clock"></i> |
|
|
<span>Mon-Fri: 8am - 7pm<br>Sat: 9am - 3pm</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 Serenity Psychology. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="modal" id="appointmentModal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close-modal">×</span> |
|
|
<div class="modal-header"> |
|
|
<h2>Book Your Appointment</h2> |
|
|
<p>Complete the form below and we'll contact you within 24 hours to confirm your session.</p> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="appointmentForm"> |
|
|
<div class="form-group"> |
|
|
<label for="fullName">Full Name *</label> |
|
|
<input type="text" id="fullName" class="form-control" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email">Email Address *</label> |
|
|
<input type="email" id="email" class="form-control" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="phone">Phone Number *</label> |
|
|
<input type="tel" id="phone" class="form-control" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="service">Service Interested In *</label> |
|
|
<select id="service" class="form-control" required> |
|
|
<option value="" selected disabled>Select a service</option> |
|
|
<option value="Individual Therapy">Individual Therapy</option> |
|
|
<option value="Couples Counseling">Couples Counseling</option> |
|
|
<option value="Family Therapy">Family Therapy</option> |
|
|
<option value="Teen Therapy">Teen Therapy</option> |
|
|
<option value="Trauma Therapy">Trauma Therapy</option> |
|
|
<option value="Anxiety/Depression">Anxiety/Depression Treatment</option> |
|
|
<option value="Other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="preferredDate">Preferred Date/Time *</label> |
|
|
<input type="text" id="preferredDate" class="form-control" placeholder="e.g., Weekday afternoons" required> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="message">Briefly describe what you'd like to address (optional)</label> |
|
|
<textarea id="message" class="form-control" rows="4"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn btn-primary" style="width: 100%;">Submit Request</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const navLinks = document.getElementById('navLinks'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
navLinks.classList.toggle('active'); |
|
|
mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? |
|
|
'<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-links a').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
navLinks.classList.remove('active'); |
|
|
mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const header = document.getElementById('header'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.scrollY > 100) { |
|
|
header.classList.add('scrolled'); |
|
|
} else { |
|
|
header.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const modal = document.getElementById('appointmentModal'); |
|
|
const openModalBtns = [ |
|
|
document.getElementById('bookNowBtn'), |
|
|
document.getElementById('heroBookBtn'), |
|
|
document.getElementById('aboutBtn'), |
|
|
document.getElementById('ctaBtn'), |
|
|
document.getElementById('footerBookBtn') |
|
|
]; |
|
|
const closeModal = document.querySelector('.close-modal'); |
|
|
|
|
|
openModalBtns.forEach(btn => { |
|
|
if (btn) { |
|
|
btn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
modal.style.display = 'block'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
modal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === modal) { |
|
|
modal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const testimonialSlides = document.querySelectorAll('.testimonial-slide'); |
|
|
const dots = document.querySelectorAll('.testimonial-dot'); |
|
|
let currentSlide = 0; |
|
|
|
|
|
function showSlide(n) { |
|
|
testimonialSlides.forEach(slide => slide.style.display = 'none'); |
|
|
dots.forEach(dot => dot.classList.remove('active')); |
|
|
|
|
|
currentSlide = (n + testimonialSlides.length) % testimonialSlides.length; |
|
|
testimonialSlides[currentSlide].style.display = 'block'; |
|
|
dots[currentSlide].classList.add('active'); |
|
|
} |
|
|
|
|
|
dots.forEach(dot => { |
|
|
dot.addEventListener('click', () => { |
|
|
showSlide(parseInt(dot.getAttribute('data-slide'))); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
showSlide(currentSlide + 1); |
|
|
}, 5000); |
|
|
|
|
|
|
|
|
const appointmentForm = document.getElementById('appointmentForm'); |
|
|
|
|
|
appointmentForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const formData = { |
|
|
name: document.getElementById('fullName').value, |
|
|
email: document.getElementById('email').value, |
|
|
phone: document.getElementById('phone').value, |
|
|
service: document.getElementById('service').value, |
|
|
preferredDate: document.getElementById('preferredDate').value, |
|
|
message: document.getElementById('message').value |
|
|
}; |
|
|
|
|
|
|
|
|
console.log('Form submitted:', formData); |
|
|
|
|
|
|
|
|
alert('Thank you! Your appointment request has been submitted. We will contact you shortly to confirm your session.'); |
|
|
|
|
|
|
|
|
appointmentForm.reset(); |
|
|
modal.style.display = 'none'; |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
