From 1b0449a17494f25680c6e81e70b2b1cc5e7f1f19 Mon Sep 17 00:00:00 2001 From: Sajal Batra Date: Thu, 3 Oct 2024 11:05:59 +0530 Subject: [PATCH 1/4] Fixed the About and review carousel section --- frontend/src/components/Pages/About.jsx | 26 +++++++--- frontend/src/components/ui/ReviewCarousel.jsx | 50 ++++++++++++------- 2 files changed, 51 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx index 244d9bf5..7da4e38e 100644 --- a/frontend/src/components/Pages/About.jsx +++ b/frontend/src/components/Pages/About.jsx @@ -1,17 +1,27 @@ -import bgpic from "../../assets/img/abt1.jpg" +import bgpic from "../../assets/img/abt1.jpg"; export default function About() { return ( -
+
-
{/* Black overlay with 40% opacity */} -
-

ABOUT US

-
-

{/* Change text color for better contrast */} + {/* Black overlay with 60% opacity */} +

+ + {/* Content container */} +
+ {/* Title */} +
+

+ ABOUT US +

+
+ + {/* Paragraph */} +
+

{/* 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 diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx index 12d1b238..d4e34749 100644 --- a/frontend/src/components/ui/ReviewCarousel.jsx +++ b/frontend/src/components/ui/ReviewCarousel.jsx @@ -5,8 +5,7 @@ const ReviewCarousel = () => { const reviews = [ { name: "Jane Smith", - review: - "Great games and coffee. The perfect spot to unwind with friends!", + review: "Great games and coffee. The perfect spot to unwind with friends!", img: "https://randomuser.me/api/portraits/men/51.jpg", rating: 5, }, @@ -42,21 +41,28 @@ const ReviewCarousel = () => { }, { name: "Olivia Green", - review: - "Great atmosphere and an excellent selection of board games. Will be back!", + review: "Great atmosphere and an excellent selection of board games. Will be back!", img: "https://randomuser.me/api/portraits/women/72.jpg", rating: 4, }, { name: "Ethan White", - review: - "The vibe is amazing, and the staff is super friendly. Highly recommend!", + review: "The vibe is amazing, and the staff is super friendly. Highly recommend!", img: "https://randomuser.me/api/portraits/men/33.jpg", rating: 5, }, ]; const [currentIndex, setCurrentIndex] = useState(0); + const [showMoreStates, setShowMoreStates] = useState( + reviews.map(() => false) // Initializing state for each review to false + ); + + const toggleShowMore = (index) => { + const updatedStates = [...showMoreStates]; + updatedStates[index] = !updatedStates[index]; // Toggle the specific review + setShowMoreStates(updatedStates); + }; const nextSlide = () => { setCurrentIndex((prevIndex) => @@ -72,14 +78,14 @@ const ReviewCarousel = () => { return (

-
+

Customer Feedback

-
-
+
+
{ {reviews.map((review, index) => (
-
-
+
+

{review.name}

@@ -108,25 +114,35 @@ const ReviewCarousel = () => { ))}
-

- {review.review} + +

+ {showMoreStates[index] + ? review.review + : `${review.review.substring(0, 50)}...`} + toggleShowMore(index)} + > + {showMoreStates[index] ? " Show less" : " Read more"} +

))}
+ {reviews.length > 4 && ( <> From 0aea01cacb311e0c0d84faf4a5c23da718b3eb72 Mon Sep 17 00:00:00 2001 From: Sajal Batra Date: Thu, 3 Oct 2024 19:57:28 +0530 Subject: [PATCH 2/4] Top margin fixed --- frontend/src/components/Pages/About.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx index 7da4e38e..1f72d6f1 100644 --- a/frontend/src/components/Pages/About.jsx +++ b/frontend/src/components/Pages/About.jsx @@ -20,7 +20,7 @@ export default function About() {
{/* Paragraph */} -
+

{/* Change text color for better contrast */} How it works.. Our name says it all! From 76ad8106ea86e9493ff582f0b06262ef4d787ddd Mon Sep 17 00:00:00 2001 From: Sajal Batra Date: Thu, 3 Oct 2024 21:01:53 +0530 Subject: [PATCH 3/4] fixed the about section --- frontend/src/components/Pages/About.jsx | 39 ++++++++++++++----------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx index 1f72d6f1..794229f3 100644 --- a/frontend/src/components/Pages/About.jsx +++ b/frontend/src/components/Pages/About.jsx @@ -7,37 +7,42 @@ export default function About() { className="absolute inset-0 bg-center bg-cover" style={{ backgroundImage: `url(${bgpic})` }} > - {/* Black overlay with 60% opacity */} + {/* Black overlay with 40% opacity */}

{/* Content container */} -
- {/* Title */} -
-

- ABOUT US -

-
+
+ {/* Heading */} +

+ ABOUT US +

{/* Paragraph */} -
-

{/* 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 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! + 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!

- Hours and Location - New opening hours:
- Sunday: 10am-11pm
- Mon-Thurs: 11am-11pm
- Fri: 11am-midnight
- Sat: 10am-midnight
+ Hours and Location +
+ New opening hours: +
+ Sunday: 10am-11pm +
+ Mon-Thurs: 11am-11pm +
+ Fri: 11am-midnight +
+ Sat: 10am-midnight +
Our kitchen closes 2.5-3 hours before we close!

From 1c525d0d371d88cf901e50447a0c86d1e21d59da Mon Sep 17 00:00:00 2001 From: Sajal Batra Date: Thu, 3 Oct 2024 21:45:52 +0530 Subject: [PATCH 4/4] fixed responsiveness --- frontend/src/components/ui/ReviewCarousel.jsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx index d4e34749..38094e46 100644 --- a/frontend/src/components/ui/ReviewCarousel.jsx +++ b/frontend/src/components/ui/ReviewCarousel.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState,useEffect } from "react"; import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md"; const ReviewCarousel = () => { @@ -55,12 +55,12 @@ const ReviewCarousel = () => { const [currentIndex, setCurrentIndex] = useState(0); const [showMoreStates, setShowMoreStates] = useState( - reviews.map(() => false) // Initializing state for each review to false + reviews.map(() => false) ); const toggleShowMore = (index) => { const updatedStates = [...showMoreStates]; - updatedStates[index] = !updatedStates[index]; // Toggle the specific review + updatedStates[index] = !updatedStates[index]; setShowMoreStates(updatedStates); }; @@ -75,6 +75,24 @@ const ReviewCarousel = () => { prevIndex === 0 ? reviews.length - 4 : prevIndex - 1 ); }; + const [cardsToShow, setCardsToShow] = useState(1); + + const updateCardsToShow = () => { + if (window.innerWidth >= 768) { + setCardsToShow(4); + } else { + setCardsToShow(1); + } + }; + + useEffect(() => { + updateCardsToShow(); + window.addEventListener("resize", updateCardsToShow); + + return () => { + window.removeEventListener("resize", updateCardsToShow); + }; + }, []); return (
@@ -89,8 +107,8 @@ const ReviewCarousel = () => {
{reviews.map((review, index) => ( @@ -105,7 +123,7 @@ const ReviewCarousel = () => { alt="" className="w-20 h-20 rounded-full" /> -

{review.name}

+

{review.name}

{Array(review.rating) .fill()