diff --git a/.gitignore b/.gitignore index c87c9b3..ed854fa 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,4 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + diff --git a/I_AM_A_FRONTEND_HERO b/I_AM_A_FRONTEND_HERO new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 974fad4..76d8260 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,21 @@ "lint": "next lint" }, "dependencies": { + "axios": "^0.27.2", "next": "12.2.5", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "react-icons": "^4.4.0", + "uuidv4": "^6.2.13" }, "devDependencies": { "@types/node": "^18.7.13", "@types/react": "^18.0.17", + "autoprefixer": "^10.4.8", "eslint": "8.23.0", "eslint-config-next": "12.2.5", + "postcss": "^8.4.16", + "tailwindcss": "^3.1.8", "typescript": "^4.8.2" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..672fab1 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: { config: './tailwind.config.js' }, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/products.json b/products.json new file mode 100644 index 0000000..d9f43b1 --- /dev/null +++ b/products.json @@ -0,0 +1,142 @@ + [ + { + "id":"1", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "2", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "3", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"4", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "5", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "6", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"7", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "8", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "9", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"10", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "11", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "12", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id":"13", + "name": "Umami Gin", + "brand": "Audemus", + "price": "28", + "image": "/images/products/audemusGin.svg" + }, + { + "id": "14", + "name": "Pool Gin", + "brand": "Silent Pool", + "price": 32, + "image": "/images/products/poolGin.svg" + }, + { + "id": "15", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "16", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "17", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "18", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "19", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + }, + { + "id": "20", + "name": "Pink Gin", + "brand": "Stolckholms", + "price": 35, + "image": "/images/products/stockholmsGin.svg" + } +] \ No newline at end of file diff --git a/src/public/favicon.ico b/public/favicon.ico similarity index 100% rename from src/public/favicon.ico rename to public/favicon.ico diff --git a/public/images/aside/baldoriaLogo.svg b/public/images/aside/baldoriaLogo.svg new file mode 100644 index 0000000..d430810 --- /dev/null +++ b/public/images/aside/baldoriaLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/aside/baldoriaVermouth.svg b/public/images/aside/baldoriaVermouth.svg new file mode 100644 index 0000000..f19cab1 --- /dev/null +++ b/public/images/aside/baldoriaVermouth.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/aside/boxIcon.svg b/public/images/aside/boxIcon.svg new file mode 100644 index 0000000..4a4cd95 --- /dev/null +++ b/public/images/aside/boxIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/aside/locationPin.svg b/public/images/aside/locationPin.svg new file mode 100644 index 0000000..67d0206 --- /dev/null +++ b/public/images/aside/locationPin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/footer/facebookIcon.svg b/public/images/footer/facebookIcon.svg new file mode 100644 index 0000000..ad1680d --- /dev/null +++ b/public/images/footer/facebookIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/footer/instagramIcon.svg b/public/images/footer/instagramIcon.svg new file mode 100644 index 0000000..30d7146 --- /dev/null +++ b/public/images/footer/instagramIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/footer/linkedinIcon.svg b/public/images/footer/linkedinIcon.svg new file mode 100644 index 0000000..3a0ad82 --- /dev/null +++ b/public/images/footer/linkedinIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/footer/logoWhite.svg b/public/images/footer/logoWhite.svg new file mode 100644 index 0000000..498c652 --- /dev/null +++ b/public/images/footer/logoWhite.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/footer/mediumIcon.svg b/public/images/footer/mediumIcon.svg new file mode 100644 index 0000000..8f67ba1 --- /dev/null +++ b/public/images/footer/mediumIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/header/cartIcon.svg b/public/images/header/cartIcon.svg new file mode 100644 index 0000000..2aa3459 --- /dev/null +++ b/public/images/header/cartIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/header/userIcon.svg b/public/images/header/userIcon.svg new file mode 100644 index 0000000..da06ce1 --- /dev/null +++ b/public/images/header/userIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/logoBlack.svg b/public/images/logoBlack.svg new file mode 100644 index 0000000..78ce5aa --- /dev/null +++ b/public/images/logoBlack.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/logoWhite.svg b/public/images/logoWhite.svg new file mode 100644 index 0000000..324d74c --- /dev/null +++ b/public/images/logoWhite.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/products/audemusGin.svg b/public/images/products/audemusGin.svg new file mode 100644 index 0000000..3455791 --- /dev/null +++ b/public/images/products/audemusGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/gastonBrandy.svg b/public/images/products/gastonBrandy.svg new file mode 100644 index 0000000..7467d54 --- /dev/null +++ b/public/images/products/gastonBrandy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/plusIcon.svg b/public/images/products/plusIcon.svg new file mode 100644 index 0000000..0d564e0 --- /dev/null +++ b/public/images/products/plusIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/products/poolGin.svg b/public/images/products/poolGin.svg new file mode 100644 index 0000000..bd4786e --- /dev/null +++ b/public/images/products/poolGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/products/stockholmsGin.svg b/public/images/products/stockholmsGin.svg new file mode 100644 index 0000000..0986c8e --- /dev/null +++ b/public/images/products/stockholmsGin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/public/vercel.svg b/public/vercel.svg similarity index 100% rename from src/public/vercel.svg rename to public/vercel.svg diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..b2ce033 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,41 @@ +import React, { ReactNode, useState } from "react"; +import FooterComponent from "./footer"; +import HeaderComponent from "./header"; +import { MenuComponent } from "./header/menu"; +import { ModalMenuComponent } from "./modal/modalMenu"; + +interface Props { + children: ReactNode; +} + +export function LayoutComponent({ children }: Props) { + const [modalIsOpen, setModalIsOpen] = useState(false); + + function handleCloseModal() { + setModalIsOpen(() => false); + } + + function handleOpenModal() { + setModalIsOpen(() => true); + } + + return ( +
+ handleOpenModal()} /> +
+ {children} +
+ + {modalIsOpen ? ( + handleCloseModal()}> + + + ) : null} +
+ ); +} diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx new file mode 100644 index 0000000..20a13de --- /dev/null +++ b/src/components/footer/index.tsx @@ -0,0 +1,128 @@ +import { ButtonComponent } from "@components/util/Button"; +import Image from "next/image"; +import React from "react"; +import ListAnchorComponent from "./listAnchor"; + +export default function FooterComponent() { + return ( + + ); +} diff --git a/src/components/footer/listAnchor.tsx b/src/components/footer/listAnchor.tsx new file mode 100644 index 0000000..4151eb3 --- /dev/null +++ b/src/components/footer/listAnchor.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { v4 as uuidv4 } from "uuid"; + +interface AnchorPropsList { + title: string; + listAnchor: string[]; +} + +export default function ListAnchorComponent({ + title, + listAnchor, +}: AnchorPropsList) { + return ( +
+

+ {title.toUpperCase()} +

+ +
+ ); +} diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 0000000..e566a2a --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; +import React, { useState } from "react"; +import { GiHamburgerMenu } from "react-icons/gi"; +import { ModalMenuComponent } from "../modal/modalMenu"; +import { MenuComponent } from "./menu"; + +interface HeaderProps { + handleOpenModal: () => void; +} + +export default function HeaderComponent({ handleOpenModal }: HeaderProps) { + return ( +
+
+ cart icon +
+
+ +
+
+ handleOpenModal()} /> +
+
+ ); +} diff --git a/src/components/header/menu.tsx b/src/components/header/menu.tsx new file mode 100644 index 0000000..f9018bc --- /dev/null +++ b/src/components/header/menu.tsx @@ -0,0 +1,54 @@ +import { AnchorComponent } from "@components/util/Anchor"; +import Image from "next/image"; +import React from "react"; + +export function MenuComponent() { + return ( + + ); +} diff --git a/src/components/modal/modalMenu.tsx b/src/components/modal/modalMenu.tsx new file mode 100644 index 0000000..b806a27 --- /dev/null +++ b/src/components/modal/modalMenu.tsx @@ -0,0 +1,40 @@ +import { ReactNode, useState } from "react"; + +interface PropsNewModal { + onClose: () => void; + children: ReactNode; +} + +export function ModalMenuComponent({ onClose, children }: PropsNewModal) { + const [animation, setAnimation] = useState(false); + + const handleOutsideClick = (e: any) => { + setAnimation(true); + if (e.target.id === "external") { + setTimeout(onClose, 200); + } + }; + + return ( + <> +