ImAlpha/kevos-attire
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates to layout and menu

Browse Source
This commit is contained in:
Jacob Delgado 2024-08-13 18:04:20 -07:00
parent a80bdc0c65
commit c1e317c73d
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/layout.tsx
View File

@ -16,7 +16,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${inter.className} bg-[#1D1F1D]`}>{children}</body> <body className={`${inter.className} bg-slate-700`}>{children}</body>
</html> </html>
); );
} }

13
frontend/src/app/page.tsx
View File

@ -7,6 +7,10 @@ import { Button } from "../components/ui/button";
import Modal from "../components/Modal/Modal"; import Modal from "../components/Modal/Modal";
import ClientPortal from "@/components/ClientPortal/ClientPortal"; import ClientPortal from "@/components/ClientPortal/ClientPortal";
import styles from "@/styles/Home.module.css"; import styles from "@/styles/Home.module.css";
import { Poppins } from "next/font/google";
const Popp = Poppins({ weight: "400", subsets: ["latin"] });
export default function Home() { export default function Home() {
const [isOpen, setIsOpen] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false);
@ -18,8 +22,9 @@ export default function Home() {
return ( return (
<main className="flex min-h-screen flex-col px-20 bg-[#F5F5F5"> <main className="flex min-h-screen flex-col px-20 bg-[#F5F5F5">
{/* Title */} {/* Title */}
<div className="text-4xl w-full justify-center text-center items-center flex py-12 font-medium text-orange-600"> <div className="text-4xl w-full justify-center text-center items-center flex flex-col gap-4 py-12 font-medium text-orange-600">
<span>Kevo&#39;s Attire</span> <span className={`${Popp.className}`}>Kevo&#39;s Attire</span>
<div className={`${Popp.className} text-orange-600 text-center`}>All sizes - $25</div>
</div> </div>
{/* Body */} {/* Body */}
@ -37,11 +42,11 @@ export default function Home() {
{/* Footer */} {/* Footer */}
<div className="flex w-full h-[250px] items-center text-gray-400"> <div className="flex w-full h-[250px] items-center text-gray-400">
<div className="font-bold "> <div className="font-bold ">
Email us at Email us at&nbsp;
<a href="mailto:kevosattire@gmail.com" className="text-emerald-500"> <a href="mailto:kevosattire@gmail.com" className="text-emerald-500">
kevosattire@gmail.com kevosattire@gmail.com
</a> </a>
to order! &nbsp;to order!
</div> </div>
<div></div> <div></div>
</div> </div>

29
frontend/src/components/ui/MenuCard/MenuCard.tsx
View File

@ -5,16 +5,19 @@ import localFont from "next/font/local";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { Card } from "../card"; import { Card } from "../card";
import Modal from "../../Modal/Modal"; import Modal from "../../Modal/Modal";
import { Poppins } from "next/font/google";
const interBold = localFont({ const Popp = Poppins({ weight: "400", subsets: ["latin"] });
src: "./Inter-Bold.woff",
display: "swap", // const interBold = localFont({
}); // src: "./Inter-Bold.woff",
const extraBold = localFont({ // display: "swap",
src: "./Inter-ExtraBold.woff", // });
display: "swap", // const extraBold = localFont({
}); // src: "./Inter-ExtraBold.woff",
const inter = Inter({ subsets: ["latin"] }); // display: "swap",
// });
// const inter = Inter({ subsets: ["latin"] });
const MenuCard = ({ Menu }: any) => { const MenuCard = ({ Menu }: any) => {
return ( return (
@ -23,9 +26,9 @@ const MenuCard = ({ Menu }: any) => {
return ( return (
<Card <Card
key={menu_item.id} key={menu_item.id}
className="flex-1 flex-col max-w-[325px] h-[452px] relative overflow-hidden bg-slate-600 border-slate-600" className="flex-1 flex-col max-w-[325px] h-[400px] relative overflow-hidden bg-white/10 border-none hover:scale-150 transition hover:z-50 backdrop-blur-xl"
> >
<div className="w-full h-[68%]"> <div className="w-full h-[75%]">
<div className="h-full relative w-full"> <div className="h-full relative w-full">
<Image <Image
src={`/${menu_item.photo}`} src={`/${menu_item.photo}`}
@ -44,7 +47,7 @@ const MenuCard = ({ Menu }: any) => {
{/* title and photo */} {/* title and photo */}
<div className="inline-block"> <div className="inline-block">
<h4 <h4
className={`pt-2 float-left ${extraBold.className} flex-wrap w-3/4 text-emerald-500`} className={`pt-2 float-left ${Popp.className} flex-wrap w-3/4 text-emerald-500`}
> >
<strong>{menu_item.name}</strong> <strong>{menu_item.name}</strong>
</h4> </h4>
@ -75,7 +78,7 @@ const MenuCard = ({ Menu }: any) => {
{/* description text */} {/* description text */}
<div className="inline-block text-left pt-2"> <div className="inline-block text-left pt-2">
<p <p
className={`max-w-[75ch] ${inter.className} leading-tight font-[12px] text-blue-400 `} className={`max-w-[75ch] ${Popp.className} leading-tight font-[12px] text-blue-400 `}
> >
{menu_item.description} {menu_item.description}
</p> </p>