Skip to content

Commit

Permalink
final01
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnkitLuhar
AnkitLuhar committed Jul 14, 2024
1 parent 6e8abe0 commit 6ef323f
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 98 deletions.
97 changes: 22 additions & 75 deletions client/src/components/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Home = () => {
backgroundBlendMode: "multiply",
}}
>
<div className="p-8 text-center">
<div className="p-8 text-center space-y-6">
<motion.h1
initial={{ opacity: 0, y: -150 }}
whileInView={{ opacity: 1, y: 0 }}
Expand All @@ -31,26 +31,12 @@ const Home = () => {
stiffness: 100,
delay: 0.5,
}}
className="diabetes-predictor-header"
className="text-white font-extrabold"
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 */,
fontSize: "clamp(30px, 5vw, 50px)",
lineHeight: "1.5",
textAlign: "center",
}}
>
Welcome to the Diabetes Predictor!
Expand All @@ -66,25 +52,12 @@ const Home = () => {
stiffness: 100,
delay: 1,
}}
className="text-white font-extrabold"
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: "57%" /* 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 */,
fontSize: "clamp(20px, 4vw, 40px)",
lineHeight: "1.5",
textAlign: "center",
}}
>
Know your risk
Expand All @@ -98,30 +71,17 @@ const Home = () => {
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 1.2, // Slightly delay the second text for a staggered effect
delay: 1.2,
}}
className="text-white font-extrabold"
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: "65%" /* 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 */,
fontSize: "clamp(20px, 4vw, 40px)",
lineHeight: "1.5",
textAlign: "center",
}}
>
take control of your health.
Take control of your health.
</motion.p>

<motion.div
Expand All @@ -134,40 +94,27 @@ const Home = () => {
stiffness: 100,
delay: 1.2,
}}
className="w-full max-w-xs"
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: "76%" /* Adjust based on your layout */,
background: "#FF9900",
border: "0.7px solid #5C3200",
borderRadius: "10px",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "10px",
margin: "0 auto",
}}
>
<Link
to="/prediction"
className="w-full h-full flex items-center justify-center text-white font-extrabold"
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",
fontSize: "clamp(14px, 3vw, 23px)",
textAlign: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "transparent", // Ensures link background is transparent
textDecoration: "none", // Remove underline from the link
textDecoration: "none",
backgroundColor: "transparent",
}}
>
GET STARTED
Expand Down
74 changes: 51 additions & 23 deletions client/src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from "react";
import { FaGithub, FaBars, FaTimes } from "react-icons/fa"; // Combine the imports from react-icons/fa
import { Link } from "react-router-dom";
import { CiStar } from "react-icons/ci";
import logo_final from '../assets/logo_final.png'; // Adjust the path to your logo
import logo_final from "../assets/logo_final.png"; // Adjust the path to your logo

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
Expand All @@ -16,10 +16,10 @@ const Navbar = () => {
};

const logoStyle = {
height: '60px', // Adjusted size for better visibility
width: '60px',
borderRadius: '50%',
marginRight: '10px',
height: "60px", // Adjusted size for better visibility
width: "60px",
borderRadius: "50%",
marginRight: "10px",
};

return (
Expand All @@ -34,20 +34,32 @@ const Navbar = () => {
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-center space-x-4">
<NavLink to="/" onClick={closeMenu}>Home</NavLink>
<NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
<NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
<NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
<NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
<NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
<NavLink to="/" onClick={closeMenu}>
Home
</NavLink>
<NavLink to="/data-info" onClick={closeMenu}>
Data Info
</NavLink>
<NavLink to="/prediction" onClick={closeMenu}>
Prediction
</NavLink>
<NavLink to="/visualization" onClick={closeMenu}>
Visualization
</NavLink>
<NavLink to="/contact" onClick={closeMenu}>
Contact Us
</NavLink>
<NavLink to="/FAQ" onClick={closeMenu}>
FAQ
</NavLink>
<a
href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
onClick={closeMenu}
>
<CiStar className="w-7 h-7 text-yellow-500 font-bold" />
<CiStar className="w-7 h-7 text-yellow-500 font-bold mr-2" />
<FaGithub className="h-7 w-7" />
</a>
</div>
Expand All @@ -72,23 +84,39 @@ const Navbar = () => {
</div>

{/* Mobile Menu */}
<div className={`${isOpen ? "block" : "hidden"} md:hidden`}>
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<NavLink to="/" onClick={closeMenu}>Home</NavLink>
<NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
<NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
<NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
<NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
<NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
<div
className={`fixed top-0 right-0 h-full bg-gray-800 bg-opacity-90 z-50 transform ${
isOpen ? "translate-x-0" : "translate-x-full"
} transition-transform duration-300 ease-in-out md:hidden`}
>
<div className="px-2 pt-2 pb-3 space-y-1">
<NavLink to="/" onClick={closeMenu}>
Home
</NavLink>
<NavLink to="/data-info" onClick={closeMenu}>
Data Info
</NavLink>
<NavLink to="/prediction" onClick={closeMenu}>
Prediction
</NavLink>
<NavLink to="/visualization" onClick={closeMenu}>
Visualization
</NavLink>
<NavLink to="/contact" onClick={closeMenu}>
Contact Us
</NavLink>
<NavLink to="/FAQ" onClick={closeMenu}>
FAQ
</NavLink>
<a
href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
onClick={closeMenu}
>
<CiStar className="w-5 h-5 text-yellow-500 font-bold" />
<FaGithub className="h-5 w-5" />
<CiStar className="w-5 h-5 text-yellow-500 font-bold mr-2" />
<FaGithub className="h-5 w-5 mr-2" />
GitHub
</a>
</div>
Expand All @@ -108,4 +136,4 @@ const NavLink = ({ to, children, onClick }) => (
</Link>
);

export default Navbar;
export default Navbar;

0 comments on commit 6ef323f

Please sign in to comment.