-
+ {/*
*/}
+ {/*
Kevo's Attire
-
+
*/}
diff --git a/frontend/src/components/CartModal/CartModal.tsx b/frontend/src/components/CartModal/CartModal.tsx
new file mode 100644
index 0000000..5b43a2a
--- /dev/null
+++ b/frontend/src/components/CartModal/CartModal.tsx
@@ -0,0 +1,38 @@
+"use client";
+import Image from "next/image";
+
+const CartModal = () => {
+ const cartItems = true;
+
+ return (
+
+
+ );
+};
diff --git a/frontend/src/components/CartTab/cartTab.tsx b/frontend/src/components/CartTab/cartTab.tsx
new file mode 100644
index 0000000..a443261
--- /dev/null
+++ b/frontend/src/components/CartTab/cartTab.tsx
@@ -0,0 +1,11 @@
+"use client";
+import React from 'react'
+
+const CartTab = () => {
+ const cartItems = false;
+ return (
+
+ {!cartItems ?
+ Cart is Empty
:
+
+
}
+
+ {/* TOP */}
+
+
+ {/* TITLE */}
+
+ {/* BOTTOM */}
+
+
+ {/* DESCRIPTION */}
+ Product Name
+$49
+
+ available
+
+ {!cartItems ? (
+ )
+}
+
+export default CartTab
\ No newline at end of file
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..880ca2e
--- /dev/null
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { FaFacebookF } from "react-icons/fa";
+import { FaInstagram } from "react-icons/fa";
+import { FaTiktok } from "react-icons/fa";
+
+const Footer = () => {
+
+ return (
+ Cart is Empty
) : ()}
+
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
new file mode 100644
index 0000000..7d994fb
--- /dev/null
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,140 @@
+"use client";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { useMediaQuery } from "@/util/useMediaQuery";
+import { FiShoppingCart } from "react-icons/fi";
+import Image from "next/image";
+
+const navMotion = {
+ visible: {
+ opacity: 1,
+ transition: {
+ when: "beforeChildren",
+ staggerChildren: 0.15,
+ },
+ },
+ hidden: {
+ opacity: 0,
+ },
+};
+
+const itemMotion = {
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: -100 },
+};
+
+export default function Nav() {
+ const [toggled, setToggled] = useState(false);
+ const matches = useMediaQuery("(min-width: 1280px)");
+ // console.log(matches);
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/ProductCart/ProductCart.tsx b/frontend/src/components/ProductCart/ProductCart.tsx
new file mode 100644
index 0000000..c891591
--- /dev/null
+++ b/frontend/src/components/ProductCart/ProductCart.tsx
@@ -0,0 +1,11 @@
+import Link from 'next/link';
+import React from 'react'
+
+const ProductCart = (props: any) => {
+ const {id, name, price, image, size} = props.data;
+ return (
+
+ )
+}
+
+export default ProductCart
\ No newline at end of file
diff --git a/frontend/src/components/ui/MenuCard/MenuCard.tsx b/frontend/src/components/ui/MenuCard/MenuCard.tsx
index 74512c9..e811d04 100644
--- a/frontend/src/components/ui/MenuCard/MenuCard.tsx
+++ b/frontend/src/components/ui/MenuCard/MenuCard.tsx
@@ -26,7 +26,7 @@ const MenuCard = ({ Menu }: any) => {
return (
+
+
+
+ Categories
+ Women + Men + Shoes + Accessories + New Arrivals +
+
+
+
+ Links
+ FAQ + Pages + Stores + Compare + Cookies +
+
+ © 2024 - Kevos Attire LLC. All rights reserved. All items are made with the assumption that they are 100% original ideas as we do not
+
diff --git a/frontend/src/util/useMediaQuery.tsx b/frontend/src/util/useMediaQuery.tsx
new file mode 100644
index 0000000..5f22199
--- /dev/null
+++ b/frontend/src/util/useMediaQuery.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from 'usehooks-ts'
+
+type UseMediaQueryOptions = {
+ defaultValue?: boolean
+ initializeWithValue?: boolean
+}
+
+const IS_SERVER = typeof window === 'undefined'
+
+export function useMediaQuery(
+ query: string,
+ {
+ defaultValue = false,
+ initializeWithValue = true,
+ }: UseMediaQueryOptions = {},
+): boolean {
+ const getMatches = (query: string): boolean => {
+ if (IS_SERVER) {
+ return defaultValue
+ }
+ return window.matchMedia(query).matches
+ }
+
+ const [matches, setMatches] = useState(() => {
+ if (initializeWithValue) {
+ return getMatches(query)
+ }
+ return defaultValue
+ })
+
+ // Handles the change event of the media query.
+ function handleChange() {
+ setMatches(getMatches(query))
+ }
+
+ useIsomorphicLayoutEffect(() => {
+ const matchMedia = window.matchMedia(query)
+
+ // Triggered at the first client-side load and if query changes
+ handleChange()
+
+ // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+ if (matchMedia.addListener) {
+ matchMedia.addListener(handleChange)
+ } else {
+ matchMedia.addEventListener('change', handleChange)
+ }
+
+ return () => {
+ if (matchMedia.removeListener) {
+ matchMedia.removeListener(handleChange)
+ } else {
+ matchMedia.removeEventListener('change', handleChange)
+ }
+ }
+ }, [query])
+
+ return matches
+}
\ No newline at end of file