Design is Ready and Reservation Working using LocalStorage API

iahmadiqbalbhatti · Mar 10, 2024 · 86a5318 · 86a5318
1 parent 9ba99a7
commit 86a5318
Show file tree

Hide file tree

Showing 41 changed files with 773 additions and 122 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,6 +36,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/public/icons/Basket.svg b/public/icons/Basket.svg
diff --git a/public/icons/Dish icon.svg b/public/icons/Dish icon.svg
diff --git a/public/icons/basket .svg b/public/icons/basket .svg
diff --git a/public/icons/hamburger_menu.svg b/public/icons/hamburger_menu.svg
diff --git a/public/icons/home icon.svg b/public/icons/home icon.svg
diff --git a/public/icons/🦆 icon _eye_.svg b/public/icons/🦆 icon _eye_.svg
diff --git a/public/icons/🦆 icon _hamburger menu.svg b/public/icons/🦆 icon _hamburger menu.svg
diff --git a/public/images/LittleLemon_footerLogo.png b/public/images/LittleLemon_footerLogo.png
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
     <meta
-      name="description"
-      content="A resturent is known for unique taste and tailord serving as per demand."
+            name="description"
+            content="A restaurant is known for unique taste and tailored serving as per demand."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
     <title>Little Lemon - Restaurant</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
+</head>
+<body>
+<div id="root"></div>
+<script src="https://raw.githubusercontent.com/Meta-Front-End-Developer-PC/capstone/master/api.js"></script>
+</body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
   "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "Little Lemon",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
@@ -1,29 +1,18 @@
-import {Helmet} from 'react-helmet';
-
-import {NavBar} from "./components/NavBar";
-import {HeroSection} from "./components/HeroSection";
-import {SpecialSection} from "./components/SpecialSection";
-import {TestimonialSection} from "./components/TestimonialSection";
-import {AboutSection} from "./components/AboutSection";
-import {Footer} from "./components/Footer";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import Index from "./pages/Index";
+import Reservation from "./pages/Reservation";
+import Confirm from "./pages/Confirm";
 
 function App() {
 	return (
 		<>
-			<Helmet>
-				<title>Little Lemon Restaurant - Known for Uniqueness</title>
-				<meta property="og:title" content="Little Lemon - Restaurant"/>
-				<meta property="og:description"
-				      content="Little lemon restaurant is known for unique taste and tailord serving as per demand."/>
-				<meta property="og:image" content="logo.png"/>
-				<meta property="og:url" content="http://localhost:3000"/>
-			</Helmet>
-			<NavBar/>
-			<HeroSection/>
-			<SpecialSection/>
-			<TestimonialSection/>
-			<AboutSection/>
-			<Footer/>
+			<BrowserRouter>
+				<Routes>
+					<Route index element={<Index/>}/>
+					<Route path="/reservation" element={<Reservation/>}/>
+					<Route path="/confirm" element={<Confirm/>}/>
+				</Routes>
+			</BrowserRouter>
 		</>
 	);
 }

diff --git a/src/components/AboutSection.js b/src/components/AboutSection.js
@@ -1,13 +1,22 @@
 import {LittleAbout} from "./parts/common/LittleAbout";
+import {PrimaryButton} from "./ui/PrimaryButton";
 
 export const AboutSection = () => {
 	return (
-		<section>
-			<LittleAbout/>
-			<div>
+		<section
+			className={"flex flex-col md:flex-row px-8 md:px-12 lg:px-16 xl:px-32 justify-between items-center pb-16"}>
+			<LittleAbout>
+				<PrimaryButton>
+					Read More
+				</PrimaryButton>
+			</LittleAbout>
+			<div className={"w-[100%] flex flex-col items-end"}>
 				<img src="about-images.jpg"
-				     alt="Mario and Adrian A. are cooking meal for thier customers."/>
+				     alt="Mario and Adrian A. are cooking meal for thier customers."
+				     className={"w-fit"}
+				/>
 			</div>
+
 		</section>
 	)
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,45 +1,38 @@
+import FooterSectionItem from "./parts/common/FooterSectionItem";
+
 export const Footer = () => {
 	return (
-		<footer>
-			<img src="images/white-logo.png" width={"200px"}
-			     alt="Littel lemon white logo - monochrome logo"/>
-			<div>
-				<h6>Quick Links</h6>
+		<footer className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 px-8 md:px-12 lg:px-16 xl:px-32 py-16 w-full bg-primary2"}>
+			<div className={"px-8 sm:px-0 pb-4 sm:pb-0"}>
+				<img src="images/LittleLemon_footerLogo.png" width={"200px"}
+				     alt="Littel lemon white logo - monochrome logo"/>
+			</div>
+
+			<FooterSectionItem itemTitle={"Quick Links"}>
 				<ul>
 					<li>About</li>
 					<li>Menu</li>
 					<li>Reservation</li>
 					<li>Online Order</li>
 					<li>Login</li>
 				</ul>
-			</div>
+			</FooterSectionItem>
 
-			<div>
-				<h6>Contact Us</h6>
+			<FooterSectionItem itemTitle={"Contact Us"}>
 				<div>
 					<p>Moh. Jattuwakal, Gujrat, Pakistan</p>
 					<p>+92 342 126277</p>
 					<p>conact@littlelemon.com</p>
 				</div>
-			</div>
+			</FooterSectionItem>
 
-			<div>
-				<h6>Social Links</h6>
+			<FooterSectionItem itemTitle={"Social Links"}>
 				<div>
 					<p><span>FB</span> @littlelemonresturent</p>
 					<p><span>IG</span> @littlelemonresturent</p>
 					<p><span>Pin</span> @littlelemonresturent</p>
 				</div>
-			</div>
-
-			<div>
-				<ul>
-					<li>Little Lemon</li>
-					<li>Privacy Policy</li>
-					<li>Contact Us</li>
-				</ul>
-				<small>© Little Lemon 2023</small>
-			</div>
+			</FooterSectionItem>
 		</footer>
 	)
 }
diff --git a/src/components/HeroSection.js b/src/components/HeroSection.js
@@ -1,16 +1,32 @@
+import {H1} from "./ui/H1";
+import {H2} from "./ui/H2";
+import {Paragraph} from "./ui/Paragraph";
+import {PrimaryButton} from "./ui/PrimaryButton";
+
 export const HeroSection = () => {
 	return (
-		<section>
-			<div>
+		<section
+			className={"flex flex-col md:flex-row mx-auto bg-primary2 md:h-[80vh] px-8 md:px-12 lg:px-16 xl:px-32 py-5 justify-between items-center relative"}>
+			<div className={"w-auto md:w-[40%] flex flex-col gap-6 my-[3rem]"}>
 				<div>
-					<h1>Little Lemon</h1>
-					<h2>Chicago</h2>
+					<H1>Little Lemon</H1>
+					<H2>Chicago</H2>
 				</div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+				<Paragraph>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</Paragraph>
+
+				<PrimaryButton>
+					Reserve a Table
+				</PrimaryButton>
+
 			</div>
 
-			<div>
-				<img src="./images/hero-image.png" alt="Hero section in which a chef in sprinkling peper."/>
+			<div className={"z-40 overflow-visible "}>
+				<img src="./images/hero-image.png"
+				     alt="Hero section in which a chef in sprinkling peper."
+				     className={"md:mt-52"}/>
 			</div>
 		</section>
 	)