Skip to content

Commit

Permalink
fixed hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
@WTanardi
WTanardi committed Jun 14, 2023
1 parent 4dfe2c5 commit 6d8bd41
Show file tree
Hide file tree
Showing 10 changed files with 110 additions and 95 deletions.
6 changes: 3 additions & 3 deletions app/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ export default function Login() {
};

return (
<div className="flex h-screen w-screen items-center justify-center bg-gray-50 font-medium">
<div className="flex h-screen w-screen items-center justify-center font-medium">
<div className="z-10 mx-4 w-full max-w-md overflow-hidden rounded-2xl border border-gray-100 shadow-xl">
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-6 pt-8 text-center sm:px-16">
<Link href="/">
<Image src={logo} priority alt="Logo" width={100} height={100} />
</Link>
Expand All @@ -62,7 +62,7 @@ export default function Login() {
</p>
</div>
<form
className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-16"
className="flex flex-col space-y-4 px-4 py-8 sm:px-16"
onSubmit={loginUser}
>
<div>
Expand Down
8 changes: 4 additions & 4 deletions app/register/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ export default function Login() {
};

return (
<div className="flex h-screen w-screen items-center justify-center bg-gray-50 font-medium">
<div className="flex h-screen w-screen items-center justify-center font-medium">
<div className="z-10 mx-4 w-full max-w-md overflow-hidden rounded-2xl border border-gray-100 shadow-xl">
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-6 pt-8 text-center sm:px-16">
<Link href="/">
<Image src={logo} priority alt="Logo" width={100} height={100} />
</Link>
Expand All @@ -63,7 +63,7 @@ export default function Login() {
</p>
</div>
<form
className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 sm:px-16"
className="flex flex-col space-y-4 px-4 py-8 sm:px-16"
onSubmit={registerUser}
>
<div>
Expand Down Expand Up @@ -130,7 +130,7 @@ export default function Login() {
>
{loading ? <LoadingDots color="#e11d48" /> : <p>Register</p>}
</button>
<p className="text-center text-sm text-gray-600">
<p className="text-center text-sm text-gray-600">
Already have an account?{" "}
<Link
href="/login"
Expand Down
10 changes: 5 additions & 5 deletions components/AboutUs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@ const AboutUs = () => {
<>
<section className="pt-16">
<div className="container mx-auto flex flex-col lg:grid lg:grid-rows-4 lg:grid-cols-2 items-center px-6">
<div className="text-4xl min-[424px]:text-5xl md:text-6xl font-bold text-gray-800 lg:row-start-1 lg:col-start-2 lg:row-span-1 lg:col-span-3 lg:bottom-0 lg:left-0 lg:flex lg:self-end">
<div className="text-4xl min-[424px]:text-5xl md:text-6xl font-bold lg:row-start-1 lg:col-start-2 lg:row-span-1 lg:col-span-3 lg:bottom-0 lg:left-0 lg:flex lg:self-end">
<p>Who are we?</p>
</div>
<div className="w-full lg:w-1/2 flex lg\:grid justify-center lg:row-start-1 lg:col-start-1 lg:row-span-4 lg:col-span-2">
<Image src={team} alt="team picture" className="w-full"></Image>
</div>
<div className="max-lg:max-w-xl text-center lg:text-left items-center lg:row-start-2 lg:col-start-2 lg:row-span-3 lg:col-span-3">
<p className="text-gray-700 mb-4">
<div className="max-lg:max-w-xl text-center lg:text-left items-center lg:row-start-2 lg:col-start-2 lg:row-span-3 lg:col-span-3 opacity-90">
<p className=" mb-4">
Here at Pantry Pilot, we believe that cooking delicious, healthy
meals at home should be easy and stress-free.
</p>
<p className="text-gray-700 mb-4">
<p className="mb-4">
That&apos;s why we&apos;ve created a platform that helps you make
the most of the ingredients you have in your pantry, fridge, and
freezer. With our innovative recipe generator, you can quickly and
easily find recipes that match your dietary preferences and
available ingredients.
</p>
<p className="text-gray-700 mb-8">
<p className=" mb-8">
Our mission is to make home cooking more accessible and enjoyable
for everyone, regardless of their cooking skills or experience.
</p>
Expand Down
2 changes: 1 addition & 1 deletion components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Footer = () => {
return (
<>
<footer className="bg-rose-600 text-white py-6 w-full">
<footer className="bg-rose-600 text-background py-6 w-full">
<div className="container mx-auto flex justify-center items-center">
<span className="font-semibold">
© 2023 Pantry Pilot. All rights reserved.
Expand Down
102 changes: 50 additions & 52 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,61 +19,59 @@ const Header: React.FC<Props> = ({}) => {
};

return (
<div className="text-slate-800 scroll-smooth bg-[#fffdfa]">
<div className="container 2xl:max-w-7xl flex items-center justify-between py-8 px-4 md:px-8 mx-auto">
{/* Logo */}
<div className="flex">
<Link href="/">
<Image src={logo} alt="Pantry pilot logo" className="w-28" />
</Link>
</div>
{/* Nav */}
<div className="relative">
{/* Hamburger Menu */}
<button
type="button"
className="block md:hidden z-50 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:outline-none"
onClick={toggleNav}
>
<Menu />
</button>
{/* Mobile Menu */}
<div
className={`fixed inset-0 bg-white z-40 transition overflow-y-auto"
<div className="container 2xl:max-w-7xl flex items-center justify-between py-8 px-4 md:px-8 mx-auto">
{/* Logo */}
<div className="flex">
<Link href="/">
<Image src={logo} alt="Pantry pilot logo" className="w-28" />
</Link>
</div>
{/* Nav */}
<div className="relative">
{/* Hamburger Menu */}
<button
type="button"
className="block md:hidden z-50 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:outline-none"
onClick={toggleNav}
>
<Menu />
</button>
{/* Mobile Menu */}
<div
className={`fixed inset-0 bg-white z-40 transition overflow-y-auto"
id="mobNav ${isNavHidden ? "hidden" : ""}`}
>
<div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col text-4xl items-center gap-12 text-gray-800 font-bold px-8 py-4">
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/login">
<button className="px-4 py-2 text-white border-2 rounded-lg border-rose-600 bg-rose-600">
Start Cooking
</button>
</Link>
</li>
<button onClick={hideNav}>
<X />
</button>
</ul>
</div>
>
<div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col text-4xl items-center gap-12 text-gray-800 font-bold px-8 py-4">
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/login">
<button className="px-4 py-2 text-white border-2 rounded-lg border-rose-600 bg-rose-600">
Start Cooking
</button>
</Link>
</li>
<button onClick={hideNav}>
<X />
</button>
</ul>
</div>
{/* Desktop Menu */}
<ul className="hidden md:flex items-center gap-8 font-semibold">
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/login">
<button className="px-4 py-2 text-white border-2 rounded-lg border-rose-600 bg-rose-600">
Start Cooking
</button>
</Link>
</li>
</ul>
</div>
{/* Desktop Menu */}
<ul className="hidden md:flex items-center gap-8 font-semibold">
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/login">
<button className="px-4 py-2 text-white border-2 rounded-lg border-rose-600 bg-rose-600">
Start Cooking
</button>
</Link>
</li>
</ul>
</div>
</div>
);
Expand Down
43 changes: 31 additions & 12 deletions components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import Link from "next/link";
import { useState, FC } from "react";
import Image, { StaticImageData } from "next/image";
import IngredientCard from "./IngredientCard";
import burger from "@/public/hero/burger.webp";
import bun from "@/public/hero/bun.webp";
import beef from "@/public/hero/beef.webp";
Expand Down Expand Up @@ -156,8 +155,6 @@ const Hero = () => {
setActiveStyle(style);
};

const fewIngData = ingData.ingredients.slice(0, 4);

return (
<>
<section className="flex pt-12">
Expand All @@ -172,7 +169,7 @@ const Hero = () => {
pro.
</p>
{/* Subheading */}
<p className="py-8 text-lg max-lg:mx-auto text-stone-500 max-w-xs">
<p className="opacity-50 py-8 text-lg max-lg:mx-auto max-w-xs">
Input any ingredients you have in your kitchen and we&apos;ll show
you recipes you can make!
</p>
Expand Down Expand Up @@ -204,15 +201,37 @@ const Hero = () => {
{activeStyle === "pantry" && (
<div className="flex-row flex flex-wrap items-center justify-center mx-8">
{/* Ingredient card */}
{fewIngData.map((e, i) => (
<IngredientCard
{ingData.ingredients.map((e, i) => (
<div
className="p-4 shadow-md flex-col border-2 border-rose-600 flex rounded-2xl w-full"
key={i}
title={e.title}
ingCount={e.ingredients.length}
maxIngCount={e.ingredients.length + 5}
ingredients={e.ingredients}
imgPath={e.imgPath}
></IngredientCard>
>
{/* Card Top */}
<div className="flex items-center space-x-4 pb-3 mb-3 border-b-2">
{/* Card logo */}
<Image
src={e.imgPath}
alt={`${e.title} icon`}
width={50}
height={50}
className="w-12 h-12"
/>
{/* Card title and ingredient */}
<div className="xl:text-lg">{e.title}</div>
</div>
{/* Card bottom */}
<div className="flex flex-wrap gap-2 overflow-hidden items-start">
{/* Ingredients */}
{e.ingredients.map((e, i) => (
<div
className="text-white text-sm rounded-md border-x-8 border-y-4 select-none bg-emerald-500 border-emerald-500"
key={i}
>
{e}
</div>
))}
</div>
</div>
))}
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions components/IngredientCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const IngredientCard: FC<IngredientCardProps> = ({
name={e.name}
key={i}
id={e.id}
userHas={userIngArr.includes(e.id) ? true : false}
userHas={userIngArr?.includes(e.id) ? true : false}
/>
))}
{showMore &&
Expand All @@ -104,7 +104,7 @@ const IngredientCard: FC<IngredientCardProps> = ({
name={e.name}
key={i}
id={e.id}
userHas={userIngArr.includes(e.id) ? true : false}
userHas={userIngArr?.includes(e.id) ? true : false}
/>
))}
{/* Show More button */}
Expand Down
20 changes: 9 additions & 11 deletions components/ProductsServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ const ProductsServices = () => {
content:
"Experience the unique and delicious flavors of your with our collection of local recipes! Discover easy-to-follow recipes that will make mealtime a memorable experience for you and your loved ones.",
},
{
path: spaghetti,
title: "International Recipes",
content:
"Explore the world through your taste buds with our collection of international recipes! From classNameic French cuisine to spicy Indian curries, discover new and exciting flavors that will take your taste buds on a culinary journey.",
},
{
path: foodBox,
title: "Food Order",
content:
"Try out new flavors from your favorite restaurants before cooking! Order from nearby restaurants and get delicious meals delivered straight to your door. Explore new cuisines with ease.",
},
{
path: spaghetti,
title: "International Recipes",
content:
"Explore the world through your taste buds with our collection of international recipes! Discover new and exciting flavors that will take your taste buds on a culinary journey.",
},
];

return (
Expand All @@ -32,7 +32,7 @@ const ProductsServices = () => {
<p>What we offer</p>
</div>
<div className="max-w-7xl mx-auto px-8">
<div className="flex flex-wrap -mx-4">
<div className="flex flex-wrap -mx-4 justify-evenly">
{products.map((product, index) => (
<div className="w-full md:w-1/2 lg:w-1/3 px-4" key={index}>
<div className="flex justify-center">
Expand All @@ -45,12 +45,10 @@ const ProductsServices = () => {
></Image>
</div>
<div className="text-center px-4 py-4">
<p className="text-gray-900 font-bold text-3xl mb-4">
<p className="opacity-90 font-bold text-3xl mb-4">
{product.title}
</p>
<p className="text-gray-700 text-sm mb-4">
{product.content}
</p>
<p className="opacity-70 text-sm mb-4">{product.content}</p>
</div>
</div>
))}
Expand Down
8 changes: 4 additions & 4 deletions components/Testimonials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ const TestimonialCard: FC<TestimonialCardProps> = ({
return (
<>
<div className="md:w-1/4">
<div className="bg-[#fafcff] shadow-2xl rounded-3xl overflow-hidden">
<div className="shadow-2xl rounded-3xl overflow-hidden">
<div className="px-4 py-4">
<p className="text-gray-800 mb-4">&quot;{content}&quot;</p>
<p className=" mb-4">&quot;{content}&quot;</p>
<div className="flex items-center">
<div className="h-12 w-12 rounded-full overflow-hidden border-2 border-emerald-500">
<Image
Expand All @@ -35,8 +35,8 @@ const TestimonialCard: FC<TestimonialCardProps> = ({
></Image>
</div>
<div className="ml-4">
<p className="text-gray-800 text-sm font-semibold">{name}</p>
<p className="text-gray-600 text-sm">{location}</p>
<p className="opacity-80 text-sm font-semibold">{name}</p>
<p className="opacity-60 text-sm">{location}</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,6 @@ module.exports = {
require("daisyui"),
],
daisyui: {
themes: ["light"],
themes: ["light", "dark"],
},
};

1 comment on commit 6d8bd41

@vercel
Copy link

@vercel vercel bot commented on 6d8bd41 Jun 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

pantry-pilot-2 – ./

pantry-pilot-2.vercel.app
pantry-pilot-2-wtanardi.vercel.app
pantry-pilot-2-git-main-wtanardi.vercel.app

Please sign in to comment.