Skip to content

Commit

Permalink
updated icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@MutiatBash
MutiatBash committed Dec 3, 2023
1 parent 66af7f1 commit 5ee4432
Show file tree
Hide file tree
Showing 20 changed files with 121 additions and 115 deletions.
4 changes: 2 additions & 2 deletions app/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Button: React.FC<buttonProps> = ({ text, className, onClick }) => {
<div>
<button
onClick={onClick}
className={`w-[fit-content] py-[0.8rem] px-2 whitespace-nowrap text-base md:text-lg font-bold md:py-[0.6875rem] md:px-6 hover:shadow-md transition-all ease-in ${className}`}
className={`w-[fit-content] py-[0.8rem] px-5 whitespace-nowrap font-bold md:py-[1rem] md:px-6 hover:shadow-md transition-all ease-in ${className}`}
>
{text}
</button>
Expand All @@ -37,7 +37,7 @@ export const Button: React.FC<buttonProps> = ({ text, className, onClick }) => {
<div>
<button
onClick={onClick}
className={`w-[fit-content] flex flex-row justify-between items-center space-x-2 py-[0.8rem] px-2 whitespace-nowrap text-base md:text-lg font-bold md:py-[0.6875rem] md:px-6 hover:shadow-md transition-all ease-in ${className}`}
className={` flex flex-row justify-between items-center gap-x-2 py-[0.8rem] px-5 whitespace-nowrap font-bold md:py-[1rem] md:px-6 hover:shadow-md transition-all ease-in ${className}`}
>
<span>{icon && <FontAwesomeIcon icon={icon} className="icon" style={iconStyle} size={iconSize}/>}</span>
<span>{text}</span>
Expand Down
23 changes: 8 additions & 15 deletions app/components/Cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ interface MenuProps {
interface StrengthProps {
title?: string;
description?: string;
icon: IconProp;
iconStyle?: React.CSSProperties;
iconSize?: FontAwesomeIconProps["size"];
image: string;
// iconStyle?: number;
// iconSize?: string;
}

interface ClientProps {
Expand Down Expand Up @@ -78,8 +78,9 @@ export const MenuCards = ({ image, description, title, price }: MenuProps) => {
</div>
<IconButton
icon={faCartShopping}
iconSize="sm"
text={"ORDER NOW"}
className="text-white bg-[#efb64d] rounded-full capitalize mt-2"
className="text-white bg-[#efb64d] rounded-full capitalize mt-2 px-5 "
/>
</div>
);
Expand All @@ -88,20 +89,12 @@ export const MenuCards = ({ image, description, title, price }: MenuProps) => {
export const StrengthCards = ({
title,
description,
icon,
iconStyle,
iconSize,
image,
}: StrengthProps) => {
return (
<div className="w-full p-4 lg:py-5 ">
<div className="w-full lg:py-5 ">
<div className="flex flex-col gap-3 lg:gap-4 items-start">
{icon && (
<FontAwesomeIcon
icon={icon as IconProp}
style={iconStyle}
size={iconSize}
/>
)}
<div><Image src={image} height={20} width={20} alt="icon" /></div>
<h4 className="font-semibold">{title}</h4>
<p className="text-sm font-extralight">{description}</p>
</div>
Expand Down
9 changes: 5 additions & 4 deletions app/components/MobileMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import { Button } from "./Button";
import Link from "next/link";
import { links } from "./Navbar";
import { usePathname } from "next/navigation";

export const MobileMenu = () => {
// const location = useLocation();
const location = usePathname();
return (
<div className="bg-[#22212133] z-30 h-screen w-full inset-x-0 fixed top-[3.2rem]">
<div className="bg-[#2221213e] z-30 h-screen w-full inset-x-0 fixed top-[3.2rem]">
<div className="lg:hidden bg-white w-full space-y-4 p-3 py-6 pb-8 flex flex-col gap-3 items-center h-[60%] justify-center">
<ul className="lg:hidden flex flex-col items-center gap-8 justify-center">
{links.map((links) => (
<li className="group relative"key={links.id} >
<Link
href={links.url}
className={`nav-item text-[#353A43] transition duration-300 ease-in text-lg font-medium ${
links.url ? " text-[#ff7518]" : ""
links.url === location ? " text-red-500" : ""
}`}
>
{links.text}
</Link>
<div className="absolute w-full left-0 h-0.5 bg-[#ff7518] transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100"></div>

</li>
))}
</ul>
Expand Down
141 changes: 76 additions & 65 deletions app/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { Button } from "./Button";
import { MobileMenu } from "./MobileMenu";
import { usePathname } from "next/navigation";
import logo from "../../public/pizza-logo.png"
import pizzaHeader from "../../public/pizza-header.png"


export const links = [
{
Expand Down Expand Up @@ -51,71 +54,79 @@ const Navbar = () => {
};

return (
<div className="w-full gap-3 h-full py-4 px-4 md:px-14 lg:py-6 lg:px-16 bg-white sticky top-0 z-20">
<div className="w-full flex items-center justify-between py-4">
<div>
<Image
width="75"
height="75"
alt="nav image"
src="/pizza-logo.png"
className="absolute top-0 py-3"
/>
</div>
<div>
<Image
width="150"
height="150"
alt="nav image"
src="/pizza-header.png"
className="absolute top-0"
/>
</div>
<div className="flex flex-row space-x-8">
<ul className="hidden lg:flex items-center justify-between space-x-5 lg:space-x-8">
{links.map((links) => (
<li className="" key={links.id}>
<Link
href={links.url}
className={`nav-item text-[#353A43] x-5 transition duration-300 ease-in uppercase font-medium ${links.url === location ? "text-red-500" : ""}`}
>
{links.text}
</Link>
</li>
))}
</ul>
<div className="hidden lg:flex flex-row gap-16 items-center justify-between">
<Link href="/cart">
<div className="relative">
<span className="text-[#fdfcfd] w-[fit-content] h-fit bg-red-600 py-[0.18rem] px-[0.6rem] bottom-4 font-bold text-sm absolute left-3 rounded-full ">
{/* {cartItems.length} */} 4
</span>
<FontAwesomeIcon icon={faCartShopping} size="xl" style={{color:"#0056d6"}}/>
</div>
</Link>
</div>
</div>
<div className="flex lg:hidden flex-row gap-10 items-center justify-between">
<Link href="/cart">
<div className="relative">
<span className="text-[#fdfcfd] bg-red-600 py-[0.11rem] w-[fit-content] text-center h-5 px-[0.4rem] bottom-3 font-bold text-xs absolute left-3 rounded-full ">
{/* {cartItems.length} */}
2
</span>
<FontAwesomeIcon icon={faCartShopping} size="sm" style={{color:"#0056d6"}} />
</div>
</Link>
<button onClick={handleMenu} className="">
{menuOpen ? (
<FontAwesomeIcon icon={faXmark} />
) : (
<FontAwesomeIcon icon={faBars} />
)}
</button>
</div>
</div>
{menuOpen && <MobileMenu />}
</div>
<div className="w-full gap-3 h-full py-2 px-5 md:px-14 lg:py-3 lg:px-16 bg-white sticky top-0 z-20">
<div className="w-full flex items-center justify-between ">
<div>
<Image
// width="65"
// height="65"
alt="nav image"
src={logo}
className="w-[60%] top-0 lg:w-full"
/>
</div>
<div>
<Image
alt="nav image"
src={pizzaHeader}
className="absolute top-0 w-[20%] lg:w-[10%]"
/>
</div>
<div className="flex flex-row space-x-8">
<ul className="hidden lg:flex items-center justify-between space-x-5 lg:space-x-8">
{links.map((links) => (
<li className="group relative" key={links.id}>
<Link
href={links.url}
className={`nav-item text-[#353A43] transition duration-300 ease-in uppercase font-medium ${
links.url === location ? "text-red-500" : ""
}`}
>
{links.text}
</Link>
<div className="absolute w-full left-0 h-0.5 bg-red-500 transform scale-x-0 origin-left transition-transform duration-300 ease-in-out group-hover:scale-x-100"></div>
</li>
))}
</ul>
<div className="hidden lg:flex flex-row gap-16 items-center justify-between">
<Link href="/cart">
<div className="relative">
<span className="text-[#fdfcfd] w-[fit-content] h-fit bg-red-600 py-[0.18rem] px-[0.6rem] bottom-4 font-bold text-sm absolute left-3 rounded-full ">
{/* {cartItems.length} */} 4
</span>
<FontAwesomeIcon
icon={faCartShopping}
size="xl"
style={{ color: "#0056d6" }}
/>
</div>
</Link>
</div>
</div>
<div className="flex lg:hidden flex-row gap-10 items-center justify-between">
<Link href="/cart">
<div className="relative">
<span className="text-[#fdfcfd] bg-red-600 py-[0.11rem] w-[fit-content] text-center h-5 px-[0.4rem] bottom-3 font-bold text-xs absolute left-3 rounded-full ">
{/* {cartItems.length} */}2
</span>
<FontAwesomeIcon
icon={faCartShopping}
size="sm"
style={{ color: "#0056d6" }}
/>
</div>
</Link>
<button onClick={handleMenu} className="">
{menuOpen ? (
<FontAwesomeIcon icon={faXmark} />
) : (
<FontAwesomeIcon icon={faBars} />
)}
</button>
</div>
</div>
{menuOpen && <MobileMenu />}
</div>
);
};

Expand Down
8 changes: 4 additions & 4 deletions app/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,28 +41,28 @@ export const popularDishes = [
export const ourStrengths = [
{
id: 1,
icon: faRotate,
icon: "/icecream.png",
title: "All Kinds of Food",
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
},
{
id: 2,
src: "/sandwich.jpg",
src: "/fan.png",
title: "All Kinds of Food",
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
},
{
id: 3,
src: "/hero-pizza.png",
src: "/smile.png",
title: "All Kinds of Food",
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
},
{
id: 4,
src: "/pizza-2.png",
src: "/location.png",
title: "All Kinds of Food",
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
Expand Down
26 changes: 12 additions & 14 deletions app/sections/Fresh.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
import Image from 'next/image'
import { IconButton } from '../components/Button';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import garlic from "../../public/garlic.png"
import cutPizza from "../../public/cut-pizza.png"

const Fresh = () => {
return(
<div className="relative flex lg:flex-row md:flex-col justify-between w-full items-center py-4 px-4 lg:py-24 lg:mt-20 md:px-16 lg:px-20">
<div className="relative flex lg:flex-row flex-col-reverse justify-between w-full items-center py-8 px-4 lg:py-24 lg:mt-20 md:px-16 lg:px-20">
<div>
<Image
width="350"
height="350"
alt="hero image"
src="/cut-pizza.png"
className="absolute left-0 pt-10 top-5 "
src={cutPizza}
className="relative lg:absolute -left-8 pt-5 lg:pt-10 top-5 bottom-0"
/>
</div>
<div className="relative flex flex-row w-[68%] lg:pt-16">
<div className=" flex flex-col gap-6">
<h3 className='lg:text-3xl w-[40%] tracking-wider font-semibold '>Daily fresh and always tasty</h3>
<p className='w-[50%] lg:text-lg lg:leading-[2.2rem]'>There are many variations of passages of lorem ipsum available, but the majority
<div className="relative flex flex-row lg:w-[68%] lg:pt-16">
<div className=" flex flex-col gap-3 lg:gap-6">
<h3 className='text-2xl lg:text-3xl lg:w-[40%] tracking-wider font-semibold '>Daily fresh and always tasty</h3>
<p className='lg:w-[50%] lg:text-lg lg:leading-[2.2rem]'>There are many variations of passages of lorem ipsum available, but the majority
haved</p>
</div>
<div className="">
<Image
width="80"
height="80"
alt="hero image"
src="/garlic.png"
className=" absolute pt-5 bottom-0 right-[35%]"
alt="garlic"
src={garlic}
className="w-[13%] right-0 lg:w-[10%] -bottom-10 absolute pt-5 lg:bottom-0 lg:right-[35%]"
/>
</div>
</div>
Expand Down
13 changes: 7 additions & 6 deletions app/sections/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,24 @@ import { faCartShopping } from "@fortawesome/free-solid-svg-icons";

const Hero = () => {
return (
<div className=" flex lg:flex-row md:flex-col mt-10 justify-between w-full items-center py-4 px-4 lg:py-8 md:px-16 lg:px-20">
<div className=" w-[50%] flex flex-col space-y-3 gap-3 pt-14">
<h1 className="lg:text-6xl w-[80%] font-semibold lg:leading-[4.1rem]">
<div className=" flex flex-col lg:flex-row mt-6 lg:mt-10 justify-between w-full text-center lg:text-left items-center py-8 px-4 lg:py-8 md:px-16 lg:px-20">
<div className="lg:w-[50%] flex flex-col gap-3 lg:pt-14 items-center lg:items-start">
<h1 className="text-3xl lg:text-6xl lg:w-[80%] font-semibold lg:leading-[4.1rem]">
Handmade, With an Extra Pinch of{" "}
<span className="text-red-600">Love</span>
</h1>
<p className="w-[80%] lg:text-xl tracking-wider">
<p className="lg:w-[80%] lg:text-xl tracking-wider">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<IconButton
icon={faCartShopping}
iconSize='sm'
text={"ORDER NOW"}
className="text-white bg-[#efb64d] rounded-full upppercase mt-2"
className="text-white bg-[#efb64d] rounded-full upppercase mt-2 px-4"
/>
</div>
<div className="h- w-[45%] relative">
<div className="hidden lg:block w-[45%] relative">
{/* <div className=""> */}
<div className="z-20 w-full pr-20 mr-10">
<Image
Expand Down
2 changes: 1 addition & 1 deletion app/sections/PopularDishes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {popularDishes} from "../data"

const PopularDishes = () => {
return (
<section className="py-4 px-4 lg:py-14 md:px-16 lg:px-16">
<section className="py-8 px-4 lg:py-14 md:px-16 lg:px-16">
<div className='flex flex-col gap-2'>
<p className='text-red-600 font-semibold'>Popular Dishes</p>
<h3 className='text-xl md:text-2xl lg:text-3xl font-bold text-[#030203]'>Browse our Menu</h3>
Expand Down
5 changes: 3 additions & 2 deletions app/sections/StrengthSect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';

const StrengthSect = () => {
return (
<section className="py-4 px-4 lg:py-14 md:px-16 bg-[#fffaec]">
<section className="py-8 px-4 lg:py-14 md:px-16 bg-[#fffaec]">
<div className="flex flex-col gap-2">
<p className="text-red-600 font-semibold">Our Strength</p>
<h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-[#030203] capitalize">
Expand All @@ -17,7 +17,8 @@ const StrengthSect = () => {
return (
<StrengthCards
key={index}
icon={strength.icon as IconProp}
image={strength.icon}
// iconStyle={20}
description={strength.description}
title={strength.title}
/>
Expand Down
Loading

0 comments on commit 5ee4432

Please sign in to comment.