Inital files

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/components/globals/Navbar.tsx

@@ -0,0 +1,11 @@
+import NavbarDesktop from "./NavbarDesktop";
+import NavbarMobile from "./NavbarMobile";
+
+export default function Navbar() {
+  return (
+    <>
+      <NavbarDesktop />
+      <NavbarMobile />
+    </>
+  );
+}

app/components/globals/NavbarDesktop.tsx

@@ -0,0 +1,62 @@
+import { Overlock } from "next/font/google";
+import Link from "next/link";
+import Image from "next/image";
+
+const overlock = Overlock({
+  subsets: ["latin"],
+  weight: ["400", "700", "900"],
+});
+
+export default function NavbarDesktop() {
+  return (
+    <nav className="hidden md:flex items-center justify-between container mx-auto pt-4 pb-8">
+      <div className={`${overlock.className} uppercase flex items-center mt-2`}>
+        <Image
+          src="/images/globals/logo.svg"
+          alt="mercado top"
+          width={25}
+          height={50}
+          objectFit="cover"
+        />
+        <span className=" font-black text-lg">MercadoTop</span>
+      </div>
+      <div className="flex items-center gap-5 mt-2">
+        <ul className="flex items-center gap-6">
+          <Link href="/products" className="">
+            <li
+              className="hover:border-4
+          hover:border-x-0 hover:border-t-0 hover:border-b-green-700"
+            >
+              Products
+            </li>
+          </Link>
+          <Link href="">
+            <li
+              className="hover:border-4
+          hover:border-x-0 hover:border-t-0 hover:border-b-green-700"
+            >
+              How it works
+            </li>
+          </Link>
+          <Link href="">
+            <li
+              className="hover:border-4
+          hover:border-x-0 hover:border-t-0 hover:border-b-green-700"
+            >
+              About Us
+            </li>
+          </Link>
+        </ul>
+        <div className="">
+          <Link
+            href="/signup"
+            className=" bg-green-700 hover:bg-green-600 px-8 py-3 text-lg
+          rounded-lg text-white"
+          >
+            Sign up
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}

app/components/globals/NavbarMobile.tsx

@@ -0,0 +1,59 @@
+"use client";
+import Image from "next/image";
+import { useState } from "react";
+import { Overlock } from "next/font/google";
+const overlock = Overlock({
+  subsets: ["latin"],
+  weight: ["400", "700", "900"],
+});
+
+export default function NavbarMobile() {
+  const [isNavOpen, setIsNavOpen] = useState(false);
+  const handleClick = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+  return (
+    <nav className="relative md:hidden flex items-center justify-between container mx-auto py-4 px-2">
+      <div className={`${overlock.className} uppercase flex items-center`}>
+        <Image
+          src="/images/globals/logo.svg"
+          alt="mercado top"
+          width={25}
+          height={50}
+          objectFit="cover"
+        />
+        <span className=" font-black text-lg">MercadoTop</span>
+      </div>
+      <button onClick={handleClick}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
+          />
+        </svg>
+      </button>
+      <div
+        className={`${
+          isNavOpen ? "block z-40 bg-white" : "hidden"
+        } absolute top-12 w-[96.5%] py-8 shadow-lg rounded-lg`}
+      >
+        <ul className="flex flex-col items-center gap-8">
+          <li>Products</li>
+          <li>How it works</li>
+          <li>About Us</li>
+        </ul>
+        <div className="flex justify-center py-6">
+          <button>Sign in</button>
+        </div>
+      </div>
+    </nav>
+  );
+}

app/components/home/Hero.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+
+export default function Hero() {
+  return (
+    <section
+      className="container mx-auto py-14
+    justify-between gap-4 px-2"
+    >
+      <div className=" relative z-10 justify-center gap-3">
+        <h1 className="text-center text-green-700 text-6xl lg:text-6xl font-bold pb-3">
+          Do not throw it, sell it!
+        </h1>
+        <div className="w-full pb-6">
+          <p className=" text-[16px] mx-auto text-[#666] max-w-[750px]">
+            We empower individuals to transform their unused items into
+            opportunities, fostering a community that values mindful
+            consumption. At Mercado Top, every transaction is a step towards a
+            more sustainable future. Together, we can make a difference for our
+            planet, one item at a time.
+          </p>
+        </div>
+        <div className="flex items-center">
+          <button
+            className="mx-auto bg-green-700 hover:bg-green-600 text-white font-semibold py-4
+        px-8 rounded-lg"
+          >
+            Go to market
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center justify-end pt-14">
+        <Image
+          src="/images/home/hero-img.webp"
+          width={1000}
+          height={300}
+          objectFit="cover"
+          className="mx-auto"
+          alt="woman in her home with a laptop"
+        />
+      </div>
+    </section>
+  );
+}

app/components/home/WhatWeDo.tsx

@@ -0,0 +1,70 @@
+import Link from "next/link";
+export default function WhatWeDo() {
+  return (
+    <section className="py-14 px-2 container mx-auto grid gap-14">
+      <div className="grid md:grid-cols-3 gap-4">
+        <div className="grid gap-2 bg-[#F0EDE8] p-4">
+          <div className="">
+            <h4 className="text-2xl font-semibold pb-1">
+              Protecting the Planet
+            </h4>
+          </div>
+          <div className="">
+            <p className="flex-grow pb-3">
+              At Mercado Top, we believe in giving items a second life. By
+              selling your unused items, you’re not just decluttering your
+              space, but also reducing waste and contributing to a greener
+              planet. Every item sold is one less item in a landfill. Together,
+              we can make a difference.
+            </p>
+          </div>
+          <div className="mt-auto flex justify-end">
+            <Link href="" className="">
+              Learn more &gt;
+            </Link>
+          </div>
+        </div>
+        <div className="grid gap-2 bg-[#F0EDE8] p-4">
+          <div className="">
+            <h4 className=" text-2xl font-semibold pb-1">
+              Empowering Communities
+            </h4>
+          </div>
+          <div className="">
+            <p className=" pb-3">
+              We’re more than just a marketplace. We’re a community that values
+              sustainability and empowerment. By selling on Mercado Top, you’re
+              turning your unused items into opportunities and helping to create
+              a circular economy where everyone benefits.
+            </p>
+          </div>
+          <div className="flex justify-end">
+            <Link href="" className="">
+              Learn more &gt;
+            </Link>
+          </div>
+        </div>
+        <div className="grid gap-2 bg-[#F0EDE8] p-4">
+          <div className="">
+            <h4 className=" text-2xl font-semibold pb-1">
+              Help You Make Money
+            </h4>
+          </div>
+          <div className="">
+            <p className=" pb-3">
+              Don’t let your unused items gather dust. Turn them into cash on
+              Mercado Top! It’s easy to list your items and start making money.
+              Plus, you’ll be doing your part to promote sustainable
+              consumption. It’s a win-win!
+            </p>
+          </div>
+          <div className="flex justify-end">
+            <Link href="" className="">
+              Learn more &gt;
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/globals.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Raleway } from "next/font/google";
+import "./globals.css";
+import Navbar from "./components/globals/Navbar";
+import Head from "next/head";
+
+const oswald = Raleway({
+  subsets: ["latin"],
+  weight: ["300", "400", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "Mercado Top",
+  description: "Don't throw it, sell it!",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <Head>
+        <link rel="icon" href="/favicon.ico"></link>
+      </Head>
+      <body className={`${oswald.className}`}>
+        <Navbar />
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,11 @@
+import Hero from "./components/home/Hero";
+import WhatWeDo from "./components/home/WhatWeDo";
+
+export default function Home() {
+  return (
+    <main className="">
+      <Hero />
+      <WhatWeDo />
+    </main>
+  );
+}

app/products/page.tsx

@@ -0,0 +1,3 @@
+export default function Productos() {
+  return <main>here we show the products</main>;
+}

app/signup/page.tsx

@@ -0,0 +1,7 @@
+export default function SignUp() {
+  return (
+    <main className="container mx-auto py-14 px-2">
+      <div>Sign up here</div>
+    </main>
+  );
+}

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig