update to footer
This commit is contained in:
ImAlpha
parent
a65779bb59
commit
2da1dfcfde
@ -15,7 +15,7 @@ const AboutUs = () => {
|
|||||||
quality={100}
|
quality={100}
|
||||||
className="brightness-[20%]"
|
className="brightness-[20%]"
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl z-10">
|
<div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl absolute">
|
||||||
<div className="p-6 ">
|
<div className="p-6 ">
|
||||||
<p className="py-4">
|
<p className="py-4">
|
||||||
<span className="">About Us</span>
|
<span className="">About Us</span>
|
||||||
@ -25,17 +25,21 @@ const AboutUs = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center text-xl font-serif antialiased ">
|
<div className="flex flex-col items-center text-xl font-serif antialiased ">
|
||||||
<div className="flex flex-row space-y-6 text-black pt-10 pl-28 pr-32 bg-paintbg w-full">
|
<div className="flex flex-row space-y-6 text-black pt-10 pl-28 pr-32 w-full relative">
|
||||||
<div className="flex flex-col relative aspect-square container mr-20">
|
<div className="flex flex-col container mr-20 w-full items-center relative">
|
||||||
|
<div className=" w-[80%] h-1/2 relative rounded flex justify-center ">
|
||||||
|
<div className="w-full h-full absolute rounded-2xl overflow-hidden mt-12">
|
||||||
<Image
|
<Image
|
||||||
src="/kevin.webp"
|
src="/kevin.webp"
|
||||||
fill
|
fill
|
||||||
style={{ objectFit: "contain" }}
|
style={{ objectFit: "contain", objectPosition: "center" }}
|
||||||
quality={100}
|
quality={100}
|
||||||
alt="Photo of Kevin mobile."
|
alt="Photo of Kevin mobile."
|
||||||
className=""
|
className=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col space-y-6">
|
<div className="flex flex-col space-y-6">
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
@ -78,7 +82,7 @@ const AboutUs = () => {
|
|||||||
strive for excellence and to bring you the best dining experience
|
strive for excellence and to bring you the best dining experience
|
||||||
possible. Thank you again!
|
possible. Thank you again!
|
||||||
</p>
|
</p>
|
||||||
<div className="mx-auto flex items-center justify-center w-full">
|
<div className="mx-auto flex items-center justify-center w-full pb-6">
|
||||||
<Image
|
<Image
|
||||||
src="/award.jpg"
|
src="/award.jpg"
|
||||||
width={0}
|
width={0}
|
||||||
|
|||||||
@ -7,12 +7,10 @@ import classnames from "classnames";
|
|||||||
import Reserve from "./reserveButton";
|
import Reserve from "./reserveButton";
|
||||||
import "./NavBar.css";
|
import "./NavBar.css";
|
||||||
import { GiHamburgerMenu } from "react-icons/gi";
|
import { GiHamburgerMenu } from "react-icons/gi";
|
||||||
import {
|
import { AiOutlineInstagram, AiOutlineFacebook } from "react-icons/ai";
|
||||||
AiOutlineInstagram,
|
|
||||||
AiOutlineFacebook,
|
|
||||||
AiOutlineTwitter,
|
|
||||||
} from "react-icons/ai";
|
|
||||||
import { FaTiktok } from "react-icons/fa";
|
import { FaTiktok } from "react-icons/fa";
|
||||||
|
import { RiCellphoneLine } from "react-icons/ri";
|
||||||
|
import { FaPhone } from "react-icons/fa6";
|
||||||
|
|
||||||
const NavBar = () => {
|
const NavBar = () => {
|
||||||
const currentPath = usePathname();
|
const currentPath = usePathname();
|
||||||
@ -63,6 +61,19 @@ const NavBar = () => {
|
|||||||
: "flex items-center justify-center xl:p-1 bg-transparent mx-auto md:p-4 absolute z-10 w-full h-[120px]"
|
: "flex items-center justify-center xl:p-1 bg-transparent mx-auto md:p-4 absolute z-10 w-full h-[120px]"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
{/* Phone Number */}
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
navbar
|
||||||
|
? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute"
|
||||||
|
: "hidden"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center space-x-1.5">
|
||||||
|
<FaPhone />
|
||||||
|
<span>(918) 888-0844</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<ul
|
<ul
|
||||||
className={
|
className={
|
||||||
navbar
|
navbar
|
||||||
@ -134,6 +145,7 @@ const NavBar = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile */}
|
||||||
<div className={menu_open ? "hidden" : ""}>
|
<div className={menu_open ? "hidden" : ""}>
|
||||||
<div
|
<div
|
||||||
onClick={handleNav}
|
onClick={handleNav}
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import NavBar from "./components/NavBar/NavBar";
|
import NavBar from "./components/NavBar/NavBar";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import Footer from "@/components/Footer/footer";
|
||||||
|
|
||||||
const inter = Inter({ subsets: ["latin"] });
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
@ -17,9 +18,9 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" data-theme="jefes">
|
<html lang="en">
|
||||||
<body className={inter.className}>
|
<body className={inter.className}>
|
||||||
<NavBar/>
|
<NavBar />
|
||||||
{/* <Image
|
{/* <Image
|
||||||
src="/PaintBackground1.webp"
|
src="/PaintBackground1.webp"
|
||||||
width={0}
|
width={0}
|
||||||
@ -28,8 +29,8 @@ export default function RootLayout({
|
|||||||
alt="Logo"
|
alt="Logo"
|
||||||
className="hidden md:block absolute -z-10"
|
className="hidden md:block absolute -z-10"
|
||||||
/> */}
|
/> */}
|
||||||
<main className="bg-[beige]">{children}</main>
|
<main className="bg-[#fffafa] ">{children}</main>
|
||||||
{/* Footer */}
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -250,7 +250,7 @@ export default function Home() {
|
|||||||
{/* Section 5 */}
|
{/* Section 5 */}
|
||||||
<div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[22svw] py-4">
|
<div className="flex md:flex-row flex-col md:h-[40svh] h-[80svh] md:gap-y-0 gap-y-4 px-[22svw] py-4">
|
||||||
{/* Text-side */}
|
{/* Text-side */}
|
||||||
<div className=" flex flex-col leading-relaxed gap-y-6 relative w-full text-center items-center justify-center md:text-start md:items-start xl:items-end md:justify-start pr-6">
|
<div className="flex flex-col leading-relaxed gap-y-6 relative w-full text-center items-center justify-center md:text-start md:items-start xl:items-end md:justify-start">
|
||||||
<h2 className="text-red-700 text-4xl font-bold xl:pr-10 pr-0">
|
<h2 className="text-red-700 text-4xl font-bold xl:pr-10 pr-0">
|
||||||
Unbeatable Customer Service
|
Unbeatable Customer Service
|
||||||
</h2>
|
</h2>
|
||||||
@ -285,7 +285,7 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-full h-[80svh] bg-blue-300">
|
<div className="w-full h-[80svh] bg-blue-300">
|
||||||
{/* <GoogleReviews /> */}
|
{/* <GoogleReviews /> */}
|
||||||
<GoogleMap />
|
{/* <GoogleMap /> */}
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="flex flex-col w-full h-[180vh]">
|
{/* <div className="flex flex-col w-full h-[180vh]">
|
||||||
<EmblaCarousel />
|
<EmblaCarousel />
|
||||||
|
|||||||
@ -1,11 +1,102 @@
|
|||||||
import React from 'react'
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { AiOutlineInstagram, AiOutlineFacebook } from "react-icons/ai";
|
||||||
|
import { FaTiktok } from "react-icons/fa";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
|
const currentPath = usePathname();
|
||||||
|
const nav = [
|
||||||
|
{ label: "HOME", href: "/" },
|
||||||
|
{ label: "MENU", href: "/menu" },
|
||||||
|
{ label: "ABOUT", href: "/about-us" },
|
||||||
|
{ label: "CONTACT", href: "/contact" },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="bg-stone-900 w-full items-center justify-center md:h-[25vh] flex sm:h-[50svh] overflow-hidden">
|
||||||
|
<div className=" w-[60%] flex flex-col md:flex-row text-white justify-evenly leading-relaxed items-center text-center mx-auto relative h-full">
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-evenly relative">
|
||||||
|
<div className="h-1/2 w-full relative">
|
||||||
|
{/* logo */}
|
||||||
|
<Link href="/" className="">
|
||||||
|
<Image
|
||||||
|
src="/logo.svg"
|
||||||
|
fill
|
||||||
|
style={{ objectFit: "contain", objectPosition: "center" }}
|
||||||
|
alt="Logo"
|
||||||
|
quality={100}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p className="flex flex-wrap w-[90%] relative items-center text-start justify-center text-base ">
|
||||||
|
Jefe's Mexican Cocina Y Cantina serves the best Mexican food in
|
||||||
|
Broken Arrow, OK.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Footer
|
<div className="flex-col w-full h-full items-center gap-4 relative top-4 md:flex hidden justify-center text-center">
|
||||||
|
<h2 className="text-xl font-semibold italic antialiased">Pages</h2>
|
||||||
|
<div className="bg-red-800 h-0.5 w-[20%]"></div>
|
||||||
|
<div className=" items-center justify-center h-full">
|
||||||
|
<ul className="flex flex-col text-base font-sans antialiased w-full leading-relaxed text-start pl-4">
|
||||||
|
{nav.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.href}
|
||||||
|
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
|
||||||
|
// replace with classnames object instead
|
||||||
|
className={classnames({
|
||||||
|
" text-white": link.href === currentPath,
|
||||||
|
"text-white": link.href !== currentPath,
|
||||||
|
"hover:text-red-800 hover:cursor-pointer": true,
|
||||||
|
})}
|
||||||
|
href={link.href}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col w-full h-full items-center gap-4 top-4 relative ">
|
||||||
|
<h2 className="text-xl font-semibold italic antialiased">
|
||||||
|
Store Hours
|
||||||
|
</h2>
|
||||||
|
<div className="bg-red-800 h-0.5 w-[20%] "></div>
|
||||||
|
<div className="flex flex-col justify-center items-center text-white w-full text-start leading-relaxed text-sm">
|
||||||
|
<div className="flex flex-col pl-3 text-start">
|
||||||
|
<h3>Monday - Thursday:</h3>
|
||||||
|
<p>11:00am - 9:00pm</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col text-start">
|
||||||
|
<h3>Friday - Saturday:</h3>
|
||||||
|
<p>11:00am - 9:30pm</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col text-start">
|
||||||
|
<h3>Sunday:</h3>
|
||||||
|
<p>11:00am - 8:00pm</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col w-full h-full items-center gap-4 top-4 relative">
|
||||||
|
<h2 className="text-xl font-semibold italic antialiased">
|
||||||
|
Follow Us
|
||||||
|
</h2>
|
||||||
|
<div className="bg-red-800 h-0.5 w-[20%] "></div>
|
||||||
|
<div className="flex flex-row justify-evenly items-center text-white w-[60%] relative h-1/2">
|
||||||
|
<FaTiktok size={30} className="cursor-pointer" />
|
||||||
|
<AiOutlineInstagram size={30} className="cursor-pointer" />
|
||||||
|
<AiOutlineFacebook size={30} className="cursor-pointer" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user