Skip to content
This repository was archived by the owner on Sep 16, 2025. It is now read-only.

Home page #76

Open
DARSHcverse wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Home page #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added web-frontend/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file modified web-frontend/src/.DS_Store
View file
Open in desktop
Binary file not shown.
2 changes: 2 additions & 0 deletions web-frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import NavigationBarAndFooterSignedIn from './components/navigation_bars_and_foo
import NavigationBarAndFooterSignedOut from './components/navigation_bars_and_footer/signed_out/NavigationBarAndFooterSignedOut';
import CreateRecipe from './routes/CreateRecipe/CreateRecipe';
import SearchRecipes from './routes/SearchRecipes/SearchRecipes';
import Home from './components/homepage';

function App() {

Expand Down Expand Up @@ -54,6 +55,7 @@ function App() {
<Route path='forgotPassword' element={<ForgotPassword />} />
<Route path='createRecipe' element={<CreateRecipe />} />
<Route path='searchRecipes' element={<SearchRecipes />} />
<Route path='home' element={<Home/>}/>
</Route>
</Routes>
</Router>
Expand Down
Binary file added web-frontend/src/Images/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added web-frontend/src/Images/21227.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web-frontend/src/Images/2150777679.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web-frontend/src/Images/41330_user_purple_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web-frontend/src/Images/80866.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions web-frontend/src/components/homepage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import react from "react";
import '../styles/auth.css';


function Home(){
return(
<><><div className="navBar">
<nav id="navbar" className="navbar">
<ul>
<li>
<a className="nav-link scrollto active" href="index.html">
Home
</a>
</li>
<li>
<a className="nav-link scrollto" href="#about">
About
</a>
</li>
<li>
<a className="nav-link scrollto" href="#services">
Services
</a>
</li>
<li>
<a className="nav-link scrollto" href="#contact">
Contact
</a>
</li>
</ul>
<img src={require('../Images/41330_user_purple_icon.png')} alt="pro" className="pro" />
</nav>
</div></>
<div className="main">

<br /><br />

<input type="search" name="searchcard" id="sc" className="searchcard" placeholder="Search" />

<section className="NutriCard-section">

<div className="card" id="card1" >
<img src={require('../Images/21227.jpg')} alt="Nutrihelp 1" className="Nutrihelp 1" />
<h3>Balanced Essentials</h3>
<p>A well-rounded meal plan featuring nutrient-rich options like <br /> oatmeal, grilled chicken, and wholesome grains for a balanced and satisfying diet.</p>
<a href="" onClick={() => showDetail('card1')}>View</a>
</div>

<div className="card" id="card2">
<img src={require('../Images/80866.jpg')} alt="Nutrihelp 2" className="Nutrihelp 2" />
<h3>Energize & Revitalize</h3>
<p>Revitalize your energy with this plan that includes whole foods such as <br /> avocado toast, lean proteins, and energizing snacks like nuts and fruit.</p>
<a href="" onClick={() => showDetail('card2')}>View</a>
</div>

<div className="card" id="card3">
<img src={require('../Images/2150777679.jpg')} alt="Nutrihelp 3" className="Nutrihelp 3" />
<h3>Plant-Powered Delight</h3>
<p>Embrace a plant-based delight with this vegan-friendly plan, featuring nutrient-packed meals like chickpea curry, quinoa-stuffed peppers, and vibrant, plant-powered options.</p>
<a href="" onClick={() => showDetail('card3')}>View</a>
</div>
</section>
<br /><br />
<button>Add More</button> <hr />
</div></>

)
}

export default Home;
233 changes: 233 additions & 0 deletions web-frontend/src/styles/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -596,3 +596,236 @@ label {
margin-bottom: 10px; } }


body {
background-color: rgb(245, 243, 246);
}

.container {
display: flex;
margin-top: 10%;
width: 48%;
border-radius: 20px;
height: 500px;

}

.left-side {
flex: 1;
background-color: rgb(119, 104, 159);
padding: 20px;
border-radius: 20px 0 0 20px;
text-align: center;
color: white;

}

.right-side {
flex: 1;
padding: 20px;
border-radius: 0 20px 20px 0;
background-color: white;
box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.1);
}

h1 {
font-family: "Montserrat", "sans-serif";
margin-top: 40%;
}

h2{
font-family: "Montserrat", "sans-serif";
font-size: 40px;
text-align: center;
}

h3 {
font-family: "Montserrat", "sans-serif";
font-size: medium;
}
.text{
margin-left: 10%;
}
.signIN, .signUP {
padding: 10px 20px;
font-size: 16px;
background-color: rgb(119, 104, 159);
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 20px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s ease-in-out;
font-family: "Montserrat", "sans-serif";
}

.signUP{
margin-left: 35%;
margin-top: -2px;
}

.signIN:hover, .signUP:hover {
background-color: #2980b9;
}

.fb, .ggle, .li {
border: 0.5px solid black;
border-radius: 20px;
width: 8%;
height: auto;
margin: 5px;
cursor: pointer;
margin-left: 15%;
}

form {
text-align: left;
font-family: "Montserrat", "sans-serif";
}

label {
display: block;
margin-bottom: 5px;
color: #333;
}

input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
font-family: "Montserrat", "sans-serif";
border-radius: 18px;
border: 1px solid black;
}

.navbar {
padding: 10px;
margin-left: 40%;
}
.navbar ul {
margin: 0;
padding: 10px;
display: flex;
list-style: none;
align-items: center;
}

.navbar li {
position: relative;
}

.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 600;
color: #000000;
white-space: nowrap;
transition: 0.3s;
text-transform: uppercase;
}

.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #8531ce;
}

.pro{
width: 5%;
height: auto;
}

.searchcard{
width: 30%;
height: auto;
text-align: center;
margin-left: 35%;
border:1px solid rgb(119, 104, 159);
}

.NutriCard-section {
display: flex;
justify-content: space-between;
padding: 30px;
}

.card {
flex: 1;
text-align: center;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 25px;
margin: 10px;
transition: transform 0.5s, box-shadow 0.3s;
overflow: hidden;
height: 600px;
width: 300px;
}

.card:hover {
border: 1px solid dodgerblue;
transform: scale(1.05);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}

.card img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 15px;
}

.card p {
margin: 20px 0;
}

.card a {
display: block;
margin: 10px 0;
text-decoration: none;
background-color: rgb(119, 104, 159);
color: #fff;
padding: 10px 20px;
border-radius: 20px;
width: 12%;
margin-left: 40%;
}

.card a:hover {
border: 1px solid #777;
}
button {
font-family: 'Roboto', sans-serif;
width: 8%;
height: 100%;
background-color: rgb(2, 102, 223);
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 45%;
cursor: pointer;
border-radius: 25px;
}

button:hover {
background-color: rgb(44, 145, 246);
border-radius: 25px;
}