Skip to content

Commit 628bd49

Browse files
SupuniJayasingheSupuniJayasinghe
committed
updated the home page
1 parent d4c4b95 commit 628bd49

File tree

3 files changed

+111
-79
lines changed

3 files changed

+111
-79
lines changed

‎blissme-app/src/app/start/Home.tsx‎

Lines changed: 106 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { useNavigate } from 'react-router-dom';
77
import { getLocalStoragedata } from '../../helpers/Storage';
88

99
const images = [home, home2, home3];
10+
const sections = ["about", "features", "contact"];
1011

1112
const Home = () => {
1213
const [currentIndex, setCurrentIndex] = useState(0);
14+
const [activeSection, setActiveSection] = useState<string>("about");
1315
const navigate = useNavigate();
1416

1517
useEffect(() => {
@@ -19,13 +21,33 @@ const Home = () => {
1921
return () => clearInterval(interval);
2022
}, []);
2123

24+
// Observe sections for active navbar highlight
25+
useEffect(() => {
26+
const observer = new IntersectionObserver(
27+
(entries) => {
28+
entries.forEach((entry) => {
29+
if (entry.isIntersecting) {
30+
setActiveSection(entry.target.id);
31+
}
32+
});
33+
},
34+
{ threshold: 0.6 }
35+
);
36+
37+
sections.forEach((id) => {
38+
const el = document.getElementById(id);
39+
if (el) observer.observe(el);
40+
});
41+
42+
return () => observer.disconnect();
43+
}, []);
44+
2245
const handleSignUp = () => navigate('/register');
2346
const handleLogin = () => navigate('/sign-in');
2447
const handleLogoClick = () => navigate('/home');
2548

2649
const storedUser = JSON.parse(getLocalStoragedata("reduxState") || "{}");
2750
const selectedMode = storedUser?.user?.inputMode;
28-
console.log(selectedMode);
2951

3052
const handleStartChat = () => {
3153
if (selectedMode === 'Text') {
@@ -37,62 +59,56 @@ const Home = () => {
3759
}
3860
};
3961

40-
4162
return (
42-
<div className="relative min-h-screen overflow-hidden">
43-
{/* Hero Section */}
44-
<div className="flex items-center justify-between px-10 mt-2 text-white">
45-
{/* Left Text */}
46-
<div className="max-w-lg z-10 text-left ml-10">
47-
<h1 className="text-4xl md:text-5xl font-bold text-green-900 mt-[120px] hover:animate-bounce hover:drop-shadow-[0_0_10px_#22c55e]" style={{ fontFamily: 'Merienda, cursive' }}>
48-
Your journey to mental wellness starts here
49-
</h1>
50-
51-
<p className="mt-4 text-green-800 text-lg" style={{ fontFamily: 'Merienda, cursive' }}>
52-
BlissMe is an AI-based mental health companion that combines therapy, games, and intelligent agents to support your emotional well-being. Connect with a friendly virtual character and begin personalized therapy with just a tap.
53-
</p>
63+
<div className="relative min-h-screen scroll-smooth">
64+
{/* Navbar */}
65+
<nav className="fixed top-4 left-1/2 -translate-x-1/2 flex items-center justify-between w-[90%] max-w-6xl px-6 py-3 bg-white/50 backdrop-blur-md rounded-xl shadow-lg z-50">
66+
{/* Logo */}
67+
<div onClick={handleLogoClick} className="cursor-pointer">
68+
<img src={logo} alt="Logo" className="h-10 w-auto" />
69+
</div>
5470

55-
<div className='flex flex-row justify-start gap-4 mt-6'>
56-
<button
57-
onClick={handleStartChat}
58-
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
71+
{/* Nav Links */}
72+
<div className="hidden md:flex space-x-6">
73+
{sections.map((id) => (
74+
<a
75+
key={id}
76+
href={`#${id}`}
77+
className={`font-medium transition ${activeSection === id
78+
? "text-green-700 border-b-2 border-green-600"
79+
: "text-gray-700 hover:text-green-600"
80+
}`}
5981
>
60-
Start Chat
61-
</button>
62-
63-
<button onClick={handleLogin}
64-
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition bg-white">
65-
Sign In
66-
</button>
67-
</div>
68-
{/* Bottom Features Section */}
69-
<div className='relative z-10 flex flex-col items-center ml-72'>
70-
<div className='flex flex-col md:flex-row justify-center gap-6 mt-10'>
71-
<div className='bg-[#6BBF8A] p-4 rounded-xl shadow-lg max-w-sm w-64 text-center transform transition duration-300 hover:scale-105 hover:shadow-2xl'>
72-
<h1 className='text-md font-bold text-black mb-2'>🧠 Assessment Tools</h1>
73-
<p className='text-black text-sm font-Roboto'>
74-
Conducts mental health evaluations using questionnaires and AI-driven sentiment analysis to understand your emotional state.
75-
</p>
76-
</div>
77-
78-
<div className='bg-[#F2C1B6] p-4 rounded-xl shadow-lg max-w-sm w-64 text-center transform transition duration-300 hover:scale-105 hover:shadow-2xl'>
79-
<h1 className='text-md font-bold text-black mb-2'>🎮 Games & Mindfulness</h1>
80-
<p className='text-black text-sm font-Roboto'>
81-
Explore therapeutic mini-games and guided mindfulness sessions to improve mood, reduce stress, and build healthy habits.
82-
</p>
83-
</div>
84-
85-
<div className='bg-[#BDF2D0] p-4 rounded-xl shadow-lg max-w-sm w-64 text-center transform transition duration-300 hover:scale-105 hover:shadow-2xl'>
86-
<h1 className='text-md font-bold text-black mb-2'>📊 Mood Monitoring & Crisis</h1>
87-
<p className='text-black text-sm font-Roboto'>
88-
Tracks your mood patterns over time. In case of severe distress, the system connects you to support organizations instantly.
89-
</p>
90-
</div>
91-
</div>
92-
</div>
82+
{id.charAt(0).toUpperCase() + id.slice(1)}
83+
</a>
84+
))}
85+
</div>
9386

87+
{/* Buttons */}
88+
<div className="flex space-x-4 items-center">
89+
<button
90+
onClick={handleLogin}
91+
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition"
92+
>
93+
Sign In
94+
</button>
95+
<button
96+
onClick={handleSignUp}
97+
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition"
98+
>
99+
Sign Up
100+
</button>
101+
<button
102+
onClick={handleStartChat}
103+
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
104+
>
105+
Start Chat
106+
</button>
94107
</div>
108+
</nav>
95109

110+
{/* HOME SECTION with background slideshow */}
111+
<section id="home" className="relative h-screen flex items-center justify-between px-10 text-white overflow-hidden">
96112
{/* Slideshow */}
97113
<div
98114
className="absolute top-0 left-0 h-full w-full flex transition-transform duration-1000 ease-in-out"
@@ -108,43 +124,55 @@ const Home = () => {
108124
))}
109125
</div>
110126

111-
{/* Navbar */}
112-
<nav className="absolute top-0 left-0 right-0 flex items-center justify-between px-6 py-2 bg-white bg-opacity-70 backdrop-blur-md z-10">
113-
<div onClick={handleLogoClick} className="cursor-pointer">
114-
<img src={logo} alt="Logo" className="h-10 w-auto" />
115-
</div>
127+
{/* Content on top of slideshow */}
128+
<div className="relative z-10 max-w-lg ml-10 text-left">
129+
<h1
130+
className="text-4xl md:text-5xl font-bold text-green-900 mt-[120px] hover:animate-bounce hover:drop-shadow-[0_0_10px_#22c55e]"
131+
style={{ fontFamily: 'Merienda, cursive' }}
132+
>
133+
Your journey to mental wellness starts here
134+
</h1>
116135

117-
<div className="hidden md:flex space-x-6">
118-
<a href="#about" className="text-gray-700 hover:text-green-700 font-medium">
119-
{/*About */}
120-
</a>
121-
</div>
136+
<p
137+
className="mt-4 text-green-800 text-lg"
138+
style={{ fontFamily: 'Merienda, cursive' }}
139+
>
140+
BlissMe is an AI-based mental health companion that combines therapy, games, and intelligent agents to support your emotional well-being. Connect with a friendly virtual character and begin personalized therapy with just a tap.
141+
</p>
122142

123-
<div className="flex space-x-4 items-center">
124-
<button
125-
onClick={handleLogin}
126-
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition"
127-
>
128-
Sign In
129-
</button>
130-
<button
131-
onClick={handleSignUp}
132-
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition"
133-
>
134-
Sign Up
135-
</button>
143+
<div className="flex flex-row justify-start gap-4 mt-6">
136144
<button
137145
onClick={handleStartChat}
138146
className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
139147
>
140148
Start Chat
141149
</button>
142150

151+
<button
152+
onClick={handleLogin}
153+
className="border border-green-600 text-green-700 px-4 py-2 rounded-lg hover:bg-green-100 transition bg-white"
154+
>
155+
Sign In
156+
</button>
143157
</div>
144-
</nav>
145-
</div>
146-
147-
158+
</div>
159+
</section>
160+
161+
{/* OTHER SECTIONS (no slideshow background) */}
162+
<section id="home" className="">
163+
<h1 className="text-4xl font-bold text-green-700">About BlissMe</h1>
164+
</section>
165+
<section id="about" className="h-screen flex items-center justify-center bg-gray-100">
166+
<h1 className="text-4xl font-bold text-green-700">About BlissMe</h1>
167+
</section>
168+
169+
<section id="features" className="h-screen flex items-center justify-center bg-blue-100">
170+
<h1 className="text-4xl font-bold text-blue-700">Features</h1>
171+
</section>
172+
173+
<section id="contact" className="h-screen flex items-center justify-center bg-green-100">
174+
<h1 className="text-4xl font-bold text-green-700">Contact Us</h1>
175+
</section>
148176
</div>
149177
);
150178
};

‎blissme-app/src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,8 @@ canvas.animated-background-canvas {
177177

178178
.Modal-root {
179179
z-index: 9999 !important;
180+
}
181+
182+
html {
183+
@apply scroll-smooth;
180184
}

‎blissme-app/src/routes/Routerset.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const Routerset = () => {
5656
<Route path="/chats" element={<MainLayout />}>
5757
<Route path="text" element={<ChatBox />} />
5858
<Route path="voice" element={<VoiceChatBox />} />
59-
<Route path="setting" element={<Setting />} />
59+
<Route path="setting" element={<Setting />} />
6060
{/* <Route path="setting/profile" element={<ProfileSetting />} />
6161
<Route path="setting/account" element={<AccountSetting />} />
6262
<Route path="setting/security" element={<SecuritySetting />} /> */}

0 commit comments

Comments
 (0)