'use client';
import React, { use } from 'react';
import Link from 'next/link';
import Navbar from './components/Layout/Header';
import Footer from './components/Layout/Footer';
import { useEffect, useState } from 'react';


export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center pt-28 px-1">
      <div>
        <Navbar />
      </div>
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-8">Pantry Tracker</h1>
        <p className='text-8198ae'>Stay Stocked, Stay Smart</p>
        <div className="flex space-x-4 justify-center px-2 p-6">
          <Link href="/signup">
            <span className="bg-[#63b2fc] text-white px-4 py-2 rounded hover:bg-blue-600">Sign Up</span>
          </Link>
          <Link href="/login">
            <span className="border border-[#63b2fc] text-[#63b2fc] px-4 py-2 rounded hover:bg-[#63b2fc] hover:text-white">Log In</span>
          </Link>
        </div>
        <Link href="/pantry">
          <img src="./pantry_landing.png" alt="Description of image" className="mx-auto mb-8 w-48 h-48" />
        </Link>
      </div>
      <Footer />
    </main>
  );
}