From 43f66a076acd1736503e2a3153f0624c4a8fd8e0 Mon Sep 17 00:00:00 2001
From: angelp03 <angelpimentel2025@u.northwestern.edu>
Date: Thu, 7 Nov 2024 16:19:44 -0600
Subject: [PATCH 1/4] Add banner component to HomePage

---
 index.html                |  3 ++
 public/favicon.svg        | 28 ++-----------
 src/Icon.svg              |  3 ++
 src/Search.svg            |  3 ++
 src/components/Banner.css | 86 +++++++++++++++++++++++++++++++++++++++
 src/components/Banner.jsx | 34 ++++++++++++++++
 src/pages/HomePage.jsx    | 11 +++++
 7 files changed, 143 insertions(+), 25 deletions(-)
 create mode 100644 src/Icon.svg
 create mode 100644 src/Search.svg
 create mode 100644 src/components/Banner.css
 create mode 100644 src/components/Banner.jsx
 create mode 100644 src/pages/HomePage.jsx

diff --git a/index.html b/index.html
index d1838d2..e5e9181 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CafeWay</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;400;500;600;700&family=Montserrat&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap" rel="stylesheet">
     <script async
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYwK6s-iuUjmmV4E6grB8eTEYE4L4HtdA&libraries=places,marker">
diff --git a/public/favicon.svg b/public/favicon.svg
index 0af1627..70632b3 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,25 +1,3 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 275.353 275.353" xml:space="preserve">
-<g>
-	<g>
-		<g>
-			<g>
-				<path style="fill:#ffffff;" d="M229.784,199.712c27.269,0,45.568-29.692,45.568-57.419c0-20.117-12.418-22.843-24.562-22.843
-					c-3.468,0-7.21,0.234-11.167,0.479c-3.195,0.176-6.507,0.332-9.848,0.41l0.039-0.889H1.514c0,42.959,24.132,80.321,59.686,99.49
-					C24.787,221.333,0,226.043,0,231.445c0,7.865,51.782,14.196,115.659,14.196s115.649-6.331,115.649-14.196
-					c0-5.432-24.904-10.132-61.454-12.516c10.63-5.725,20.263-13.004,28.529-21.641
-					C208.026,199.712,219.448,199.712,229.784,199.712z M229.364,128.272c3.683-0.088,7.289-0.244,10.737-0.469
-					c3.83-0.205,7.464-0.42,10.698-0.42c11.509,0,16.658,2.159,16.658,14.909c0,23.419-15.466,49.515-37.664,49.515
-					c-9.751,0-18.3-0.205-25.285-1.358C218.559,173.196,227.537,151.731,229.364,128.272z M98.982,97.203
-					c-0.557-0.547-13.414-13.922,0.156-30.327c16.58-20,0.01-37-0.156-37.166l-3.595,3.595c0.557,0.537,13.414,13.932-0.166,30.327
-					c-16.58,20.029-0.01,37.039,0.166,37.195L98.982,97.203z M118.737,97.203c-0.557-0.547-13.414-13.922,0.166-30.327
-					c16.56-20,0-37-0.166-37.166l-3.605,3.595c0.557,0.537,13.414,13.932-0.156,30.327c-16.56,20.039-0.01,37.039,0.166,37.205
-					L118.737,97.203z M140.251,97.203c-0.557-0.547-13.414-13.922,0.156-30.327c16.57-20,0-37-0.156-37.166l-3.615,3.595
-					c0.547,0.537,13.424,13.932-0.166,30.327c-16.56,20.039,0,37.039,0.176,37.205L140.251,97.203z"/>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
\ No newline at end of file
+<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34 16H36C38.1217 16 40.1566 16.8429 41.6569 18.3431C43.1571 19.8434 44 21.8783 44 24C44 26.1217 43.1571 28.1566 41.6569 29.6569C40.1566 31.1571 38.1217 32 36 32H34M34 16H2V34C2 36.1217 2.84285 38.1566 4.34315 39.6569C5.84344 41.1571 7.87827 42 10 42H26C28.1217 42 30.1566 41.1571 31.6569 39.6569C33.1571 38.1566 34 36.1217 34 34V16ZM10 2V8M18 2V8M26 2V8" stroke="#8A3323" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Icon.svg b/src/Icon.svg
new file mode 100644
index 0000000..70632b3
--- /dev/null
+++ b/src/Icon.svg
@@ -0,0 +1,3 @@
+<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34 16H36C38.1217 16 40.1566 16.8429 41.6569 18.3431C43.1571 19.8434 44 21.8783 44 24C44 26.1217 43.1571 28.1566 41.6569 29.6569C40.1566 31.1571 38.1217 32 36 32H34M34 16H2V34C2 36.1217 2.84285 38.1566 4.34315 39.6569C5.84344 41.1571 7.87827 42 10 42H26C28.1217 42 30.1566 41.1571 31.6569 39.6569C33.1571 38.1566 34 36.1217 34 34V16ZM10 2V8M18 2V8M26 2V8" stroke="#8A3323" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Search.svg b/src/Search.svg
new file mode 100644
index 0000000..4b6e572
--- /dev/null
+++ b/src/Search.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.625 28.625L22.2812 22.2812M25.7083 14.0417C25.7083 20.485 20.485 25.7083 14.0417 25.7083C7.59834 25.7083 2.375 20.485 2.375 14.0417C2.375 7.59834 7.59834 2.375 14.0417 2.375C20.485 2.375 25.7083 7.59834 25.7083 14.0417Z" stroke="#FFFDFD" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Banner.css b/src/components/Banner.css
new file mode 100644
index 0000000..35dc00f
--- /dev/null
+++ b/src/components/Banner.css
@@ -0,0 +1,86 @@
+.banner-div {
+    height: 5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem; 
+    font-family: 'Hind Vadodara', sans-serif;
+    font-weight: bolder;
+    color: #8A3323;
+    border-bottom: 2px solid #8A3323;
+}
+
+.logo-search-div {
+    display: flex;
+    align-items: center;
+}
+
+.logo-div {
+    height:100%;
+    display: flex;
+    align-items: center;
+    margin-right: 3rem;
+}
+
+.logo-div h1 {
+    margin-left: 0.5rem;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.logo-search-div form {
+    display: flex;
+    align-items: center;
+}
+
+.text-input {
+    width: 22rem;
+    height: 1.5rem;
+    border-bottom: 1px solid black;
+    border-radius: 0;
+    padding-left: 0.5rem;
+    font-size: 1rem;
+    font-family: 'Hind Vadodara', sans-serif;
+    margin-right: 0;
+    border-top-left-radius: 0.25rem;
+}
+
+.search-btn {
+    height: 2.6rem;
+    width: 3rem;
+    background-color: #8A3323;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0.65rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom: 1px solid black;
+}
+
+.banner-buttons {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.banner-btn {
+    text-align: center;
+    height:2.45rem;
+    width: 8rem;
+    background-color: #8A3323;
+    color: white;
+    font-family: 'Hind Vadodara', sans-serif;
+    font-weight: bold;
+    font-size: 1rem;
+    border: none;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    margin: 0;
+}
+
+.banner-btn:hover {
+    background-color: #a85c43;
+}
\ No newline at end of file
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
new file mode 100644
index 0000000..b13b9ad
--- /dev/null
+++ b/src/components/Banner.jsx
@@ -0,0 +1,34 @@
+import './Banner.css';
+import Icon from '../Icon.svg';
+import Search from '../Search.svg';
+
+const Banner = () => {
+    return (
+        <div className='banner-div'>
+            <div className="logo-search-div">
+                <div className='logo-div'>
+                    <img src={Icon}/>
+                    <h1>
+                        CafeWay
+                    </h1>
+                </div>
+                <form>
+                    <input className="text-input" type="text" placeholder="Search for cafes near you" />
+                    <button className="search-btn"> 
+                        <img src={Search}/>
+                    </button>
+                </form>
+            </div>
+            <div className="banner-buttons">
+                <button className="banner-btn">
+                    Review
+                </button>
+                <button className="banner-btn">
+                    Login
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default Banner
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..535e079
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,11 @@
+import Banner from "../components/Banner"
+
+const HomePage = () => {
+    return (
+        <div>
+            <Banner/>
+        </div>
+    )
+}
+
+export default HomePage
\ No newline at end of file

From 1007aef14ba8b3a80856b2bcc7fe5745e634c5f0 Mon Sep 17 00:00:00 2001
From: angelp03 <angelpimentel2025@u.northwestern.edu>
Date: Thu, 7 Nov 2024 17:34:22 -0600
Subject: [PATCH 2/4] Add review list to HomePage

---
 src/components/Banner.css     |  2 +-
 src/components/ReviewList.css | 40 +++++++++++++++++
 src/components/ReviewList.jsx | 81 +++++++++++++++++++++++++++++++++++
 src/pages/HomePage.css        |  7 +++
 src/pages/HomePage.jsx        | 15 ++++++-
 5 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ReviewList.css
 create mode 100644 src/components/ReviewList.jsx
 create mode 100644 src/pages/HomePage.css

diff --git a/src/components/Banner.css b/src/components/Banner.css
index 35dc00f..89c1df9 100644
--- a/src/components/Banner.css
+++ b/src/components/Banner.css
@@ -7,7 +7,7 @@
     font-family: 'Hind Vadodara', sans-serif;
     font-weight: bolder;
     color: #8A3323;
-    border-bottom: 2px solid #8A3323;
+    border-bottom: 1px solid #8A3323;
 }
 
 .logo-search-div {
diff --git a/src/components/ReviewList.css b/src/components/ReviewList.css
new file mode 100644
index 0000000..6ab02bc
--- /dev/null
+++ b/src/components/ReviewList.css
@@ -0,0 +1,40 @@
+.review-div{
+    margin-top: 3rem;
+    margin-bottom:1rem;
+}
+
+.review-div h1 {
+    text-align: center;
+    color: #8A3323;
+}
+
+.review-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit,  minmax(14rem, 1fr));
+    gap: 1rem;
+    padding: 0 2rem;
+}
+
+.review-card {
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 5px;
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.review-card h3,
+.review-card p {
+    margin-left: 1rem;
+}
+
+.review-card .star {
+    margin-left: 1rem;
+}
+
+
+.review-card.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
diff --git a/src/components/ReviewList.jsx b/src/components/ReviewList.jsx
new file mode 100644
index 0000000..8ed9d8f
--- /dev/null
+++ b/src/components/ReviewList.jsx
@@ -0,0 +1,81 @@
+import React, { useEffect } from "react";
+import './ReviewList.css';
+
+const reviews = [
+    {
+        id: 1,
+        author: 'John Doe',
+        rating: 4,
+        content: 'Currently busy.',
+        location: 'Starbucks',
+    },
+    {
+        id: 2,
+        author: 'Jane Smith',
+        rating: 5,
+        content: 'Somewhat busy, some seats remain.',
+        location: 'Colectivo',
+    },
+    {
+        id: 3,
+        author: 'Alice Johnson',
+        rating: 3,
+        content: 'Very empty, plenty of seats.',
+        location: "Phil's",
+    },
+    {
+        id: 4,
+        author: 'Bob Brown',
+        rating: 5,
+        content: 'Very quiet and great coffee!',
+        location: 'Coffee Lab',
+    },
+];
+
+const ReviewList = () => {
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            threshold: 0.2,
+        });
+
+        const reviewCards = document.querySelectorAll('.review-card');
+        reviewCards.forEach(card => {
+            observer.observe(card);
+        });
+
+        return () => {
+            reviewCards.forEach(card => {
+                observer.unobserve(card);
+            });
+        };
+    }, []);
+
+    return (
+        <div className='review-div'>
+            <h1>Recent Reviews</h1>
+            <div className="review-list">
+                {reviews.map((review) => (
+                    <div key={review.id} className='review-card'>
+                        <h3>{review.author}</h3>
+                        <p>{review.location}</p>
+                        <div>
+                            {Array.from({ length: review.rating }).map((_, index) => (
+                                <span key={index} className="star">&#9733;</span>
+                            ))}
+                        </div>
+                        <p>{review.content}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ReviewList;
diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css
new file mode 100644
index 0000000..f6304d8
--- /dev/null
+++ b/src/pages/HomePage.css
@@ -0,0 +1,7 @@
+.media-container {
+    position: relative;
+    width: 100%;
+    height: 600px;
+    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 535e079..61e365e 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,9 +1,22 @@
-import Banner from "../components/Banner"
+import Banner from "../components/Banner";
+import ReviewList from "../components/ReviewList";
+import './HomePage.css';
 
 const HomePage = () => {
     return (
         <div>
             <Banner/>
+            <div className="media-container">
+                <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2490.472543587202!2d-73.97771648280692!3d40.75359771673144!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2599a6397a343%3A0x34f4da96f5c5b3fc!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1641310281611!5m2!1sen!2sus"
+                    width="100%"
+                    height="600"
+                    style={{ border: "0", margin: "0", borderRadius: "10px" }}
+                    allowFullScreen=""
+                    loading="lazy"
+                ></iframe>
+            </div>
+            <ReviewList/>
         </div>
     )
 }

From f40362c80d6196dd1450ff12618dd691e16b7d5f Mon Sep 17 00:00:00 2001
From: angelp03 <angelpimentel2025@u.northwestern.edu>
Date: Thu, 7 Nov 2024 18:47:35 -0600
Subject: [PATCH 3/4] Add ReviewList and Filtering

---
 src/components/Banner.jsx   |  4 ++
 src/components/CafeList.css | 28 +++++++++++++
 src/components/CafeList.jsx | 78 +++++++++++++++++++++++++++++++++++++
 src/pages/ReviewsPage.jsx   | 13 +++++++
 4 files changed, 123 insertions(+)
 create mode 100644 src/components/CafeList.css
 create mode 100644 src/components/CafeList.jsx
 create mode 100644 src/pages/ReviewsPage.jsx

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index b13b9ad..2642603 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -3,6 +3,10 @@ import Icon from '../Icon.svg';
 import Search from '../Search.svg';
 
 const Banner = () => {
+    // const navigate = useNavigate();
+    // const navigateToReviews = () => {
+    //     navigate('/reviews')
+    // }
     return (
         <div className='banner-div'>
             <div className="logo-search-div">
diff --git a/src/components/CafeList.css b/src/components/CafeList.css
new file mode 100644
index 0000000..18ba163
--- /dev/null
+++ b/src/components/CafeList.css
@@ -0,0 +1,28 @@
+.cafe-list-container {
+    display: flex;
+    gap: 2rem;
+}
+
+.filter {
+    width: 250px;
+    padding: 1rem;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.cafe-list {
+    display: block;
+    flex-grow: 1;
+}
+
+.cafe-card {
+    width: 100%;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
diff --git a/src/components/CafeList.jsx b/src/components/CafeList.jsx
new file mode 100644
index 0000000..e29411c
--- /dev/null
+++ b/src/components/CafeList.jsx
@@ -0,0 +1,78 @@
+import './CafeList.css';
+
+const reviews = [
+    {
+        id: 1,
+        author: 'John Doe',
+        rating: 4,
+        content: 'Currently busy.',
+        location: 'Starbucks',
+    },
+    {
+        id: 2,
+        author: 'Jane Smith',
+        rating: 5,
+        content: 'Somewhat busy, some seats remain.',
+        location: 'Colectivo',
+    },
+    {
+        id: 3,
+        author: 'Alice Johnson',
+        rating: 3,
+        content: 'Very empty, plenty of seats.',
+        location: "Phil's",
+    },
+    {
+        id: 4,
+        author: 'Bob Brown',
+        rating: 5,
+        content: 'Very quiet and great coffee!',
+        location: 'Coffee Lab',
+    },
+];
+
+const CafeList = () => {
+    return (
+        <div className="cafe-list-container">
+            {/* Filter section */}
+            <div className="filter">
+                <h4>Filter Options</h4>
+                {/* Example filter options */}
+                <label>
+                    Rating:
+                    <select>
+                        <option value="1">1 Star</option>
+                        <option value="2">2 Stars</option>
+                        <option value="3">3 Stars</option>
+                        <option value="4">4 Stars</option>
+                        <option value="5">5 Stars</option>
+                    </select>
+                </label>
+                <br />
+                <label>
+                    Location:
+                    <input type="text" placeholder="Search by location" />
+                </label>
+                {/* Add more filters here as needed */}
+            </div>
+
+            {/* Review cards */}
+            <div className="cafe-list">
+                {reviews.map((review) => (
+                    <div key={review.id} className="cafe-card">
+                        <h3>{review.author}</h3>
+                        <p>{review.location}</p>
+                        <div>
+                            {Array.from({ length: review.rating }).map((_, index) => (
+                                <span key={index}>&#9733;</span>
+                            ))}
+                        </div>
+                        <p>{review.content}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default CafeList;
diff --git a/src/pages/ReviewsPage.jsx b/src/pages/ReviewsPage.jsx
new file mode 100644
index 0000000..c79993c
--- /dev/null
+++ b/src/pages/ReviewsPage.jsx
@@ -0,0 +1,13 @@
+import Banner from "../components/Banner";
+import CafeList from "../components/CafeList";
+
+const ReviewsPage = () => {
+    return (
+        <div>
+            <Banner/>
+            <CafeList/>
+        </div>
+    )
+}
+
+export default ReviewsPage;
\ No newline at end of file

From d330f8172967a602f75321efb494f11e1d158c1c Mon Sep 17 00:00:00 2001
From: alizenart <97767073+alizenart@users.noreply.github.com>
Date: Thu, 7 Nov 2024 22:56:33 -0600
Subject: [PATCH 4/4] initial UI

---
 src/App.css          | 139 +++++++++++---------------------
 src/App.jsx          | 188 ++++++++++++++++++++-----------------------
 src/MapComponent.jsx |  42 ++++++++++
 3 files changed, 174 insertions(+), 195 deletions(-)
 create mode 100644 src/MapComponent.jsx

diff --git a/src/App.css b/src/App.css
index 7e822a0..fcefc44 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,124 +1,75 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .App-header {
-  background-color: #FFF2D7;
-  min-height: 100vh;
+  background-color: #EBEBE5;
+  font-size: 1.5rem;
+  color: #8dbf50;
+  font-weight: bold;
+  padding: 20px;
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: #65431F;
 }
 
-.App-link {
-    padding: 8px;
-    border-radius: 5px;
-    border: none;
-    height:27px;
-  }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.page-title {
+  color: #8dbf50;
 }
 
-button {
-  margin-top: 10px;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: #61dafb;
-  background-color: #8A3323;
+.my-post-button {
   border: none;
+  color: #8dbf50;
+  font-weight: bold;
+  background-color: transparent;
+  font-size: 1.25rem;
   cursor: pointer;
-  color:white;
-  height:100%;
 }
 
-.cafe-card{
-  background-color: #8A3323 !important;
-}
-
-.App-header ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.App-header li {
-  margin: 5px 0;
-  background-color: #444;
-  padding: 10px;
-  border-radius: 5px;
+.my-post-button:hover {
   color: white;
 }
 
-.App-header ul {
-  list-style-type: none;
-  padding: 0;
+.cafe-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+  background-color: #FFF2D7;
 }
 
-.App-header li {
-  margin: 10px 0;
-  background-color: #444;
-  padding: 10px;
-  border-radius: 5px;
-  color: white;
+.listings-plant-image, .cafe-image {
+  width: 150px;
+  height: 100px;
+  object-fit: cover;
+  padding-left: 20px;
 }
 
-.App-header li ul {
-  margin-top: 5px;
+.cafe-info {
+  flex: 1;
+  padding-left: 20px;
 }
 
-input {
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-  border: none;
-}
-.availability-section {
-  margin-top: 20px;
+.cafe-action, .plant-action {
+  text-align: right;
 }
 
-.availability-display {
-  margin-top: 10px;
+.price {
+  font-size: 1.2rem;
+  color: #333;
 }
 
-.availability-item {
-  background-color: #555;
-  padding: 10px;
-  margin-top: 5px;
-  border-radius: 5px;
-}
-
-input {
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-  border: none;
+.book-btn, .cafe-action button {
+  color: #8dbf50;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
 }
 
-button {
-  margin-top: 10px;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: #61dafb;
-  border: none;
-  cursor: pointer;
+.book-btn:hover {
+  background-color: #6f9640;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 032bc57..f300761 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
-
 import { useAuthState, signInWithGoogle, firebaseSignOut } from './utilities/firebase'; 
-
 import { findCafes } from './utilities/findCafes';
-
+import MapComponent from "./MapComponent";
 
 function App() {
   const [reviews, setReviews] = useState([]);
@@ -17,52 +15,19 @@ function App() {
   const [dist, setDist] = useState('');
   const [cafes, setCafes] = useState([]); 
 
-  const [user] = useAuthState(); 
-
+  const [user] = useAuthState();
 
   const handleSignIn = async () => {
     try {
-      await signInWithGoogle(); // Sign in with Google
+      await signInWithGoogle();
     } catch (error) {
       console.error('Error signing in:', error);
     }
   };
-  
+
   const handleLogout = () => firebaseSignOut();
 
-  useEffect(() => {
-  }, []);
-
-  // const findCafes = () => {
-  //   const radiusMeters = parseFloat(dist) * 1609.34; 
-
-  //   const geocoder = new window.google.maps.Geocoder();
-  //   geocoder.geocode({ address: address }, (results, status) => {
-  //     if (status === "OK" && results[0]) {
-  //       const location = results[0].geometry.location;
-
-  //       const service = new window.google.maps.places.PlacesService(document.createElement("div"));
-  //       service.nearbySearch(
-  //         {
-  //           location: location,
-  //           radius: radiusMeters,
-  //           type: "cafe",
-  //         },
-  //         (results, status) => {
-  //           if (status === window.google.maps.places.PlacesServiceStatus.OK) {
-  //             setCafes(results.map((place) => place.name));
-  //           } else {
-  //             alert("No cafes found within the specified radius.");
-  //             setCafes([]); 
-  //           }
-  //         }
-  //       );
-  //     } else {
-  //       alert("Invalid zip code or location not found.");
-  //       setCafes([]);
-  //     }
-  //   });
-  // };
+  useEffect(() => {}, []);
 
   const findCafesWrapper = () => {
     findCafes(dist, address, setCafes);
@@ -71,38 +36,61 @@ function App() {
   const handleReviewSubmit = () => {
     if (newReview.trim()) {
       const review = { id: Date.now(), text: newReview, replies: [] };
+      setReviews((prevReviews) => [...prevReviews, review]);
       setNewReview('');
     }
   };
 
   const handleReplySubmit = (reviewId) => {
     if (replyText.trim()) {
+      setReviews((prevReviews) =>
+        prevReviews.map((review) =>
+          review.id === reviewId
+            ? { ...review, replies: [...review.replies, replyText] }
+            : review
+        )
+      );
       setReplyText('');
       setSelectedReview(null);
     }
   };
 
   const handleAvailabilityUpdate = (cafeId) => {
-
+    const timestamp = new Date().toLocaleString();
+    const newUpdate = { timestamp, seating: cafeStatus.seating, outlets: cafeStatus.outlets };
+
+    setAvailability((prevAvailability) => ({
+      ...prevAvailability,
+      [cafeId]: {
+        history: [...(prevAvailability[cafeId]?.history || []), newUpdate],
+      },
+    }));
+    setCafeStatus({ seating: '', outlets: '' });
   };
 
+  const cafesMap = [
+    { name: "Cafe Blue", lat: 42.046, lng: -87.688 },
+    { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 },
+    { name: "Java Lounge", lat: 42.044, lng: -87.690 },
+  ];
+
   return (
     <div className="App">
       <header className="App-header">
         <h1>CafeWay</h1>
         {user ? (
-              <>
-                <button className="btn btn-outline-dark" onClick={handleLogout}>
-                  Sign Out
-                </button>
-                <p>Welcome, {user.email}</p>
-              </>
-            ) : (
-              <button className="btn btn-outline-dark" onClick={handleSignIn}>
-                Sign In
-              </button>
-            )}
-        <div>
+          <>
+            <button className="my-post-button" onClick={handleLogout}>Sign Out</button>
+            <p>Welcome, {user.email}</p>
+          </>
+        ) : (
+          <button className="my-post-button" onClick={handleSignIn}>Sign In</button>
+        )}
+      </header>
+
+      <div className="listings-container">
+        <div className="listings-column">
+          <h2>Share a Review</h2>
           <input
             type="text"
             placeholder="Share a quick review..."
@@ -110,62 +98,48 @@ function App() {
             onChange={(e) => setNewReview(e.target.value)}
           />
           <button onClick={handleReviewSubmit}>Submit</button>
-        </div>
 
-        <ul className="review-list">
-          {reviews.map((review) => (
-            <li key={review.id} className="review-item">
-              <p onClick={() => setSelectedReview(review)}>{review.text}</p>
-
-              <ul className="reply-list">
-                {review.replies.map((reply, index) => (
-                  <li key={index} className="reply-item">
-                    <span className="reply-label">Reply:</span> {reply}
-                  </li>
-                ))}
-              </ul>
-
-              {selectedReview && selectedReview.id === review.id && (
-                <div className="reply-input">
-                  <input
-                    type="text"
-                    placeholder="Write a reply..."
-                    value={replyText}
-                    onChange={(e) => setReplyText(e.target.value)}
-                  />
-                  <button onClick={() => handleReplySubmit(review.id)}>
-                    Send
-                  </button>
-                </div>
-              )}
-            </li>
-          ))}
-        </ul>
+          <ul className="review-list">
+            {reviews.map((review) => (
+              <li key={review.id} className="review-item">
+                <p onClick={() => setSelectedReview(review)}>{review.text}</p>
+                <ul className="reply-list">
+                  {review.replies.map((reply, index) => (
+                    <li key={index} className="reply-item">
+                      <span className="reply-label">Reply:</span> {reply}
+                    </li>
+                  ))}
+                </ul>
+                {selectedReview && selectedReview.id === review.id && (
+                  <div className="reply-input">
+                    <input
+                      type="text"
+                      placeholder="Write a reply..."
+                      value={replyText}
+                      onChange={(e) => setReplyText(e.target.value)}
+                    />
+                    <button onClick={() => handleReplySubmit(review.id)}>Send</button>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
 
-        <div className="availability-section">
           <h2>Update Cafe Availability</h2>
           <input
             type="text"
             placeholder="Seating status (e.g., Few seats left)"
             value={cafeStatus.seating}
-            onChange={(e) =>
-              setCafeStatus({ ...cafeStatus, seating: e.target.value })
-            }
+            onChange={(e) => setCafeStatus({ ...cafeStatus, seating: e.target.value })}
           />
           <input
             type="text"
             placeholder="Outlet status (e.g., All taken)"
             value={cafeStatus.outlets}
-            onChange={(e) =>
-              setCafeStatus({ ...cafeStatus, outlets: e.target.value })
-            }
+            onChange={(e) => setCafeStatus({ ...cafeStatus, outlets: e.target.value })}
           />
-          <button onClick={() => handleAvailabilityUpdate('cafe-123')}>
-            Update Availability
-          </button>
-        </div>
+          <button onClick={() => handleAvailabilityUpdate('cafe-123')}>Update Availability</button>
 
-        <div className="availability-display">
           <h2>Availability History</h2>
           {availability['cafe-123']?.history?.map((update, index) => (
             <div key={index} className="availability-item">
@@ -176,7 +150,7 @@ function App() {
           ))}
         </div>
 
-        <div className="cafes-nearby">
+        <div className="map-column">
           <h2>Cafes Near Me</h2>
           <input
             type="text"
@@ -190,17 +164,29 @@ function App() {
             value={dist}
             onChange={(e) => setDist(e.target.value)}
           />
-          <button onClick={findCafesWrapper}>
-            Search
-          </button>
-
+          <button onClick={findCafesWrapper}>Search</button>
+          <h2>Cafes Near Me</h2>
           <ul>
             {cafes.map((cafe, index) => (
               <li className="cafe-card" key={index}>{cafe}</li>
             ))}
           </ul>
+            
+
+          <ul className="cafe-list">
+            {cafes.map((cafesMap, index) => (
+              <li key={index} className="cafe-item">
+                {cafe.name} (Lat: {cafe.lat}, Lng: {cafe.lng})
+              </li>
+            ))}
+          </ul>
+
+          {/* Integrate MapComponent with hardcoded data */}
+          <div style={{ height: '400px', width: '100%', marginTop: '20px' }}>
+            <MapComponent cafes={cafesMap} />
+          </div>
         </div>
-      </header>
+      </div>
     </div>
   );
 }
diff --git a/src/MapComponent.jsx b/src/MapComponent.jsx
new file mode 100644
index 0000000..e946599
--- /dev/null
+++ b/src/MapComponent.jsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useRef, useState } from "react";
+
+const MapComponent = ( {cafes} ) => {
+  const mapRef = useRef(null);
+  const defaultLocation = { lat: 42.0451, lng: -87.6877 }; // Default to a location, e.g., Chicago
+
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    // Initialize map
+    const map = new window.google.maps.Map(mapRef.current, {
+      center: defaultLocation,
+      zoom: 14,
+      mapId: 'ae95546a5be3631',
+      disableDefaultUI: true,
+    });
+
+    // Add markers for each cafe
+    cafes.forEach((cafe) => {
+      const marker = new window.google.maps.Marker({
+        position: { lat: cafe.lat, lng: cafe.lng },
+        map: map,
+        title: cafe.name,
+      });
+
+      // Info window with cafe name
+      const infoWindow = new window.google.maps.InfoWindow({
+        content: `<div><strong>${cafe.name}</strong></div>`,
+      });
+
+      // Show info window on marker click
+      marker.addListener("click", () => {
+        infoWindow.open(map, marker);
+      });
+    });
+  }, []);
+
+  return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />;
+};
+
+export default MapComponent;