Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed the About and review carousel section #47

Merged
merged 4 commits into from
Oct 3, 2024
Merged

Fixed the About and review carousel section #47

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b0449a
Fixed the About and review carousel section
sajalbatra Oct 3, 2024
0aea01c
Top margin fixed
sajalbatra Oct 3, 2024
76ad810
fixed the about section
sajalbatra Oct 3, 2024
1c525d0
fixed responsiveness
sajalbatra Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions frontend/src/components/Pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
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 60% opacity */}
<div className="absolute inset-0 bg-black opacity-60"></div>

{/* Content container */}
<div className="relative z-10 flex flex-col justify-center h-full px-4 text-center md:flex-row md:px-10 lg:px-20 md:text-left">
{/* Title */}
<div className="flex items-center justify-center md:w-1/2">
<h1 className="text-5xl font-bold text-center text-white sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl">
ABOUT US
</h1>
</div>

{/* Paragraph */}
<div className="relative z-10 flex justify-center w-full mt-10 align-middle md:pl-32">
<p className="text-gray-200 text-l md:text-xl"> {/* 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
Expand Down
50 changes: 33 additions & 17 deletions frontend/src/components/ui/ReviewCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
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) // 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) =>
Expand All @@ -72,14 +78,14 @@ const ReviewCarousel = () => {

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={{
Expand All @@ -90,14 +96,14 @@ const ReviewCarousel = () => {
{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>
<div className="flex">
Expand All @@ -108,25 +114,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>
Comment on lines +136 to 146
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance accessibility by using a <button> for the toggle

Replacing the <span> with a <button> improves accessibility by providing proper semantics and focus handling for users navigating via keyboard or assistive technologies.

Here's the suggested change:

- <span
+ <button
     className="text-blue-500 cursor-pointer focus:outline-none"
     onClick={() => toggleShowMore(index)}
   >
     {showMoreStates[index] ? " Show less" : " Read more"}
- </span>
+ </button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<p className="text-lg leading-6 tracking-wide text-center">
{showMoreStates[index]
? review.review
: `${review.review.substring(0, 50)}...`}
<button
className="text-blue-500 cursor-pointer focus:outline-none"
onClick={() => toggleShowMore(index)}
>
{showMoreStates[index] ? " Show less" : " Read more"}
</button>
</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
Loading