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 (
<html lang="en">
<body className={`${inter.className} bg-[#1D1F1D]`}>{children}</body>
<body className={`${inter.className} bg-slate-700`}>{children}</body>
</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 ClientPortal from "@/components/ClientPortal/ClientPortal";
import styles from "@/styles/Home.module.css";
import { Poppins } from "next/font/google";
const Popp = Poppins({ weight: "400", subsets: ["latin"] });
export default function Home() {
const [isOpen, setIsOpen] = React.useState(false);
@ -18,8 +22,9 @@ export default function Home() {
return (
<main className="flex min-h-screen flex-col px-20 bg-[#F5F5F5">
{/* Title */}
<div className="text-4xl w-full justify-center text-center items-center flex py-12 font-medium text-orange-600">
<span>Kevo&#39;s Attire</span>
<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 className={`${Popp.className}`}>Kevo&#39;s Attire</span>
<div className={`${Popp.className} text-orange-600 text-center`}>All sizes - $25</div>
</div>
{/* Body */}
@ -37,11 +42,11 @@ export default function Home() {
{/* Footer */}
<div className="flex w-full h-[250px] items-center text-gray-400">
<div className="font-bold ">
Email us at
Email us at&nbsp;
<a href="mailto:kevosattire@gmail.com" className="text-emerald-500">
kevosattire@gmail.com
</a>
to order!
&nbsp;to order!
</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 { Card } from "../card";
import Modal from "../../Modal/Modal";
import { Poppins } from "next/font/google";
const interBold = localFont({
src: "./Inter-Bold.woff",
display: "swap",
});
const extraBold = localFont({
src: "./Inter-ExtraBold.woff",
display: "swap",
});
const inter = Inter({ subsets: ["latin"] });
const Popp = Poppins({ weight: "400", subsets: ["latin"] });
// const interBold = localFont({
// src: "./Inter-Bold.woff",
// display: "swap",
// });
// const extraBold = localFont({
// src: "./Inter-ExtraBold.woff",
// display: "swap",
// });
// const inter = Inter({ subsets: ["latin"] });
const MenuCard = ({ Menu }: any) => {
return (
@ -23,9 +26,9 @@ const MenuCard = ({ Menu }: any) => {
return (
<Card
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">
<Image
src={`/${menu_item.photo}`}
@ -44,7 +47,7 @@ const MenuCard = ({ Menu }: any) => {
{/* title and photo */}
<div className="inline-block">
<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>
</h4>
@ -75,7 +78,7 @@ const MenuCard = ({ Menu }: any) => {
{/* description text */}
<div className="inline-block text-left pt-2">
<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}
</p>