diff --git a/next.config.mjs b/next.config.mjs
index 4678774e..fc800c79 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,12 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+ images: {
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "images.pexels.com",
+ },
+ ],
+ },
+};
export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index c7877c3e..e4789f55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,7 @@
"eslint": "^8",
"eslint-config-next": "14.2.2",
"postcss": "^8",
- "tailwindcss": "^3.4.1",
- "typescript": "^5"
+ "tailwindcss": "^3.4.1"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@@ -4555,6 +4554,7 @@
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
"integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
"dev": true,
+ "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index ed7551a4..4ae16fc1 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,17 @@
"lint": "next lint"
},
"dependencies": {
+ "next": "14.2.2",
"react": "^18",
- "react-dom": "^18",
- "next": "14.2.2"
+ "react-dom": "^18"
},
"devDependencies": {
- "typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
- "postcss": "^8",
- "tailwindcss": "^3.4.1",
"eslint": "^8",
- "eslint-config-next": "14.2.2"
+ "eslint-config-next": "14.2.2",
+ "postcss": "^8",
+ "tailwindcss": "^3.4.1"
}
}
diff --git a/public/logo.jpg b/public/logo.jpg
new file mode 100644
index 00000000..49dbb0f6
Binary files /dev/null and b/public/logo.jpg differ
diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index b80850d5..00000000
Binary files a/public/logo.png and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
index bd6213e1..dbf0142c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+body {
+ background: #fbfbfb;
+}
diff --git a/src/app/layout.js b/src/app/layout.js
new file mode 100644
index 00000000..83870c43
--- /dev/null
+++ b/src/app/layout.js
@@ -0,0 +1,23 @@
+import { Cinzel } from "next/font/google";
+import "./globals.css";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+
+const cinzel = Cinzel({ weight: "500", subsets: ["latin"] });
+
+export const metadata = {
+ title: "Paddy E-Commerce ",
+ description: "A complete e-commerce application with Next.js and Wix",
+};
+
+export default function RootLayout({ children }) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
deleted file mode 100644
index 83d5f9e5..00000000
--- a/src/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
- title: "Lama Dev E-Commerce Application",
- description: "A complete e-commerce application with Next.js and Wix",
-};
-
-export default function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return (
-
- {children}
-
- );
-}
diff --git a/src/app/list/[productSlug]/page.js b/src/app/list/[productSlug]/page.js
new file mode 100644
index 00000000..5c3290a1
--- /dev/null
+++ b/src/app/list/[productSlug]/page.js
@@ -0,0 +1,5 @@
+const ProductPage = () => {
+ return Product Page
;
+};
+
+export default ProductPage;
diff --git a/src/app/list/page.js b/src/app/list/page.js
new file mode 100644
index 00000000..cc1a34d6
--- /dev/null
+++ b/src/app/list/page.js
@@ -0,0 +1,5 @@
+const ListPage = () => {
+ return List Page
;
+};
+
+export default ListPage;
diff --git a/src/app/login/page.js b/src/app/login/page.js
new file mode 100644
index 00000000..2de559bd
--- /dev/null
+++ b/src/app/login/page.js
@@ -0,0 +1,5 @@
+const LoginPage = () => {
+ return Login Page
;
+};
+
+export default LoginPage;
diff --git a/src/app/page.tsx b/src/app/page.js
similarity index 100%
rename from src/app/page.tsx
rename to src/app/page.js
diff --git a/src/components/CartModal.js b/src/components/CartModal.js
new file mode 100644
index 00000000..79902488
--- /dev/null
+++ b/src/components/CartModal.js
@@ -0,0 +1,67 @@
+"use client";
+
+import Image from "next/image";
+
+const CartModal = () => {
+ const cartItems = true;
+ return (
+
+ {!cartItems ? (
+
Cart is Empty
+ ) : (
+ <>
+
Shopping Cart
+ {/* Cart Items Wrapper */}
+
+ {/* Cart Item */}
+
+
+
+ {/* Top */}
+
+ {/* Title */}
+
+ {/* Description */}
+
Available
+
+ {/* Bottom*/}
+
+ Qty. 2
+ Remove
+
+
+
+
+
+ Subtotal
+ $49
+
+
+ mur-equipement-materiel-loisir
+
+
+
+
+
+
+
+ >
+ )}
+
+ );
+};
+
+export default CartModal;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 00000000..d62b37e3
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,5 @@
+const Footer = () => {
+ return Footer
;
+};
+
+export default Footer;
diff --git a/src/components/Menu.js b/src/components/Menu.js
new file mode 100644
index 00000000..14dac3be
--- /dev/null
+++ b/src/components/Menu.js
@@ -0,0 +1,34 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+const Menu = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
setOpen((prev) => !prev)}
+ />
+ {open && (
+
+ Home
+ Shop
+ Deals
+ About
+ Contact
+ Logout
+
+ )}
+
+ );
+};
+
+export default Menu;
diff --git a/src/components/NavIcons.js b/src/components/NavIcons.js
new file mode 100644
index 00000000..c9c9008c
--- /dev/null
+++ b/src/components/NavIcons.js
@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import CartModal from "./CartModal";
+
+const NaveIcons = () => {
+ // State to open and close profile and cart modal
+ const [isProfileOpen, setIsProfileOpen] = useState(false);
+ const [isCartOpen, setIsCartOpen] = useState(false);
+
+ const router = useRouter();
+
+ const isLoggedIn = false;
+
+ // function that handle if the user is loggedin or not
+ const handleProfile = () => {
+ if (!isLoggedIn) {
+ router.push("/login");
+ }
+
+ setIsProfileOpen((prev) => !prev);
+ };
+
+ // function that handle the cart modal
+ const cartHandler = () => {
+ setIsCartOpen((prev) => !prev);
+ };
+
+ return (
+
+
+ {isProfileOpen && (
+
+ )}
+
+
+
+
+ 2
+
+
+ {isCartOpen &&
}
+
+ );
+};
+
+export default NaveIcons;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 00000000..265de76f
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import Image from "next/image";
+import Menu from "./Menu";
+import SearchBar from "./SearchBar";
+import NaveIcons from "./NavIcons";
+
+const Navbar = () => {
+ return (
+
+ {/* Mobile */}
+
+ {/* Bigger screens */}
+
+ {/* Left side */}
+
+
+
+
Paddy
+
+
+ Home
+ Shop
+ Deals
+ About
+ Contact
+
+
+ {/* Right side */}
+
+
+
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 00000000..b67afa96
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,45 @@
+"use client";
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+const SearchBar = () => {
+ // hook from next js that handle the user redirect
+ const router = useRouter();
+
+ // Function that handle user redirect to the searching product
+ const searchSubmitHandler = () => {
+ e.preventDefault();
+
+ const formData = new FormData(e.currentTarget);
+ const product = formData.get("name");
+
+ if (product) {
+ router.push(`/list?product=${product}`);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default SearchBar;
diff --git a/tailwind.config.ts b/tailwind.config.js
similarity index 82%
rename from tailwind.config.ts
rename to tailwind.config.js
index e9a0944e..8e0a1da0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.js
@@ -1,6 +1,4 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
+const config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -13,6 +11,9 @@ const config: Config = {
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
+ boxShadow: {
+ custom: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
+ },
},
},
plugins: [],
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 7b285893..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
- "paths": {
- "@/*": ["./src/*"]
- }
- },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
-}