Skip to content

Commit f250cc6

Browse files
gcclinuxgcclinux
committed
Added Carousel idea
1 parent b1dd4f1 commit f250cc6

File tree

6 files changed

+685
-0
lines changed

6 files changed

+685
-0
lines changed

‎src/App.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { LanguageProvider, useLanguage } from './context/LanguageContext';
33
import Navbar from './components/Navbar';
44
import HomeEN from './pages_en/Home';
55
import PricesEN from './pages_en/Prices';
6+
import CarouselEN from './pages_en/Carousel';
67
import AboutEN from './pages_en/About';
78
import ContactEN from './pages_en/Contact';
89
import AppointmentEN from './pages_en/Appointment';
910
import HomePL from './pages_pl/Home';
1011
import PricesPL from './pages_pl/Prices';
12+
import CarouselPL from './pages_pl/Carousel';
1113
import AboutPL from './pages_pl/About';
1214
import ContactPL from './pages_pl/Contact';
1315
import AppointmentPL from './pages_pl/Appointment';
@@ -17,6 +19,7 @@ function AppContent() {
1719

1820
const Home = language === 'en' ? HomeEN : HomePL;
1921
const Prices = language === 'en' ? PricesEN : PricesPL;
22+
const Carousel = language === 'en' ? CarouselEN : CarouselPL;
2023
const About = language === 'en' ? AboutEN : AboutPL;
2124
const Contact = language === 'en' ? ContactEN : ContactPL;
2225
const Appointment = language === 'en' ? AppointmentEN : AppointmentPL;
@@ -27,6 +30,7 @@ function AppContent() {
2730
<Routes>
2831
<Route path="/" element={<Home />} />
2932
<Route path="/prices" element={<Prices />} />
33+
<Route path="/carousel" element={<Carousel />} />
3034
<Route path="/about" element={<About />} />
3135
<Route path="/contact" element={<Contact />} />
3236
<Route path="/appointment" element={<Appointment />} />

‎src/components/Navbar.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ export default function Navbar() {
99
en: {
1010
home: 'Home',
1111
prices: 'Prices',
12+
carousel: 'Carousel',
1213
about: 'About',
1314
contact: 'Contact',
1415
appointment: 'Book Appointment'
1516
},
1617
pl: {
1718
home: 'Strona Główna',
1819
prices: 'Cennik',
20+
carousel: 'Karuzela',
1921
about: 'O Mnie',
2022
contact: 'Kontakt',
2123
appointment: 'Umów Wizytę'
@@ -29,6 +31,7 @@ export default function Navbar() {
2931
<ul className="nav-menu">
3032
<li><Link to="/">{text[language].home}</Link></li>
3133
<li><Link to="/prices">{text[language].prices}</Link></li>
34+
<li><strong><Link to="/carousel">{text[language].carousel}</Link></strong></li>
3235
<li><Link to="/about">{text[language].about}</Link></li>
3336
<li><Link to="/contact">{text[language].contact}</Link></li>
3437
<li><Link to="/prices" className="nav-cta">{text[language].appointment}</Link></li>

‎src/pages_en/Carousel.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
.prices-page {
2+
background: var(--bg-light);
3+
min-height: 100vh;
4+
}
5+
6+
.prices-header {
7+
position: relative;
8+
color: var(--white);
9+
padding: 6rem 2rem;
10+
text-align: center;
11+
background-image: url('/src/assets/background.jpg');
12+
background-size: cover;
13+
background-position: center;
14+
background-repeat: no-repeat;
15+
}
16+
17+
.prices-header::before {
18+
content: '';
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
right: 0;
23+
bottom: 0;
24+
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
25+
opacity: 0.5;
26+
z-index: 1;
27+
}
28+
29+
.prices-header h1 {
30+
position: relative;
31+
z-index: 2;
32+
font-size: 2.5rem;
33+
margin-bottom: 1rem;
34+
}
35+
36+
.prices-header p {
37+
position: relative;
38+
z-index: 2;
39+
font-size: 1.2rem;
40+
opacity: 0.95;
41+
}
42+
43+
.carousel-container {
44+
display: flex;
45+
align-items: center;
46+
gap: 2rem;
47+
padding: 3rem 0;
48+
position: relative;
49+
}
50+
51+
.carousel-wrapper {
52+
flex: 1;
53+
overflow: hidden;
54+
border-radius: 12px;
55+
}
56+
57+
.carousel-track {
58+
display: flex;
59+
transition: transform 0.5s ease-in-out;
60+
}
61+
62+
.carousel-slide {
63+
min-width: 100%;
64+
padding: 0 1rem;
65+
}
66+
67+
.carousel-btn {
68+
background: var(--primary-color);
69+
color: var(--white);
70+
border: none;
71+
width: 50px;
72+
height: 50px;
73+
border-radius: 50%;
74+
font-size: 2rem;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
transition: background 0.3s;
80+
flex-shrink: 0;
81+
}
82+
83+
.carousel-btn:hover {
84+
background: var(--secondary-color);
85+
}
86+
87+
.carousel-dots {
88+
display: flex;
89+
justify-content: center;
90+
gap: 0.5rem;
91+
margin-top: 2rem;
92+
}
93+
94+
.dot {
95+
width: 12px;
96+
height: 12px;
97+
border-radius: 50%;
98+
border: 2px solid var(--primary-color);
99+
background: transparent;
100+
cursor: pointer;
101+
transition: background 0.3s;
102+
}
103+
104+
.dot.active {
105+
background: var(--primary-color);
106+
}
107+
108+
.price-card {
109+
background: var(--white);
110+
border-radius: 12px;
111+
padding: 2rem;
112+
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
113+
display: flex;
114+
flex-direction: column;
115+
min-height: 500px;
116+
}
117+
118+
.price-card-header {
119+
border-bottom: 2px solid var(--bg-light);
120+
padding-bottom: 1rem;
121+
margin-bottom: 1.5rem;
122+
}
123+
124+
.price-card-header h3 {
125+
color: var(--primary-color);
126+
font-size: 1.5rem;
127+
margin-bottom: 0.5rem;
128+
}
129+
130+
.duration {
131+
color: var(--text-light);
132+
font-size: 0.9rem;
133+
}
134+
135+
.price-amount {
136+
font-size: 2.5rem;
137+
font-weight: 700;
138+
color: var(--accent-color);
139+
margin-bottom: 1rem;
140+
}
141+
142+
.price-description {
143+
color: var(--text-dark);
144+
line-height: 1.6;
145+
margin-bottom: 1.5rem;
146+
flex-grow: 1;
147+
}
148+
149+
.price-features {
150+
list-style: none;
151+
margin-bottom: 2rem;
152+
}
153+
154+
.price-features li {
155+
padding: 0.5rem 0;
156+
color: var(--text-light);
157+
position: relative;
158+
padding-left: 1.5rem;
159+
}
160+
161+
.price-features li:before {
162+
content: "✓";
163+
position: absolute;
164+
left: 0;
165+
color: var(--secondary-color);
166+
font-weight: bold;
167+
}
168+
169+
.book-button {
170+
background: var(--primary-color);
171+
color: var(--white);
172+
border: none;
173+
padding: 1rem;
174+
border-radius: 8px;
175+
font-size: 1rem;
176+
font-weight: 600;
177+
cursor: pointer;
178+
transition: background 0.3s;
179+
}
180+
181+
.book-button:hover {
182+
background: var(--secondary-color);
183+
}
184+
185+
.pricing-note {
186+
background: var(--white);
187+
padding: 2rem;
188+
border-radius: 12px;
189+
margin-top: 2rem;
190+
text-align: center;
191+
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
192+
}
193+
194+
.pricing-note h3 {
195+
color: var(--primary-color);
196+
margin-bottom: 1rem;
197+
}
198+
199+
.pricing-note p {
200+
color: var(--text-light);
201+
line-height: 1.6;
202+
}
203+
204+
@media (max-width: 768px) {
205+
.prices-header h1 {
206+
font-size: 2rem;
207+
}
208+
209+
.carousel-container {
210+
gap: 1rem;
211+
}
212+
213+
.carousel-btn {
214+
width: 40px;
215+
height: 40px;
216+
font-size: 1.5rem;
217+
}
218+
219+
.price-card {
220+
min-height: 450px;
221+
}
222+
}

‎src/pages_en/Carousel.jsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { useState } from 'react';
2+
import CalendarModal from '../components/booking/CalendarModal';
3+
import './Carousel.css';
4+
5+
export default function Carousel() {
6+
const [isModalOpen, setIsModalOpen] = useState(false);
7+
const [currentIndex, setCurrentIndex] = useState(0);
8+
9+
const nextSlide = () => {
10+
setCurrentIndex((prev) => (prev + 1) % services.length);
11+
};
12+
13+
const prevSlide = () => {
14+
setCurrentIndex((prev) => (prev - 1 + services.length) % services.length);
15+
};
16+
17+
const services = [
18+
{
19+
title: "Individual Therapy Session",
20+
duration: "50 minutes",
21+
price: "$120",
22+
description: "One-on-one therapy session focused on your personal goals and challenges. Tailored approach to meet your specific needs.",
23+
features: ["Personalized treatment plan", "Confidential environment", "Evidence-based techniques"]
24+
},
25+
{
26+
title: "Couples Therapy Session",
27+
duration: "60 minutes",
28+
price: "$150",
29+
description: "Work together to improve communication, resolve conflicts, and strengthen your relationship.",
30+
features: ["Joint sessions", "Communication strategies", "Conflict resolution tools"]
31+
},
32+
{
33+
title: "Initial Consultation",
34+
duration: "30 minutes",
35+
price: "$60",
36+
description: "Get to know each other and discuss your needs. This session helps determine the best approach for your therapy journey.",
37+
features: ["Assessment", "Treatment planning", "Questions & answers"]
38+
},
39+
{
40+
title: "Group Therapy Session",
41+
duration: "90 minutes",
42+
price: "$50",
43+
description: "Connect with others facing similar challenges in a supportive group environment led by a professional therapist.",
44+
features: ["Small groups (6-8 people)", "Peer support", "Shared experiences"]
45+
},
46+
{
47+
title: "Online Therapy Session",
48+
duration: "50 minutes",
49+
price: "$100",
50+
description: "Convenient therapy from the comfort of your home via secure video call. Same quality care, more flexibility.",
51+
features: ["Video sessions", "Flexible scheduling", "Secure platform"]
52+
},
53+
{
54+
title: "Extended Session",
55+
duration: "90 minutes",
56+
price: "$180",
57+
description: "Longer session for deeper work on complex issues or intensive therapy needs.",
58+
features: ["Extended time", "Deep dive sessions", "Complex issue resolution"]
59+
}
60+
];
61+
62+
return (
63+
<div className="prices-page">
64+
<div className="prices-header">
65+
<h1>Our Services & Pricing</h1>
66+
<p>Choose the service that best fits your needs. All sessions are by appointment only.</p>
67+
</div>
68+
69+
<div className="container">
70+
<div className="carousel-container">
71+
<button className="carousel-btn prev" onClick={prevSlide}>‹</button>
72+
73+
<div className="carousel-wrapper">
74+
<div className="carousel-track" style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
75+
{services.map((service, index) => (
76+
<div key={index} className="carousel-slide">
77+
<div className="price-card">
78+
<div className="price-card-header">
79+
<h3>{service.title}</h3>
80+
<span className="duration">{service.duration}</span>
81+
</div>
82+
<div className="price-amount">{service.price}</div>
83+
<p className="price-description">{service.description}</p>
84+
<ul className="price-features">
85+
{service.features.map((feature, idx) => (
86+
<li key={idx}>{feature}</li>
87+
))}
88+
</ul>
89+
<button className="book-button" onClick={() => setIsModalOpen(true)}>Book Now</button>
90+
</div>
91+
</div>
92+
))}
93+
</div>
94+
</div>
95+
96+
<button className="carousel-btn next" onClick={nextSlide}>›</button>
97+
</div>
98+
99+
<div className="carousel-dots">
100+
{services.map((_, index) => (
101+
<button
102+
key={index}
103+
className={`dot ${index === currentIndex ? 'active' : ''}`}
104+
onClick={() => setCurrentIndex(index)}
105+
/>
106+
))}
107+
</div>
108+
109+
<div className="pricing-note">
110+
<h3>Payment & Insurance</h3>
111+
<p>We accept most major insurance plans. Please contact us to verify your coverage. Self-pay options and sliding scale fees available upon request.</p>
112+
</div>
113+
</div>
114+
<CalendarModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
115+
</div>
116+
);
117+
}

0 commit comments

Comments
 (0)