Fg/make footer

quack/.tool-versions

@@ -0,0 +1 @@
+nodejs 20.9.0

quack/app/about/page.tsx

@@ -17,14 +17,14 @@ import patosemfundo from "@/Images/QuackLogo-removebg-preview.png"
 const About = () => {
   return (
     <div className='flex flex-col'>
-      <div className='min-h-screen relative' >
-    <div className=''>
+      <div className='max-h-screen relative' >
+    <div className='mb-10'>
       <Image src={fundopatos} alt="background image" className='w-full h-full object-cover' layout="fill" />
     </div>
-    <div className='bg-stone-100 shadow-[0px_5px_48px_rgba(0,0,0,0.20)] w-3/12 h-6/6 ml-14 mt-10 pl-2  inseert-0 z-10 relative'>
+    <div className='bg-stone-100 mb-10 shadow-[0px_5px_48px_rgba(0,0,0,0.20)] w-3/12 h-6/6 ml-14 mt-10 pl-2 pb-2  inseert-0 z-10 relative'>
       <Image src={patosemfundo} alt="Quack Logo" width={105} height={100} className='mb-2 ml-2 pt-2 pb-0.5'></Image>
       <p className='text-3xl font-bold'>A tua empresa patastica!</p>
-      <p className='mt-3'>Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack Quack</p>
+      <p className='mt-3'>Quack Quack Quack! Dê uma grande esperança que os patos de borracha resolvam todos os problemas do nosso código nasceu este site. Com uma grande variedade de patos de todos os tipos, feitios e cores, temos a resposta que tu procuras para o teu próprio problema. Com amor, Quack ❤ </p>
       <button className='bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded mt-4 flex-auto'>Contact us!</button>
     </div>
     </div>
@@ -33,7 +33,7 @@ const About = () => {
 
 
 
-      <div className="bg-yellow-100 flex flex-center justify-self-end bottom-0 justify-around place-content-baseline items-center pt-10 pb-5">
+      <div className="bg-amber-100 flex flex-center justify-self-end bottom-0 justify-around place-content-baseline items-center pt-10 pb-5">
         <div className='md:flex justify-between itens-center gap-20'>
 
           <div className='justify-center'>

quack/app/components/Footer.tsx

@@ -1,31 +1,75 @@
-import useCart from "../hooks/useCart"
+import React from 'react'
 
-type PropsType = {
-  viewCart: boolean,
+import {FaFacebookF, FaInstagram, FaTwitterSquare} from "react-icons/fa";
+import {FaFacebook} from "react-icons/fa";
+import {FaTwitter} from "react-icons/fa";
+import {FaLinkedin} from "react-icons/fa";
+
+
+
+
+
+const Footer = () => {
+  return (
+    <footer className=' max-w-7xl justify-between flex-col max-h-screen mt-auto '>
+			<div className=' bg-amber-100 flex flex-row'>
+      <div className='flex-1 flex flex-end justify-between '>
+      <div className=' '>
+        <ul className='p-4'>
+          <p className='text-gray-800 font-bold text-2xl pb-4'>Sobre Nós </p>
+          <p className='text-gray-600 text-base font-semibold hover:text-gray-900'>A tua empresa patástica e quack quack quack</p>
+        </ul>
+      </div>
+      <div className="">
+					<ul className='p-4'>
+						<p className="text-gray-800 font-bold text-2xl pb-4">Coleções</p>
+						<li className="text-gray-600 text-md pb-2 font-semibold hover:text-gray-900 cursor-pointer">
+							Nova coleçao
+						</li>
+						<li className="text-gray-600 text-md pb-2 font-semibold  hover:text-gray-900 cursor-pointer">
+            Nova coleçao
+						</li>
+
+					</ul>
+				</div>
+        <div className="">
+					<ul className='p-4'>
+						<p className="text-gray-800 font-bold text-2xl pb-4">Contactos</p>
+						<li className="text-gray-600 text-md pb-2 font-semibold hover:text-gray-900 cursor-pointer">
+							Email : quack@quack.pt
+						</li>
+						<li className="text-gray-600 text-md pb-2 font-semibold  hover:text-gray-900 cursor-pointer">
+            +351 123456789
+						</li>
+					</ul>
+				</div>
+				<div className="">
+					<ul className='p-4'>
+						<p className="text-gray-800 font-bold text-2xl pb-4">Redes Sociais</p>
+						<ul className='flex flex-wrap gap-x-4'>
+							<FaInstagram className='text-xl cursor-pointer hover:text-yellow-400'/>
+							<FaFacebookF className='text-xl cursor-pointer hover:text-yellow-400'/>
+							<FaLinkedin className='text-xl cursor-pointer hover:text-yellow-400'/>
+							<FaTwitterSquare className='text-xl cursor-pointer hover:text-yellow-400'/>
+
+
+						</ul>
+					</ul>
+				</div>
+				</div>
+        </div>
+
+        <div className="flex flex-row justify-center items-center text-center w-full p-3 bg-gray-50 align-content:flex-end">
+				<h1 className=" text-gray-800 font-semibold">
+					© 2023-2024 All rights reserved | Build with ❤ by{" "}
+					<span className="hover:text-blue-600 font-semibold cursor-pointer">
+						  Quack{" "}
+					</span>
+				</h1>
+			</div>
+
+    </footer>
+  )
 }
 
-const Footer = ({viewCart}: PropsType) => {
-    const {totalItems, totalPrice} = useCart()
-
-    const year: number = new Date().getFullYear()
-
-    const pageContent = viewCart
-        ? <p>Shopping Cart &copy; {year}</p>
-        : (
-            <>
-                <p>Total Items: {totalItems}</p>
-                <p>Total Price: {totalPrice}</p>
-                <p>Shopping Cart &copy; {year}</p>
-            </>
-        )
-
-    const content = (
-      <footer className="footer">
-        {pageContent}
-      </footer>
-    )
-
-    return content
-  }
-
-  export default Footer
+export default Footer

quack/app/components/ListaProdutos.tsx

@@ -55,22 +55,23 @@ import PatoTubarao from "@/Images/PatoTubarao.png"
 import PatoVaca from "@/Images/PatoVaca.png"
 import PatoVerde from "@/Images/PatoVerde.png"
 import PatoVermelho from "@/Images/PatoVermelho.png"
-
+import pAndreia from "@/Images/PatoAndreia.jpeg"
+import pFilipa from "@/Images/PatoFilipa.jpeg"
+import pDionisio from "@/Images/PatoDionisio.jpeg"
+import pAfonso from "@/Images/patoCarpinteiro.jpeg"
 
 const carrinhoL = [
-    { nome: "Pato Batman", preco: "15€", imagem: PatoBatman },
-    { nome: "Pato Batman Cinza", preco: "15€", imagem: PatoBatmanCinza },
-    { nome: "Pato Homem de Ferro", preco: "15€", imagem: PatoHomemFerro },
+    { nome: "Pato Batman", preco: "13€", imagem: PatoBatman },
     { nome: "Pato Hulk", preco: "15€", imagem: PatoHulk },
     { nome: "Pato SpiderMan", preco: "15€", imagem: PatoSpiderMan },
     { nome: "Pato SuperHomem", preco: "15€", imagem: PatoSuperHomem },
    ]
 
 const tendencias = [
-   { nome: "Pato Homem de Ferro", preco: "15€", imagem: PatoHomemFerro },
-   { nome: "Pato Vaca", preco: "15€", imagem: PatoVaca },
-   { nome: "Pato Júlio", preco: "15€", imagem: PatoFotografo },
-   { nome: "Pato Hulk", preco: "15€", imagem: PatoHulk },
+   { nome: "Pato Dionisio", preco: "15€", imagem: pDionisio },
+   { nome: "Pato Andreia", preco: "15€", imagem: pAndreia },
+   { nome: "Pato Carpinteiro", preco: "15€", imagem: pAfonso },
+   { nome: "Pato Filipa", preco: "15€", imagem: pFilipa },
   ];
 
  const classicos = [

quack/app/components/Navbar.tsx

@@ -26,7 +26,7 @@ const Navbar = () => {
       <Image src={logo} alt ="Quack Logo" width={105} height={100} className='mb-2 ml-4 pb-0.5'></Image>
       </div>
       <div className=' hidden md:flex justify-between  pr-3 itens-center pt-4 w-1/4 gap-3'>
-        <Link className="text-lg hover:text-gray-600 shrink" href="/">Home</Link>
+        <Link className="text-lg hover:text-gray-600 shrink" href="/">Shop</Link>
         <Link className="text-lg  hover:text-gray-600 shrink" href="/about">About</Link>
         <Link className='pr-4 text-lg  hover:text-gray-600 shrink' href="/carrinho"> Carrinho</Link>
       </div>

quack/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}> <Navbar/> {children} </body>
+      <body className={inter.className}> <Navbar/> {children} <Footer/> </body>
 
     </html>
   );

quack/app/page.tsx

@@ -8,17 +8,17 @@ import { carrinhoL, tendencias, classicos, animais, profissoes, herois} from '@/
 
  export default function Home() {
   return (
-      <main>
+      <main className="overflow-x-hidden">
         <div className="bg-gradient-to-r from-yellow-500 to-yellow-200 flex flex-row gap-x-60">
           <Image className="transform size-100" src={patoLGBT} alt="imagem"></Image>
-          <h1 className="text-black text-opacity-100 text-5xl mt-52 font-serif font-thin underline decoration-black decoration-1 underline-offset-8">Resolvemos todos os teus code-problems Quack</h1>
+          <h1 className="text-black text-opacity-100 text-5xl font-serif font-thin underline decoration-black decoration-1 underline-offset-8 flex items-center">Resolvemos todos os teus code-problems!</h1>
         </div>
         <div>
          <h1 className="mt-20 text-left ml-10 text-5xl font-serif font-thin margin"> Tendências: </h1>
          <div className="mt-10 mb-10 grid grid-cols-4 gap-4 justify-center">
            {tendencias.map((produto) => (
              <div key={produto.nome} className="hover:underline hover:font-semibold">
-               <Image className="hover:shadow-2xl ml-16" src={produto.imagem} alt={produto.nome} />
+               <Image className="hover:shadow-2xl" src={produto.imagem} alt={produto.nome} />
                <h1 className="text-center font-mono text-xl">{produto.nome}</h1>
                <h1 className="text-center font-mono text-xl">{produto.preco}</h1>
              </div>

quack/package.json

@@ -15,14 +15,16 @@
     "react-icons": "^5.1.0"
   },
   "devDependencies": {
-    "@types/node": "20.11.20",
-    "@types/react": "18.2.58",
+    "@types/node": "^20",
+    "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "typescript": "5.3.3"
+
+    "typescript": "^5"
+
   }
 }