ImAlpha/Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

testing shadcn card

Browse Source
This commit is contained in:
ImAlpha 2024-01-05 23:13:05 -08:00
parent e374a047de
commit 25b04fad35
6 changed files with 159 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Websites/jefes-nextjs/app/about-us/page.tsx
View File

@ -57,31 +57,33 @@ const AboutUs = () => {
Jefes Mexican Cantina & Cocina Jefes Mexican Cantina & Cocina
</div> </div>
</div> </div>
<p> <div className="text-xl max-w-[75ch] space-y-4">
My name is Kevin Aguilar, and I am the owner and manager of the <p>
Jefes Mexican Cantina and Cocina based in Broken Arrow, Oklahoma. My name is Kevin Aguilar, and I am the owner and manager of the
Our combination of authentic Mexican dishes, excellent customer Jefes Mexican Cantina and Cocina based in Broken Arrow,
service, and family-friendly environment makes us one of the best Oklahoma. Our combination of authentic Mexican dishes, excellent
Mexican restaurants around. customer service, and family-friendly environment makes us one
</p> of the best Mexican restaurants around.
</p>
<p> <p>
Whether you are wanting to book our upstairs venue for an event, Whether you are wanting to book our upstairs venue for an event,
wanting to try out our creative alcoholic drinks or just wanting wanting to try out our creative alcoholic drinks or just wanting
to enjoy a meal with a loved one, you quickly see why so many to enjoy a meal with a loved one, you quickly see why so many
people choose Jefes. We take pride in our business as one of the people choose Jefes. We take pride in our business as one of the
highest rated Mexican restaurants in Broken Arrow. highest rated Mexican restaurants in Broken Arrow.
</p> </p>
<p> <p>
We just wanted to take a moment to express our heartfelt gratitude We just wanted to take a moment to express our heartfelt
to all of our loyal customers. Your continued support and loyalty gratitude to all of our loyal customers. Your continued support
means the world to us, and it is because of you that we are able and loyalty means the world to us, and it is because of you that
to continue doing what we love. Thank you for choosing our we are able to continue doing what we love. Thank you for
restaurant and for allowing us to serve you. We promise to always choosing our restaurant and for allowing us to serve you. We
strive for excellence and to bring you the best dining experience promise to always strive for excellence and to bring you the
possible. Thank you again! best dining experience possible. Thank you again!
</p> </p>
</div>
<div className="mx-auto flex items-center justify-center w-full pb-6"> <div className="mx-auto flex items-center justify-center w-full pb-6">
<Image <Image
src="/award.jpg" src="/award.jpg"

3
Websites/jefes-nextjs/app/layout.css
View File

@ -1,4 +1,7 @@
.jefes_background{ .jefes_background{
z-index: -1; z-index: -1;
filter: brightness(.19); filter: brightness(.19);
}
.par{
text-wrap: pretty;
} }

3
Websites/jefes-nextjs/app/layout.tsx
View File

@ -5,6 +5,7 @@ import NavBar from "./components/NavBar/NavBar";
import Image from "next/image"; import Image from "next/image";
import Footer from "@/components/Footer/footer"; import Footer from "@/components/Footer/footer";
import localFont from 'next/font/local'; import localFont from 'next/font/local';
import './layout.css'
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
const robleAlt = localFont({ const robleAlt = localFont({
@ -24,7 +25,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={robleAlt.className}> <body className={`${robleAlt.className} par`}>
<NavBar /> <NavBar />
{/* <Image {/* <Image
src="/PaintBackground1.webp" src="/PaintBackground1.webp"

2
Websites/jefes-nextjs/app/menu/Appetizers/page.tsx
View File

@ -45,7 +45,7 @@ const Appetizers = () => {
<h4 className=""> <h4 className="">
<strong>{menu_item.name}</strong> <strong>{menu_item.name}</strong>
</h4> </h4>
<p>Description: {menu_item.description}</p> <p className="max-w-[75ch]">Description: {menu_item.description}</p>
<div className="flex flex-row bg-gray-500 justify-evenly"> <div className="flex flex-row bg-gray-500 justify-evenly">
<div className="bg-red-400 flex flex-row"> <div className="bg-red-400 flex flex-row">
<span> <span>

42
Websites/jefes-nextjs/app/menu/Bar/items.json Normal file
View File

@ -0,0 +1,42 @@
[
{
"id": 1,
"name": "Caguamas",
"photo": "Bar/32ozCaguamas.jpeg",
"price": 14,
"size": "32oz",
"description": "A drink."
},
{
"id": 2,
"name": "Jefes Tower",
"photo": "Bar/100ozTower.jpeg",
"price": 35,
"size": "100oz",
"description": "A tower full of Corona."
},
{
"id": 3,
"name": "Chambong",
"photo": "Bar/chambong.jpeg",
"price": 18,
"size": "36oz",
"description": "El Chambong."
},
{
"id": 4,
"name": "La Mera Mera Margarita",
"photo": "Bar/laMeraMera56ozMargarita.jpeg",
"price": 20,
"size": "56oz",
"description": "The special margarita."
},
{
"id": 5,
"name": "Michelada",
"photo": "Bar/Michelada.jpeg",
"price": 13,
"size": "24oz",
"description": "Corona with tamarindo."
}
]

86
Websites/jefes-nextjs/app/menu/Bar/page.tsx Normal file
View File

@ -0,0 +1,86 @@
import * as React from "react";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Menu from "./items.json";
import Image from "next/image";
const Bar = () => {
return (
<main>
{/* Mapping out the menu
<div className=" flex flex-wrap gap-8 pt-6 justify-between w-full">
{Menu.map((menu_item) => {
return (
<div
key={menu_item.id}
className="flex flex-col flex-grow h-[452px] w-[325px] rounded-lg shadow-xl drop-shadow-xl"
>
<div className="h-[55%] relative w-full overflow-hidden">
<Image
src={`/${menu_item.photo}`}
alt="chili pepper spice"
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="rounded-t-lg"
/>
</div>
<h4 className="">
<strong>{menu_item.name}</strong>
</h4>
<p className="max-w-[75ch]">
Description: {menu_item.description}
</p>
<div className="flex flex-row justify-evenly">
<div className=" flex flex-row">
<span>{`$${menu_item.price}`}</span>
</div>
<div className="flex w-1/2 relative">
<div className="flex w-3 h-full items-end justify-end">
<div className=""></div>
</div>
</div>
</div>
</div>
);
})}
</div> */}
<div>
{Menu.map((menu_item) => {
return (
<Card key={menu_item.id} className="flex flex-wrap gap-8 pt-6 justify-evenly w-full">
<CardHeader className="h-[55%] relative w-full overflow-hidden">
<Image
src={`/${menu_item.photo}`}
alt="chili pepper spice"
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="rounded-t-lg"
/>
</CardHeader>
<h4 className="">
<strong>{menu_item.name}</strong>
</h4>
<p className="max-w-[75ch]">
Description: {menu_item.description}
</p>
<div className="flex flex-row justify-evenly">
<div className=" flex flex-row">
<span>{`$${menu_item.price}`}</span>
</div>
<div className="flex w-1/2 relative">
<div className="flex w-3 h-full items-end justify-end">
<div className=""></div>
</div>
</div>
</div>
</Card>
);
})}
</div>
</main>
);
};
export default Bar;