Create hero section for main page

frontend/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
+    "lucide-react": "^1.57.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.4",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,11 +1,16 @@
-import Login from './pages/login'
+import { Routes, Route } from "react-router-dom";
 import './index.css'
+import HomePage from './pages/HomePage'
+import Login from "./pages/login";
 
 function App() {
 
   return (
-    <Login />
-  )
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/login" element={<Login />} />
+    </Routes>
+  );
 }
 
 export default App

frontend/src/components/Hero.tsx

@@ -0,0 +1,42 @@
+import heroImageBack from "../assets/hero2.png";
+import heroImageFront from "../assets/hero1.png";
+import { CircleUserRound } from "lucide-react";
+import { Link } from "react-router-dom";
+
+function Hero() {
+  return (
+    <section className="relative mx-auto flex min-h-152 max-w-350 items-center justify-between gap-12 px-10 py-16 pt-30">
+      <Link
+        to="/login"
+        aria-label="Open login"
+        className="absolute left-10 top-15 text-gray-300 hover:text-gray-500"
+        >
+        <CircleUserRound size={34} strokeWidth={1.5} />
+      </Link>
+
+      <div className="max-w-xl mx-auto translate-y-0 min-[1100px]:translate-y-30">
+        <h1 className="font-serif text-5xl sm:text-6xl leading-tight">Artex</h1>
+
+        <p className="mt-8 font-serif text-base leading-7 text-gray-700 sm:text-lg sm:leading-8">
+          Explore thousands of artworks in the Art Institute of Chiacago’s collection. From their renowned icons to lesser known works from every corner of the globe. 
+        </p>
+      </div>
+
+      <div className="relative hidden min-h-88 w-full items-center justify-center min-[1000px]:flex min-[1000px]:flex-1 lg:min-h-136 lg:justify-end">
+        <img
+            src={heroImageBack}
+            alt=""
+            className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
+        />
+
+        <img
+            src={heroImageFront}
+            alt="Featured artwork"
+            className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
+        />
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

frontend/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from "react-router-dom";
 import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

frontend/src/pages/HomePage.tsx

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

frontend/src/pages/login.tsx

@@ -1,8 +1,15 @@
+import { Link } from "react-router-dom";
+
 function Login() {
   return (
     <div className="flex min-h-dvh">
       <div className="flex w-full items-center justify-center px-6 pb-10 pt-20 md:w-2/5 md:p-8">
-        <button className="absolute left-4 top-4 z-10 p-2 hover:text-gray-500">← Back</button>
+        <Link
+          to="/"
+          className="absolute left-4 top-4 z-10 p-2 hover:text-gray-500"
+        >
+          ← Back
+        </Link>
 
         <div className="flex w-full max-w-sm flex-col gap-8">
           <h3 className="text-4xl md:text-5xl">Login</h3>