first commit

2023-02-14 23:10:12 +02:00
parent 164b86db1d
commit f79b95ef2f
44 changed files with 2674 additions and 99 deletions
@@ -0,0 +1,14 @@
+import SearchBar from "./SearchBar";
+
+export default function () {
+  return (
+    <div className="h-64 bg-gradient-to-r from-[#0f1f47] to-[#5f6984] p-2">
+      <div className="text-center mt-10">
+        <h1 className="text-white text-5xl font-bold mb-2">
+          Find your table for any occasion
+        </h1>
+        <SearchBar />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function () {
+  return (
+    <nav className="bg-white p-2 flex justify-between">
+      <Link href="" className="font-bold text-gray-700 text-2xl">
+        {" "}
+        OpenTable{" "}
+      </Link>
+      <div>
+        <div className="flex">
+          <button className="bg-blue-400 text-white border p-1 px-4 rounded mr-3">
+            Sign in
+          </button>
+          <button className="border p-1 px-4 rounded">Sign up</button>
+        </div>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+export default function RestaurantCard() {
+  return (
+    <div className="w-64 h-72 m-3 rounded overflow-hidden border cursor-pointer">
+      <Link href="/restaurant/milestonesgrill">
+        <img
+          src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
+          alt=""
+          className="w-full h-36"
+        />
+        <div className="p-1">
+          <h3 className="font-bold text-2xl mb-2">Milestones Grill</h3>
+          <div className="flex items-start">
+            <div className="flex mb-2">*****</div>
+            <p className="ml-2">77 reviews</p>
+          </div>
+          <div className="flex text-reg font-light capitalize">
+            <p className=" mr-3">Mexican</p>
+            <p className="mr-3">$$$$</p>
+            <p>Toronto</p>
+          </div>
+          <p className="text-sm mt-1 font-bold">Booked 3 times today</p>
+        </div>
+      </Link>
+    </div>
+  );
+}
@@ -0,0 +1,30 @@
+'use client'
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function SearchBar() {
+  const router = useRouter();
+  const [location, setLocation] = useState("");
+  return (
+    <div className="text-left text-lg py-3 m-auto flex justify-center">
+      <input
+        className="rounded  mr-3 p-2 w-[450px]"
+        type="text"
+        placeholder="State, city or town"
+        value={location}
+        onChange={(e) => setLocation(e.target.value)}
+      />
+      <button
+        className="rounded bg-red-600 px-9 py-2 text-white"
+        onClick={() => {
+          if (location === "banana") return;
+          router.push("/search");
+        }}
+      >
+        Let's go
+      </button>
+    </div>
+  );
+}
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
  --max-width: 1100px;
  --border-radius: 12px;
@@ -1,7 +1,7 @@
 export default function Head() {
  return (
    <>
-      <title>Create Next App</title>
+      <title>Open Table</title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
@@ -1,9 +1,10 @@
-import './globals.css'
+import NavBar from "./components/NavBar";
+import "./globals.css";

 export default function RootLayout({
  children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
  return (
    <html lang="en">
@@ -12,7 +13,14 @@ export default function RootLayout({
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
-      <body>{children}</body>
+      <body>
+        <main className="bg-gray-100 min-h-screen w-screen">
+          <main className="max-w-screen-2xl m-auto bg-white">
+            <NavBar />
+            {children}
+          </main>
+        </main>
+      </body>
    </html>
-  )
+  );
 }
@@ -1,91 +1,13 @@
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from './page.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
+import Header from "./components/Header";
+import RestaurantCard from "./components/RestaurantCard";

 export default function Home() {
  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-        <div className={styles.thirteen}>
-          <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
-        </div>
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+    <main>
+      <Header />
+      <div className="py-3 px-36 mt-10 flex flex-wrap justify-center">
+        <RestaurantCard />
      </div>
    </main>
-  )
+  );
 }
@@ -0,0 +1,46 @@
+import React from "react";
+
+export default function Form() {
+  return (
+    <div className="mt-10 flex flex-wrap justify-between w-[660px]">
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="First name"
+      />
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="Last name"
+      />
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="Phone number"
+      />
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="Email"
+      />
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="Occasion (optional)"
+      />
+      <input
+        type="text"
+        className="border rounded p-3 w-80 mb-4"
+        placeholder="Requests (optional)"
+      />
+      <button className="bg-red-600 w-full p-3 text-white font-bold rounded disabled:bg-gray-300">
+        Complete reservation
+      </button>
+      <p className="mt-4 text-sm">
+        By clicking “Complete reservation” you agree to the OpenTable Terms of
+        Use and Privacy Policy. Standard text message rates may apply. You may
+        opt out of receiving text messages at any time.
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function Header() {
+  return (
+    <div>
+      <h3 className="font-bold">You're almost done!</h3>
+      <div className="mt-5 flex">
+        <img
+          src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
+          alt=""
+          className="w-32 h-18 rounded"
+        />
+        <div className="ml-4">
+          <h1 className="text-3xl font-bold">Aiāna Restaurant Collective</h1>
+          <div className="flex mt-3">
+            <p className="mr-6">Tues, 22, 2023</p>
+            <p className="mr-6">7:30 PM</p>
+            <p className="mr-6">3 people</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+export default function Head() {
+  return (
+    <>
+      <title>Reserve</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta name="description" content="Generated by create next app" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
@@ -0,0 +1,13 @@
+import Header from "./components/Header";
+import Form from "./components/Form";
+
+export default function Reserve() {
+  return (
+    <div className="border-t h-screen">
+      <div className="py-9 w-3/5 m-auto">
+        <Header />
+        <Form />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+export default function Description() {
+  return (
+    <div className="mt-4">
+      <p className="text-lg font-light">
+        The classics you love prepared with a perfect twist, all served up in an
+        atmosphere that feels just right. That’s the Milestones promise. So,
+        whether you’re celebrating a milestone, making the most of Happy Hour or
+        enjoying brunch with friends, you can be sure that every Milestones
+        experience is a simple and perfectly memorable one.
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+export default function Header() {
+  return (
+    <div className="h-96 overflow-hidden">
+      <div className="bg-center bg-gradient-to-r from-[#0f1f47] to-[#5f6984] h-full flex justify-center items-center">
+        <h1 className="text-7xl text-white captitalize text-shadow text-center">
+          Milestones Grill (Toronto)
+        </h1>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,34 @@
+export default function Images() {
+  return (
+    <div>
+      <h1 className="font-bold text-3xl mt-10 mb-7 border-b pb-5">5 photos</h1>
+      <div className="flex flex-wrap">
+        <img
+          className="w-56 h-44 mr-1 mb-1"
+          src="https://resizer.otstatic.com/v2/photos/xlarge/3/41701449.jpg"
+          alt=""
+        />
+        <img
+          className="w-56 h-44 mr-1 mb-1"
+          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701450.jpg"
+          alt=""
+        />
+        <img
+          className="w-56 h-44 mr-1 mb-1"
+          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701452.jpg"
+          alt=""
+        />
+        <img
+          className="w-56 h-44 mr-1 mb-1"
+          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701453.jpg"
+          alt=""
+        />
+        <img
+          className="w-56 h-44 mr-1 mb-1"
+          src="https://resizer.otstatic.com/v2/photos/xlarge/2/41701454.jpg"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,16 @@
+import MenuCard from "./MenuCard";
+
+export default function Menu() {
+  return (
+    <main className="bg-white mt-5">
+      <div>
+        <div className="mt-4 pb-1 mb-1">
+          <h1 className="font-bold text-4xl">Menu</h1>
+        </div>
+        <div className="flex flex-wrap justify-between">
+          <MenuCard />
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,11 @@
+export default function MenuCard() {
+  return (
+    <div className=" border rounded p-3 w-[49%] mb-3">
+      <h3 className="font-bold text-lg">Surf and Turf</h3>
+      <p className="font-light mt-1 text-sm">
+        A well done steak with lobster and rice
+      </p>
+      <p className="mt-7">$80.00</p>
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+export default function Rating() {
+  return (
+    <div className="flex items-end">
+      <div className="ratings mt-2 flex items-center">
+        <p>*****</p>
+        <p className="text-reg ml-3">4.9</p>
+      </div>
+      <div>
+        <p className="text-reg ml-4">600 Reviews</p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,36 @@
+"use client"
+
+export default function ReservationCard() {
+  return (
+    <div className="fixed w-[15%] bg-white rounded p-3 shadow">
+      <div className="text-center border-b pb-2 font-bold">
+        <h4 className="mr-7 text-lg">Make a Reservation</h4>
+      </div>
+      <div className="my-3 flex flex-col">
+        <label htmlFor="">Party size</label>
+        <select name="" className="py-3 border-b font-light" id="">
+          <option value="">1 person</option>
+          <option value="">2 people</option>
+        </select>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex flex-col w-[48%]">
+          <label htmlFor="">Date</label>
+          <input type="text" className="py-3 border-b font-light w-28" />
+        </div>
+        <div className="flex flex-col w-[48%]">
+          <label htmlFor="">Time</label>
+          <select name="" id="" className="py-3 border-b font-light">
+            <option value="">7:30 AM</option>
+            <option value="">9:30 AM</option>
+          </select>
+        </div>
+      </div>
+      <div className="mt-5">
+        <button className="bg-red-600 rounded w-full px-4 text-white font-bold h-16">
+          Find a Time
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export default function RestaurantNavBar() {
+  return (
+    <nav className="flex text-reg border-b pb-2">
+      <Link href="/restaurant/milestonegrill/" className="mr-7">
+        Overview
+      </Link>
+      <Link href="/restaurant/milestonegrill/menu" className="mr-7">
+        Menu
+      </Link>
+    </nav>
+  );
+}
@@ -0,0 +1,33 @@
+export default function Reviews() {
+  return (
+    <div>
+      <h1 className="font-bold text-3xl mt-10 mb-7 borber-b pb-5">
+        What 100 people are saying
+      </h1>
+      <div>
+        <div className="border-b pb-7 mb-7">
+          <div className="flex">
+            <div className="w-1/6 flex flex-col items-center">
+              <div className="rounded-full bg-blue-400 w-16 h-16 flex items-center justify-center">
+                <h2 className="text-white text-2xl">MJ</h2>
+              </div>
+              <p className="text-center">Micheal Jordan</p>
+            </div>
+            <div className="ml-10 w-5/6">
+              <div className="flex items-center">
+                <div className="flex mr-5">*****</div>
+              </div>
+              <div className="mt-5">
+                <p className="text-lg font-light">
+                  Laurie was on top of everything! Slow night due to the snow
+                  storm so it worked in our favor to have more one on one with
+                  the staff. Delicious and well worth the money.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,7 @@
+export default function Title() {
+  return (
+    <div className="mt-4 border-b pb-6">
+      <h1 className="font-bold text-6xl">Milesstone Grill</h1>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+export default function Head() {
+  return (
+    <>
+      <title>Restaurant</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta name="description" content="Generated by create next app" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
@@ -0,0 +1,16 @@
+import Header from "./components/Header";
+
+export default function RestorantLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main>
+      <Header />
+      <div className="flex m-auto w-2/3 justify-between items-start 0 -mt-11">
+        {children}
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+export default function Head() {
+  return (
+    <>
+      <title>Menu</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta name="description" content="Generated by create next app" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
@@ -0,0 +1,12 @@
+import Header from "../components/Header";
+import Menu from "../components/Menu";
+import RestaurantNavBar from "../components/RestaurantNavBar";
+
+export default function RestaurantMenu() {
+  return (
+    <div className="bg-white w-[100%] rounded p-3 shadow">
+      <RestaurantNavBar />
+      <Menu />
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+import Description from "./components/Description";
+import Header from "./components/Header";
+import Images from "./components/Images";
+import Rating from "./components/Rating";
+import ReservationCard from "./components/ReservationCard";
+import RestaurantNavBar from "./components/RestaurantNavBar";
+import Reviews from "./components/Reviews";
+import Title from "./components/Title";
+
+export default function RestaurantDetails() {
+  return (
+    <>
+      <div className="bg-white w-[70%] rounded p-3 shadow">
+        <RestaurantNavBar />
+        <Title />
+        <Rating />
+        <Description />
+        <Images />
+        <Reviews />
+      </div>
+      <div className="w-[27%] relative text-reg">
+        <ReservationCard />
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,9 @@
+import SearchBar from "../../components/SearchBar";
+
+export default function Header() {
+  return (
+    <div className="bg-gradient-to-r to-[#5f6984] from-[#0f1f47] p-2">
+      <SearchBar />
+    </div>
+  );
+}
@@ -0,0 +1,32 @@
+import Link from "next/link";
+
+export default function RestaurantCard() {
+  return (
+    <div className="border-b flex pb-5">
+      <Link href="/restaurant/milestones">
+        <img
+          src="https://images.otstatic.com/prod1/49153814/2/medium.jpg"
+          alt=""
+          className="w-44 rounded"
+        />
+        <div className="pl-5">
+          <h2 className="text-3xl">Aiāna Restaurant Collective</h2>
+          <div className="flex items-start">
+            <div className="flex mb-2">*****</div>
+            <p className="ml-2 text-sm">Awesome</p>
+          </div>
+          <div className="mb-9">
+            <div className="font-light flex text-reg">
+              <p className="mr-4">$$$</p>
+              <p className="mr-4">Mexican</p>
+              <p className="mr-4">Ottawa</p>
+            </div>
+          </div>
+          <div className="text-red-600">
+            <a href="">View more information</a>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
@@ -0,0 +1,35 @@
+export default function SearchSideBar() {
+  return (
+    <div className="w-1/5">
+      <div className="border-b pb-4">
+        <h1 className="mb-2">Region</h1>
+        <p className="font-light text-reg">Toronto</p>
+        <p className="font-light text-reg">Ottawa</p>
+        <p className="font-light text-reg">Montreal</p>
+        <p className="font-light text-reg">Hamilton</p>
+        <p className="font-light text-reg">Kingston</p>
+        <p className="font-light text-reg">Niagara</p>
+      </div>
+      <div className="border-b pb-4 mt-3">
+        <h1 className="mb-2">Cuisine</h1>
+        <p className="font-light text-reg">Mexican</p>
+        <p className="font-light text-reg">Italian</p>
+        <p className="font-light text-reg">Chinese</p>
+      </div>
+      <div className="mt-3 pb-4">
+        <h1 className="mb-2">Price</h1>
+        <div className="flex">
+          <button className="border w-full text-reg font-light rounded-l p-2">
+            $
+          </button>
+          <button className="border-r border-t border-b w-full text-reg font-light p-2">
+            $$
+          </button>
+          <button className="border-r border-t border-b w-full text-reg font-light p-2 rounded-r">
+            $$$
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+export default function Head() {
+  return (
+    <>
+      <title>Search</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <meta name="description" content="Generated by create next app" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
@@ -0,0 +1,17 @@
+import Header from "../components/Header";
+import RestaurantCard from "./components/RestaurantCard";
+import SearchSideBar from "./components/SearchSideBar";
+
+export default function Search() {
+  return (
+    <>
+      <Header />
+      <div className="flex py-4 m-auto w-2/3 justify-between items-start">
+        <SearchSideBar />
+        <div className="w-5/6">
+          <RestaurantCard />
+        </div>
+      </div>
+    </>
+  );
+}