first commit

src/components/BookingForm.jsx

@@ -0,0 +1,73 @@
+import { useState } from "react"
+import "../styles/BookingForm.css"
+
+export const BookingForm = () => {
+	const [date, setDate] = useState(new Date().toISOString().slice(0, 10))
+	const [availableTimes] = useState([
+		"17:00",
+		"18:00",
+		"19:00",
+		"20:00",
+		"21:00",
+		"22:00"
+	])
+	const [time, setTime] = useState(availableTimes[0])
+	const [guests, setGuests] = useState(1)
+	const [occasion, setOccasion] = useState("None")
+
+	return (
+		<form
+			className="booking-form"
+			onSubmit={(event) => {
+				event.preventDefault()
+				console.log(date, time, guests, occasion)
+			}}
+		>
+			<label htmlFor="res-date">Choose date</label>
+			<input
+				value={date}
+				onChange={(event) => setDate(event.target.value)}
+				type="date"
+				id="res-date"
+			/>
+
+			<label htmlFor="res-time">Choose time</label>
+			<select
+				value={time}
+				onChange={(event) => setTime(event.target.value)}
+				id="res-time"
+			>
+				{availableTimes.map((time) => (
+					<option key={time}>{time}</option>
+				))}
+			</select>
+
+			<label htmlFor="guests">Number of guests</label>
+			<input
+				type="number"
+				min="1"
+				max="10"
+				id="guests"
+				value={guests}
+				onChange={(event) => setGuests(event.target.value)}
+			/>
+
+			<label htmlFor="occasion">Occasion</label>
+			<select
+				id="occasion"
+				value={occasion}
+				onChange={(event) => setOccasion(event.target.value)}
+			>
+				<option>None</option>
+				<option>Birthday</option>
+				<option>Anniversary</option>
+			</select>
+
+			<input
+				type="submit"
+				className="submit"
+				value="Make Your reservation"
+			/>
+		</form>
+	)
+}

src/components/Footer.jsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom"
+import "../styles/Footer.css"
+
+export const Footer = () => (
+	<footer>
+		<img src="/images/footer-logo.png" alt="Little Lemon Logo" />
+		<section>
+			<h3>Doormat Navigation</h3>
+			<a href="#">Home</a>
+			<a href="#">About</a>
+			<a href="#">Menu</a>
+			<Link to="/book">Reservations</Link>
+			<a href="#">Order Online</a>
+			<a href="#">Login</a>
+		</section>
+		<section>
+			<h3>Contact</h3>
+			<a href="#">Address</a>
+			<a href="#">Phone number</a>
+			<a href="#">Email</a>
+		</section>
+		<section>
+			<h3>Social Media Links</h3>
+			<a href="#">Twitter</a>
+			<a href="#">Instagram</a>
+			<a href="#">Threads</a>
+		</section>
+	</footer>
+)

src/components/Header.jsx

@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom"
+import { NavLink } from "./NavLink.jsx"
+import "../styles/Header.css"
+
+export const Header = () => (
+	<header>
+		<nav>
+			<Link to="/">
+				<img src="/images/Asset 16@4x.png" alt="Little Lemon" />
+			</Link>
+			<ul>
+				<li>
+					<NavLink to="/">Home</NavLink>
+				</li>
+				<li>
+					<Link to="#">About</Link>
+				</li>
+				<li>
+					<Link to="#">Menu</Link>
+				</li>
+				<li>
+					<NavLink to="/book">Reservations</NavLink>
+				</li>
+				<li>
+					<Link to="#">Order Online</Link>
+				</li>
+				<li>
+					<Link to="#">Login</Link>
+				</li>
+			</ul>
+		</nav>
+	</header>
+)

src/components/Jumbo.jsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom"
+import "../styles/Jumbo.css"
+
+export const Jumbo = () => (
+	<section className="jumbo">
+		<section>
+			<h1>Little Lemon</h1>
+			<h2>Chicago</h2>
+			<p>
+				We are a family owned Mediterranean restaurant, focused on
+				traditional recipes served with a modern twist.
+			</p>
+			<Link className="button-link" to="/book">
+				Reserve a Table
+			</Link>
+		</section>
+		<img src="/images/Chef.jpg" alt="Image of Chef" />
+	</section>
+)

src/components/NavLink.jsx

@@ -0,0 +1,12 @@
+import { NavLink as Link } from "react-router-dom"
+
+export const NavLink = ({ to, children }) => (
+	<Link
+		to={to}
+		className={({ isActive, isPending }) =>
+			isActive || isPending ? "selected" : ""
+		}
+	>
+		{children}
+	</Link>
+)

src/components/Special.jsx

@@ -0,0 +1,16 @@
+import { Link } from "react-router-dom"
+import "../styles/Special.css"
+
+export const Special = ({ image, title, price, children }) => (
+	<section className="column">
+		<img src={image} alt="Picture of Food" />
+		<article>
+			<section className="row specialRow">
+				<h3>{title}</h3>
+				<span>${price}</span>
+			</section>
+			<p>{children}</p>
+			<Link>Order a delivery</Link>
+		</article>
+	</section>
+)

src/components/Specials.jsx

@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom"
+import { Special } from "./Special"
+import "../styles/Specials.css"
+
+export const Specials = () => (
+	<section className="specials">
+		<section className="row header-row">
+			<h2>This week&lsquo;s specials!</h2>
+			<Link className="button-link">Online Menu</Link>
+		</section>
+		<section className="row">
+			<Special
+				title="Greek salad"
+				image="/images/Food1.jpg"
+				price="12.99"
+			>
+				Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+				Molestias incidunt cum culpa nam officiis aliquam repudiandae
+				beatae facilis soluta odio, perferendis nihil aspernatur non
+				totam amet quas adipisci quidem ipsa!
+			</Special>
+			<Special title="Bruschetta" image="/images/Food2.jpg" price="10.99">
+				Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+				Molestias incidunt cum culpa nam officiis aliquam repudiandae
+				beatae facilis soluta odio, perferendis nihil aspernatur non
+				totam amet quas adipisci quidem ipsa!
+			</Special>
+			<Special title="Lemon Cake" image="/images/Food3.jpg" price="8.50">
+				Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+				Molestias incidunt cum culpa nam officiis aliquam repudiandae
+				beatae facilis soluta odio, perferendis nihil aspernatur non
+				totam amet quas adipisci quidem ipsa!
+			</Special>
+		</section>
+	</section>
+)

src/components/Testimonial.jsx

@@ -0,0 +1,28 @@
+import "../styles/Testimonial.css"
+
+const Star = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		fill="currentColor"
+		viewBox="0 0 16 16"
+	>
+		<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
+	</svg>
+)
+
+export const Testimonial = ({ name, image, review }) => (
+	<article className="testimonial">
+		<section className="row testimonyRow">
+			<img src={image} alt={`Image of ${name}`} />{" "}
+			<section className="right">
+				<span className="name">{name}</span>
+				<section className="stars">
+					<Star /> <Star /> <Star /> <Star /> <Star />
+				</section>
+			</section>
+		</section>
+		<p>{review}</p>
+	</article>
+)

src/components/Testimonials.jsx

@@ -0,0 +1,30 @@
+import { Testimonial } from "./Testimonial"
+import "../styles/Testimonials.css"
+
+export const Testimonials = () => (
+	<section className="testimonials">
+		<h2>Testimonials</h2>
+		<section className="row testimonialRow">
+			<Testimonial
+				name="Barry Allen"
+				review="Little Lemon is an absolute gem! The food is bursting with flavors, and the staff is so welcoming. I can't get enough of their lemon-infused dishes!"
+				image="https://randomuser.me/api/portraits/men/73.jpg"
+			/>
+			<Testimonial
+				name="John Doe"
+				review="I'm in love with Little Lemon! Each dish is a delightful surprise of taste and presentation. Highly recommend trying their greek salad — it's divine!"
+				image="https://randomuser.me/api/portraits/men/75.jpg"
+			/>
+			<Testimonial
+				name="Herman Diaz"
+				review="A culinary delight! Little Lemon's menu is creative and impressive. The ambiance is cozy, making it the perfect spot for a memorable dining experience."
+				image="https://randomuser.me/api/portraits/men/83.jpg"
+			/>
+			<Testimonial
+				name="Sebastian Lee"
+				review="Little Lemon brings the Mediterranean coast to our city! The flavors transport me to a sunny paradise with each bite. It's a culinary journey you don't want to miss!"
+				image="https://randomuser.me/api/portraits/men/21.jpg"
+			/>
+		</section>
+	</section>
+)

src/index.css

@@ -0,0 +1,58 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	--primary-1: #495e57;
+	--primary-2: #f4ce14;
+	--secondary-1: #edefee;
+}
+
+body {
+	margin: 0;
+}
+
+a {
+	color: inherit;
+}
+
+#root {
+	display: grid;
+	grid-template-rows: 5rem 1fr 15rem;
+	min-height: 100vh;
+}
+
+main {
+	display: flex;
+	margin: auto;
+	color: white;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+hr {
+	border: 1px solid white;
+	border-radius: 1rem;
+	width: 100%;
+}
+
+img {
+	max-width: 100%;
+}
+
+.button-link {
+	background-color: var(--primary-2);
+	color: black;
+	text-decoration: none;
+	padding: 0.5rem 1rem;
+	border-radius: 0.75rem;
+}
+
+.row {
+	display: flex;
+	padding: 0 1rem;
+	gap: 2rem;
+}

src/main.jsx

@@ -0,0 +1,27 @@
+import "./index.css"
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { Root } from "./routes/Root.jsx"
+import {
+	createBrowserRouter,
+	RouterProvider,
+	Route,
+	createRoutesFromElements
+} from "react-router-dom"
+import { HomePage } from "./routes/HomePage"
+import { BookingPage } from "./routes/BookingPage"
+
+const router = createBrowserRouter(
+	createRoutesFromElements(
+		<Route path="/" element={<Root />}>
+			<Route path="/" element={<HomePage />} />
+			<Route path="/book" element={<BookingPage />} />
+		</Route>
+	)
+)
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+	<React.StrictMode>
+		<RouterProvider router={router} />
+	</React.StrictMode>
+)

src/routes/BookingPage.jsx

@@ -0,0 +1,10 @@
+import { BookingForm } from "../components/BookingForm"
+import "../styles/BookingPage.css"
+
+export const BookingPage = () => (
+	<section className="booking">
+		<h1>Book a Table</h1>
+		<hr />
+		<BookingForm />
+	</section>
+)

src/routes/HomePage.jsx

@@ -0,0 +1,11 @@
+import { Jumbo } from "../components/Jumbo"
+import { Specials } from "../components/Specials"
+import { Testimonials } from "../components/Testimonials"
+
+export const HomePage = () => (
+	<>
+		<Jumbo />
+		<Specials />
+		<Testimonials />
+	</>
+)

src/routes/Root.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom"
+import { Footer } from "../components/Footer.jsx"
+import { Header } from "../components/Header.jsx"
+
+export const Root = () => {
+	return (
+		<>
+			<Header />
+			<main>
+				<Outlet />
+			</main>
+			<Footer />
+		</>
+	)
+}

src/styles/BookingForm.css

@@ -0,0 +1,21 @@
+.booking-form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.2rem;
+}
+
+.booking-form :is(label, .submit) {
+	margin-top: 1rem;
+}
+
+.booking-form :is(input, select) {
+	background-color: white;
+	border: none;
+	padding: 0.5rem;
+	border-radius: 1rem;
+	font: inherit;
+}
+
+.booking-form .submit {
+	background-color: #fbdabb;
+}

src/styles/BookingPage.css

@@ -0,0 +1,15 @@
+.booking {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: #495e57;
+	padding: 1rem;
+	border-radius: 1rem;
+	height: 100%;
+	gap: 1rem;
+}
+
+.booking h1 {
+	font-size: 2.5rem;
+	margin: 0;
+}

src/styles/ButtonLink.css

@@ -0,0 +1,7 @@
+.button-link {
+	background-color: var(--primary-2);
+	color: black;
+	text-decoration: none;
+	padding: 0.5rem 1rem;
+	border-radius: 0.75rem;
+}

src/styles/Footer.css

@@ -0,0 +1,26 @@
+footer {
+	display: flex;
+	justify-content: center;
+	gap: 3rem;
+	padding: 2rem;
+	background-color: var(--primary-1);
+	color: white;
+}
+
+footer section {
+	display: flex;
+	flex-direction: column;
+}
+
+footer h3 {
+	font-size: 1rem;
+}
+
+footer img {
+	height: 10rem;
+}
+
+footer span {
+	padding: 0.5rem;
+	border-radius: 2rem;
+}

src/styles/Header.css

@@ -0,0 +1,35 @@
+nav {
+	display: flex;
+	height: 100%;
+	align-items: center;
+	justify-content: center;
+	gap: 3rem;
+}
+
+header img {
+	height: 3.5rem;
+	max-width: 20rem;
+}
+
+nav ul {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: 1rem 2rem;
+	border-radius: 2rem;
+	list-style: none;
+	margin: 0;
+}
+
+nav a {
+	color: rgb(128, 128, 128);
+	text-decoration: none;
+}
+
+nav a.selected {
+	color: rgb(0, 0, 0);
+}
+
+nav a:hover {
+	text-decoration: underline;
+}

src/styles/Jumbo.css

@@ -0,0 +1,26 @@
+.jumbo {
+	background-color: var(--primary-1);
+	height: 20rem;
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+	padding: 2rem;
+}
+
+.jumbo section {
+	max-width: 20rem;
+}
+
+.jumbo img {
+	border-radius: 2rem;
+}
+
+.jumbo h1 {
+	color: var(--primary-2);
+	font-size: 3rem;
+	margin: 0;
+}
+
+.jumbo h2 {
+	margin: 0;
+}

src/styles/Special.css

@@ -0,0 +1,43 @@
+.column {
+	width: 100%;
+	background-color: var(--secondary-1);
+	color: black;
+}
+
+.column,
+.column img {
+	border-radius: 1rem 1rem 0 0;
+}
+
+.column img {
+	width: 100%;
+	object-fit: cover;
+	height: 15rem;
+}
+
+.specialRow {
+	display: flex;
+	padding: 0;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.column :is(p, h3) {
+	margin: 0;
+}
+
+.column span {
+	color: #ee9972;
+	font-weight: bold;
+}
+
+.column article {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 1rem;
+}
+
+.column a {
+	margin-top: 3rem;
+}

src/styles/Specials.css

@@ -0,0 +1,14 @@
+.header-row {
+	justify-content: space-between;
+	align-items: center;
+}
+
+.specials {
+	width: 60%;
+	margin: 1rem auto;
+}
+
+.specials h2 {
+	color: black;
+	font-size: 2rem;
+}

src/styles/Testimonial.css

@@ -0,0 +1,30 @@
+.testimonial {
+	background-color: white;
+	color: black;
+	border-radius: 2rem;
+	padding: 1rem;
+}
+
+.testimonial img {
+	border-radius: 10rem;
+	width: 5rem;
+}
+
+.stars {
+	color: gold;
+}
+
+.name {
+	font-size: 1.3rem;
+}
+
+.testimonyRow {
+	padding: 0;
+	align-items: center;
+}
+
+.right {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}

src/styles/Testimonials.css

@@ -0,0 +1,15 @@
+.testimonials {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	align-items: center;
+	background-color: var(--primary-1);
+}
+
+.testimonialRow {
+	width: 70%;
+}
+
+.testimonials h2 {
+	font-size: 2rem;
+}