Home_page_responsive_little

frontend/src/components/Pages/About.jsx

@@ -1,4 +1,4 @@
-import bgpic from "../../assets/img/abt1.jpg"
+import bgpic from "../../assets/img/abt1.jpg";
 
 export default function About() {
   return (
@@ -9,20 +9,18 @@ export default function About() {
       >
         <div className="absolute inset-0 bg-black opacity-60"></div> {/* Black overlay with 40% opacity */}
         <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 items-center justify-center h-full p-4">
-          <h1 className="text-7xl md:text-9xl font-bold text-center p-8 text-white">ABOUT US</h1>
-          <div className="flex w-full justify-center align-middle mt-10 md:px-36 relative z-10">
-            <p className="text-l md:text-xl text-gray-200 w-full"> {/* Change text color for better contrast */}
-              How it works..
-              Our name says it all!
-              Founder, Jonathan Li, shares a passion for board games, boba, and
+          <h1 className="text-5xl sm:text-6xl md:text-8xl lg:text-9xl font-bold text-center p-4 text-white">ABOUT US</h1>
+          <div className="flex w-full justify-center items-start mt-8 md:mt-10 md:px-8 lg:px-36 relative z-10">
+            <p className="text-base sm:text-lg md:text-xl text-gray-200 w-full leading-relaxed text-justify p-4">
+              How it works...<br />
+              Our name says it all! Founder, Jonathan Li, shares a passion for board games, boba, and
               delicious food, so he combined them all to become Sip & Play, Park Slope’s
-              first board game cafe. It is a straightforward concept, come in with your
+              first board game cafe. It is a straightforward concept: come in with your
               friends and family to play any board game from our library of <span className="text-amber-600">300+ games!</span>
               We hope when you visit, you also enjoy our coffee, espresso, boba,
               sandwiches, and snacks!
-              <br />
-              <br />
-              Hours and Location
+              <br /><br />
+              <strong>Hours and Location:</strong><br />
               New opening hours:<br />
               Sunday: 10am-11pm <br />
               Mon-Thurs: 11am-11pm <br />

frontend/src/components/ui/Landing.jsx

@@ -1,55 +1,30 @@
 import heropic from "../../assets/landing/hero pic.jpg";
 import coffecup from "../../assets/landing/coffecup.png";
 
-
 export default function Landing() {
   return (
     <div>
       <section className="relative pb-24 h-screen-dvh w-screen bg-cover bg-center overflow-hidden">
-        <div className="flex-col md:flex pt-20 z-1">
+        <div className="flex flex-col md:flex-row items-center pt-10 md:pt-20 z-1">
           {/* Text Content */}
-          <div className="w-screen p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
-            <h1 className="text-6xl md:text-9xl font-bold">
+          <div className="w-full md:w-1/2 p-4 text-center md:text-left z-10">
+            <h1 className="text-4xl sm:text-6xl md:text-9xl font-bold leading-tight">
               A unique café experience awaits you
             </h1>
           </div>
-          <div>
-            <div className="flex justify-center pt-64 z-0">
-          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20">
-            <img src={heropic} alt="" className="w-2/4" />
-          </div>
-          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
-            <img src={heropic} alt="" className="w-2/4" />
-          </div>
+
+          <div className="flex justify-center w-full mt-10 md:mt-0">
+            <div className="absolute flex justify-center w-2/4 md:w-2/4 rotate-12 -bottom-20">
+              <img src={heropic} alt="Hero" className="w-full max-w-[400px] mx-auto" />
+            </div>
+            <div className="absolute flex justify-center w-2/4 md:w-2/4 -rotate-12 -bottom-16">
+              <img src={heropic} alt="Hero" className="w-full max-w-[400px] mx-auto" />
+            </div>
           </div>
         </div>
-        </div>
       </section>
 
-
-      <section className="flex flex-row justify-center items-center p-32">
-        {/* <div className="w-3/5 p-28 mt-20">
-          <h1 className="text-8xl font-bold text-black ">
-            Our name says it all!
-          </h1>
-          <p className="text-black text-2xl">
-            Founder, Jonathan Li, shares a passion for board games, boba, and
-            delicious food, so he combined them all to become Sip & Play, Park
-            Slope’s first board game cafe. It is a straightforward concept: come
-            in with your friends and family to play any board game from our
-            library of 300+ games! We hope when you visit, you also enjoy our
-            coffee, espresso, boba, sandwiches, and snacks!
-          </p>
-          <ul className="text-xl mt-4">
-            <li>New opening hours:</li>
-            <li>Sunday: 10am-11pm</li>
-            <li>Mon-Thurs: 11am-11pm</li>
-            <li>Fri: 11am-midnight</li>
-            <li>Sat: 10am-midnight</li>
-          </ul>
-          <button className="p-2 border-2 border-slate-500">Learn more↗️</button>
-        </div> */}
-
+      <section className="flex flex-col md:flex-row justify-center items-center py-16 md:py-32 px-4 md:px-32 relative">
         <div className="w-1/2 absolute p-4 md:right-40 m-auto">
           <img src={coffecup} alt="" className="w-96 rotate-12"/>
         </div>

frontend/src/components/ui/ReviewCarousel.jsx

@@ -84,7 +84,7 @@ const ReviewCarousel = () => {
             className="flex transition-transform duration-300 ease-in-out"
             style={{
               transform: `translateX(-${currentIndex * (100 / 4)}%)`,
-              width: `${reviews.length * (100 / 4)}%`,
+              width: `${reviews.length * (100 /4)}%`,
             }}
           >
             {reviews.map((review, index) => (