update cards
This commit is contained in:
parent
fb8dd85dbf
commit
ff7b0d7f47
@ -30,7 +30,7 @@ const NavBar = () => {
|
||||
const links = [
|
||||
{ label: "HOME", href: "/" },
|
||||
{ label: "MENU", href: "/menu" },
|
||||
{ label: "GALLERY", href: "/gallery" },
|
||||
// { label: "GALLERY", href: "/gallery" },
|
||||
{ label: "ABOUT", href: "/about-us" },
|
||||
{ label: "CONTACT", href: "/contact" },
|
||||
];
|
||||
|
||||
@ -54,7 +54,7 @@ const Gallery = () => {
|
||||
quality={100}
|
||||
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 ">
|
||||
<p className="py-4">
|
||||
<span className="">GALLERY</span>
|
||||
|
||||
@ -10,15 +10,19 @@ const interBold = localFont({
|
||||
src: './Inter-Bold.woff',
|
||||
display: 'swap',
|
||||
})
|
||||
const extraBold = localFont({
|
||||
src: './Inter-ExtraBold.woff',
|
||||
display: 'swap',
|
||||
})
|
||||
|
||||
const Bar = () => {
|
||||
let pic = "cover";
|
||||
return (
|
||||
<main>
|
||||
<div className="grid lg:grid-cols-5 md:grid-cols-2 grid-flow-row gap-8">
|
||||
<div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-flow-row gap-y-6 md:gap-x-6">
|
||||
{Menu.map((menu_item) => {
|
||||
return (
|
||||
<Card key={menu_item.id} className="flex flex-grow flex-col w-[325px] h-[452px]">
|
||||
<Card key={menu_item.id} className="flex-1 flex-col max-w-[325px] h-[452px]">
|
||||
<div className="w-full h-[55%]">
|
||||
<div className="h-full relative w-full">
|
||||
<Image
|
||||
@ -36,7 +40,7 @@ const Bar = () => {
|
||||
<div className="flex flex-col w-full font-sans">
|
||||
{/* title and photo */}
|
||||
<div className="inline-block">
|
||||
<h4 className={`pt-2 float-left ${interBold.className}`}>
|
||||
<h4 className={`pt-2 float-left ${extraBold.className}`}>
|
||||
<strong>{menu_item.name}</strong>
|
||||
</h4>
|
||||
{/* <div className="bg-red-300 float-right relative w-[25px] h-[25px]">
|
||||
@ -52,13 +56,9 @@ const Bar = () => {
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* paragraph text */}
|
||||
{/* description text */}
|
||||
<div className="inline-block text-left">
|
||||
<p className={`max-w-[75ch] ${interBold.className} font-semibold`}>
|
||||
{menu_item.description}
|
||||
</p>
|
||||
{/* 16px line height */}
|
||||
<p className="leading-4 text-[#8F8F8F]">
|
||||
<p className={`max-w-[75ch] ${interBold.className} leading-tight font-light`}>
|
||||
{menu_item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
quality={100}
|
||||
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 ">
|
||||
<p className="py-4">
|
||||
<span className="">Menu</span>
|
||||
@ -26,7 +26,7 @@ const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
<div className="flex flex-row justify-evenly pt-4">
|
||||
<MenuLinks />
|
||||
</div>
|
||||
<div className="flex-grow w-full p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||
<div className="flex-grow w-full h-full p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -74,6 +74,10 @@ module.exports = {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
screens: {
|
||||
"tablet": "860px",
|
||||
"desktop": "1080px",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user