updates to 2xl screens, most likely will redo from scratch

This commit is contained in:
Jacob Delgado 2024-09-15 01:46:37 -07:00
parent dceb16a195
commit ef0cfa819c
9 changed files with 45 additions and 52 deletions

View File

@ -5,7 +5,7 @@ import Image from "next/image";
const AboutUs = () => { const AboutUs = () => {
return ( return (
<div className="flex flex-col relative justify-center items-center "> <div className="flex flex-col relative justify-center items-center ">
<div className="flex relative pt-40 w-full h-[400px] overflow-hidden"> <div className="flex relative pt-40 2xl:pt-56 w-full h-[400px] overflow-hidden">
<Image <Image
src="/IMG_2431.jpg" src="/IMG_2431.jpg"
alt="nav image" alt="nav image"

View File

@ -9,7 +9,6 @@ import "./NavBar.css";
import { GiHamburgerMenu } from "react-icons/gi"; import { GiHamburgerMenu } from "react-icons/gi";
import { AiOutlineInstagram, AiOutlineFacebook } from "react-icons/ai"; import { AiOutlineInstagram, AiOutlineFacebook } 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"; import { FaPhone } from "react-icons/fa6";
import StoreHours from "../StoreHours/StoreHours"; import StoreHours from "../StoreHours/StoreHours";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -63,8 +62,8 @@ const NavBar = () => {
<div <div
className={ className={
navbar navbar
? "flex fixed top-0 items-center bg-zinc-800 justify-center xl:p-1 mx-auto md:p-4 z-10 w-full h-[60px]" ? "flex fixed top-0 items-center bg-zinc-800 justify-center xl:p-1 mx-auto md:p-4 transition-all z-10 w-full h-[60px]"
: "flex flex-col bg-transparent mx-auto absolute z-10 w-full h-[220px]" : "flex flex-col bg-transparent mx-auto absolute z-10 w-full h-[220px transition-all]"
} }
> >
{/* Top Bar */} {/* Top Bar */}
@ -140,7 +139,7 @@ const NavBar = () => {
</div> </div>
{/* logo */} {/* logo */}
<Link href="/" className="absolute left-32 pt-20"> <Link href="/" className="absolute left-32 pt-20 2xl:pt-28">
<Image <Image
src="/logo.svg" src="/logo.svg"
width={0} width={0}

View File

@ -9,7 +9,7 @@ const Reserve = () => {
<div className="right-2 hidden md:block"> <div className="right-2 hidden md:block">
<Button <Button
size="sm" size="sm"
className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs" className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs transition-all"
> >
<span className="flex flex-row"> <span className="flex flex-row">
<span className="flex flex-row"> <span className="flex flex-row">

View File

@ -8,7 +8,7 @@ const contact = () => {
return ( return (
<main> <main>
<div className="flex flex-col relative justify-center items-center"> <div className="flex flex-col relative justify-center items-center">
<div className="flex relative pt-40 w-[100vw] h-[400px] overflow-hidden"> <div className="flex relative pt-40 2xl:pt-56 w-[100vw] h-[400px] overflow-hidden">
<Image <Image
src="/IMG_2431.jpg" src="/IMG_2431.jpg"
alt="nav image" alt="nav image"
@ -21,7 +21,7 @@ const contact = () => {
<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 z-10">
<div className="p-6 "> <div className="p-6 ">
<p className="py-4"> <p className="py-4">
<span className="">About Us</span> <span className="">Contact Us</span>
</p> </p>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter, Pridi } 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";
@ -13,6 +13,8 @@ const robleAlt = localFont({
display: 'swap', display: 'swap',
}) })
const pridi = Pridi({weight: "400", style: "normal", subsets: ["latin"]})
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Jefe's Mexican Cocina & Cantina", title: "Jefe's Mexican Cocina & Cantina",
description: "Located in Broken Arrow, Oklahoma.", description: "Located in Broken Arrow, Oklahoma.",
@ -25,17 +27,9 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${robleAlt.className} par`}> <body className={`${pridi.className} par`}>
<NavBar /> <NavBar />
{/* <Image <main className="bg-[#fffafa]">{children}</main>
src="/PaintBackground1.webp"
width={0}
height={0}
style={{ width: "100%", height: "auto" }}
alt="Logo"
className="hidden md:block absolute -z-10"
/> */}
<main className="bg-[#fffafa] ">{children}</main>
<Footer /> <Footer />
</body> </body>
</html> </html>

View File

@ -5,7 +5,7 @@ import MenuLinks from "../components/MenuBar/MenuLinks";
const layout = ({ children }: { children: React.ReactNode }) => { const layout = ({ children }: { children: React.ReactNode }) => {
return ( return (
<div className="flex flex-col relative justify-center items-center"> <div className="flex flex-col relative justify-center items-center">
<div className="flex relative pt-40 w-full h-[400px] overflow-hidden"> <div className="flex relative pt-40 2xl:pt-56 w-full h-[400px] overflow-hidden">
<Image <Image
src="/IMG_2431.jpg" src="/IMG_2431.jpg"
alt="nav image" alt="nav image"

View File

@ -9,7 +9,7 @@ const MenuButton = () => {
<div className="right-2 hidden md:block"> <div className="right-2 hidden md:block">
<Button <Button
size="sm" size="sm"
className="xl:text-lg bg-zinc-900 hover:bg-slate-600" className="xl:text-lg bg-zinc-900 hover:bg-slate-600 transition-all"
> >
<span className="flex flex-row px-3"> <span className="flex flex-row px-3">
<span className="flex flex-row"> <span className="flex flex-row">

Binary file not shown.

View File

@ -9,50 +9,50 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@auth/drizzle-adapter": "^0.3.9", "@auth/drizzle-adapter": "^0.3.17",
"@plaiceholder/next": "^3.0.0", "@plaiceholder/next": "^3.0.0",
"@planetscale/database": "^1.11.0", "@planetscale/database": "^1.19.0",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.1.0",
"@react-google-maps/api": "^2.19.2", "@react-google-maps/api": "^2.19.3",
"bcrypt": "^5.1.1", "bcrypt": "^5.1.1",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"classnames": "^2.3.2", "classnames": "^2.5.1",
"clsx": "^2.0.0", "clsx": "^2.1.1",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dotenv": "^16.3.1", "dotenv": "^16.4.5",
"drizzle-orm": "^0.29.1", "drizzle-orm": "^0.29.5",
"easymde": "^2.18.0", "easymde": "^2.18.0",
"embla-carousel-auto-height": "^8.0.0-rc14", "embla-carousel-auto-height": "^8.3.0",
"embla-carousel-autoplay": "^8.0.0-rc14", "embla-carousel-autoplay": "^8.3.0",
"embla-carousel-react": "^8.0.0-rc14", "embla-carousel-react": "^8.3.0",
"lucide-react": "^0.292.0", "lucide-react": "^0.292.0",
"mysql2": "^3.6.5", "mysql2": "^3.11.2",
"next": "14.0.3", "next": "14.0.3",
"next-auth": "5.0.0-beta.4", "next-auth": "5.0.0-beta.4",
"react": "^18.2.0", "react": "^18.3.1",
"react-day-picker": "^8.9.1", "react-day-picker": "^8.10.1",
"react-dom": "^18.2.0", "react-dom": "^18.3.1",
"react-hook-form": "^7.47.0", "react-hook-form": "^7.53.0",
"react-icons": "^4.11.0", "react-icons": "^4.12.0",
"react-simplemde-editor": "^5.2.0", "react-simplemde-editor": "^5.2.0",
"sharp": "^0.33.2", "sharp": "^0.33.5",
"tailwind-merge": "^2.0.0", "tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"tsx": "^4.6.1", "tsx": "^4.19.1",
"zod": "^3.22.4" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@types/bcrypt": "^5.0.2", "@types/bcrypt": "^5.0.2",
"@types/node": "^20", "@types/node": "^20.16.5",
"@types/react": "^18", "@types/react": "^18.3.5",
"@types/react-dom": "^18", "@types/react-dom": "^18.3.0",
"autoprefixer": "^10", "autoprefixer": "^10.4.20",
"daisyui": "^3.9.3", "daisyui": "^3.9.4",
"drizzle-kit": "^0.20.6", "drizzle-kit": "^0.20.18",
"eslint": "^8", "eslint": "^8.57.0",
"eslint-config-next": "14.0.3", "eslint-config-next": "14.0.3",
"postcss": "^8", "postcss": "^8.4.47",
"tailwindcss": "^3", "tailwindcss": "^3.4.11",
"typescript": "^5" "typescript": "^5.6.2"
} }
} }