Skip to content

Commit

Permalink
Merge pull request #47 from sajalbatra/main
Browse files Browse the repository at this point in the history 
Fixed the About and review carousel section
  • Loading branch information
@RamakrushnaBiswal
RamakrushnaBiswal authored Oct 3, 2024
2 parents cb8ff6a + 1c525d0 commit 425505e
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 36 deletions.
45 changes: 30 additions & 15 deletions frontend/src/components/Pages/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,48 @@
import bgpic from "../../assets/img/abt1.jpg"
import bgpic from "../../assets/img/abt1.jpg";

export default function About() {
return (
<div id="about" className="w-full md:mt-28 h-screen relative">
<div id="about" className="relative w-full h-screen md:mt-28">
<div
className="absolute inset-0 bg-cover bg-center"
className="absolute inset-0 bg-center bg-cover"
style={{ backgroundImage: `url(${bgpic})` }}
>
<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 */}
{/* Black overlay with 40% opacity */}
<div className="absolute inset-0 bg-black opacity-60"></div>

{/* Content container */}
<div className="relative z-10 grid items-center justify-center h-full grid-cols-1 p-4 md:grid-cols-2">
{/* Heading */}
<h1 className="p-4 text-4xl font-bold text-center text-white md:text-7xl lg:text-9xl">
ABOUT US
</h1>

{/* Paragraph */}
<div className="relative z-10 flex justify-center w-full mt-6 md:mt-0 md:px-36 ">
<p className="w-full text-sm text-gray-200 md:text-base lg:text-xl">
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 <span className="text-amber-600">300+ games!</span>
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
New opening hours:<br />
Sunday: 10am-11pm <br />
Mon-Thurs: 11am-11pm <br />
Fri: 11am-midnight <br />
Sat: 10am-midnight <br />
<strong>Hours and Location</strong>
<br />
New opening hours:
<br />
Sunday: 10am-11pm
<br />
Mon-Thurs: 11am-11pm
<br />
Fri: 11am-midnight
<br />
Sat: 10am-midnight
<br />
Our kitchen closes 2.5-3 hours before we close!
</p>
</div>
Expand Down
76 changes: 55 additions & 21 deletions frontend/src/components/ui/ReviewCarousel.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { useState } from "react";
import { useState,useEffect } from "react";
import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";

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,
},
Expand Down Expand Up @@ -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)
);

const toggleShowMore = (index) => {
const updatedStates = [...showMoreStates];
updatedStates[index] = !updatedStates[index];
setShowMoreStates(updatedStates);
};

const nextSlide = () => {
setCurrentIndex((prevIndex) =>
Expand All @@ -69,37 +75,55 @@ 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 (
<div className="mb-20">
<div className="items-center flex justify-center mb-10 p-20">
<div className="flex items-center justify-center p-20 mb-10">
<h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43]">
Customer Feedback
</h1>
</div>

<div className="bg-[#004D43] min-h-[50vh] p-4 md:p-20 items-center justify-center flex relative ">
<div className="w-full max-w-7xl md:overflow-hidden overflow-x-auto ">
<div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative ">
<div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
<div
className="flex transition-transform duration-300 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (100 / 4)}%)`,
width: `${reviews.length * (100 / 4)}%`,
transform: `translateX(-${currentIndex * (100 / cardsToShow)}%)`, // Moves the grid based on cardsToShow
width: `${(reviews.length / cardsToShow) * 100}%`, // Dynamic width based on the number of cards
}}
>
{reviews.map((review, index) => (
<div
key={index}
className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 "
className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-1/4"
>
<div className="relative h-[40vh] md:h-[35vh] p-4 rounded-xl md:w-full w-[42vh] bg-amber-200 z-10 overflow-hidden">
<div className="items-center flex flex-col justify-center mb-3">
<div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
<div className="flex flex-col items-center justify-center mb-1">
<img
src={review.img}
alt=""
className="rounded-full h-20 w-20"
className="w-20 h-20 rounded-full"
/>
<h1 className="text-xl font-semibold">{review.name}</h1>
<h1 className="text-xl font-semibold text-center">{review.name}</h1>
<div className="flex">
{Array(review.rating)
.fill()
Expand All @@ -108,25 +132,35 @@ const ReviewCarousel = () => {
))}
</div>
</div>
<p className="text-center text-lg leading-6 tracking-wide mt-4 ">
{review.review}

<p className="text-lg leading-6 tracking-wide text-center">
{showMoreStates[index]
? review.review
: `${review.review.substring(0, 50)}...`}
<span
className="text-blue-500 cursor-pointer"
onClick={() => toggleShowMore(index)}
>
{showMoreStates[index] ? " Show less" : " Read more"}
</span>
</p>
</div>
</div>
))}
</div>
</div>

{reviews.length > 4 && (
<>
<button
onClick={prevSlide}
className=" hidden md:block absolute left-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block left-20 top-1/2"
>
<MdArrowBackIos className="text-[#004D43]" />
</button>
<button
onClick={nextSlide}
className=" hidden md:block absolute right-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block right-20 top-1/2"
>
<MdArrowForwardIos className="text-[#004D43]" />
</button>
Expand Down

0 comments on commit 425505e

Please sign in to comment.