Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing the main page UI #88

Merged
merged 2 commits into from
Jun 12, 2024
Merged

Changing the main page UI #88

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21b91a8
changed the main page UI
Jun 8, 2024
a89e6d9
required changes to make the website responsive is done
Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 153 additions & 46 deletions client/src/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,53 +20,160 @@ const Home = () => {
}}
>
<div className="p-8 text-center">

<motion.h1
initial={{ opacity: 0, y: -150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 1,
type: "spring",
stiffness: 100,
delay: 0.5,
}}
className="text-4xl lg:text-5xl font-bold mb-4 text-purple-600 text-shadow-sm text-shadow shadow-black"
>
Welcome to the Diabetes Prediction App
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 1,
}}
className="text-lg mb-8 text-white"
>
This app helps you predict the likelihood of developing diabetes
based on your health data.
</motion.p>
<motion.div
initial={{ opacity: 0, y: 150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 1,
type: "spring",
stiffness: 100,
delay: 1,
}}
>
<Link
to="/prediction"
className="bg-purple-700 hover:bg-purple-800 text-white lg:text-xl font-bold py-2 px-4 rounded transition-colors duration-300 shadow-sm shadow-black"
>
Get Started
</Link>
</motion.div>
initial={{ opacity: 0, y: -150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 1,
type: "spring",
stiffness: 100,
delay: 0.5,
}}
className="diabetes-predictor-header"
style={{
position: 'absolute',
width: '90%', /* Use percentage for width to make it responsive */
maxWidth: '1150px', /* Set a maximum width for larger screens */
height: 'auto', /* Let the height adjust based on content */
left: '-10%', /* Center horizontally */
transform: 'translateX(-50%)', /* Center horizontally */
top: '47%', /* Adjust based on your layout */
fontFamily: "'Abhaya Libre ExtraBold'",
fontStyle: 'normal',
fontWeight: 800,
fontSize: 'clamp(30px, 5vw, 50px)', /* Responsive font size using clamp */
lineHeight: '1.5', /* Adjust line height based on font size */
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center', /* Center text horizontally */
color: '#FFFFFF',
textAlign: 'center', /* Center text horizontally */
}}
>
Welcome to the Diabetes Predictor!
</motion.h1>


<motion.p
initial={{ opacity: 0, y: 150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 1,
}}
style={{
position: 'absolute',
width: '90%', /* Use percentage for width to make it responsive */
maxWidth: '444px', /* Set a maximum width for larger screens */
height: 'auto', /* Let the height adjust based on content */
left: '-0.3%', /* Center horizontally */
transform: 'translateX(-50%)', /* Center horizontally */
top: '58.5%', /* Adjust based on your layout */
fontFamily: "'Abhaya Libre ExtraBold', serif",
fontStyle: 'normal',
fontWeight: 800,
fontSize: 'clamp(20px, 4vw, 40px)', /* Responsive font size using clamp */
lineHeight: '1.5', /* Adjust line height based on font size */
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center', /* Center text horizontally */
color: '#FFFFFF',
textAlign: 'center', /* Center text horizontally */
}}
>
Know your risk
</motion.p>



<motion.p
initial={{ opacity: 0, y: 150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 1.2, // Slightly delay the second text for a staggered effect
}}
style={{
position: 'absolute',
width: '90%', /* Use percentage for width to make it responsive */
maxWidth: '771px', /* Set a maximum width for larger screens */
height: 'auto', /* Let the height adjust based on content */
left: '-5.2%', /* Center horizontally */
transform: 'translateX(-50%)', /* Center horizontally */
top: '63%', /* Adjust based on your layout */
fontFamily: "'Abhaya Libre ExtraBold', serif",
fontStyle: 'normal',
fontWeight: 800,
fontSize: 'clamp(20px, 4vw, 40px)', /* Responsive font size using clamp */
lineHeight: '1.5', /* Adjust line height based on font size */
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center', /* Center text horizontally */
color: '#FFFFFF',
textAlign: 'center', /* Center text horizontally */
}}
>
take control of your health.
</motion.p>

<motion.div
initial={{ opacity: 0, y: 150 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 1.2,
}}
style={{
position: 'absolute',
width: '90%', /* Use percentage for width to make it responsive */
maxWidth: '250px', /* Set a maximum width for larger screens */
height: '8%',
left: '5.4%', /* Center horizontally */
transform: 'translateX(-50%)', /* Center horizontally */
top: '73%', /* Adjust based on your layout */
background: '#FF9900',
border: '0.7px solid #5C3200',
borderRadius: '10px',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Link
to="/prediction"
style={{
width: '100%', /* Fill the entire width of the div */
height: '100%', /* Fill the entire height of the div */
fontFamily: "'Abhaya Libre ExtraBold', serif",
fontStyle: 'normal',
fontWeight: 800,
fontSize: 'clamp(14px, 3vw, 23px)', /* Responsive font size using clamp */
color: '#FFFFFF',
textAlign: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent', // Ensures link background is transparent
textDecoration: 'none', // Remove underline from the link
}}
>
GET STARTED
</Link>
</motion.div>


</div>
</div>

Expand Down
Loading