From eed057922eca2b8ca83da399128ed094b0ee3e5a Mon Sep 17 00:00:00 2001 From: Aditi Prabakaran Date: Thu, 2 Jan 2025 07:43:18 +0530 Subject: [PATCH] updated ui of testimonials page --- src/Pages/Testimonial.js | 371 ++++++++++++++++++++++++++------------- 1 file changed, 246 insertions(+), 125 deletions(-) diff --git a/src/Pages/Testimonial.js b/src/Pages/Testimonial.js index d6a7489..ba9a939 100644 --- a/src/Pages/Testimonial.js +++ b/src/Pages/Testimonial.js @@ -1,132 +1,253 @@ -import React from 'react' -import './Testimonial.css' +import React from 'react'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; +const TestimonialSection = styled.div` + background-color: #fffbeb; + padding: 6rem 2rem 4rem; + width: 100%; +`; - function Testimonial() { +const Container = styled.div` + max-width: 1200px; + margin: 0 auto; +`; + +const Title = styled.h1` + color: #78350f; + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + font-weight: bold; +`; + +const CarouselContainer = styled.div` + position: relative; + overflow: hidden; +`; + +const CarouselInner = styled.div` + width: 100%; +`; + +const CarouselRow = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + padding: 1rem; +`; + +const TestimonialCard = styled(motion.div)` + background: white; + border-radius: 12px; + padding: 2rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + } +`; + +const ImageContainer = styled.div` + width: 100px; + height: 100px; + margin: 0 auto 1.5rem; + + img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 3px solid #92400e; + } +`; + +const TestimonialContent = styled.div` + text-align: center; + + h2 { + color: #78350f; + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + .stars { + color: #f59e0b; + font-size: 1.2rem; + margin-bottom: 1rem; + } + + p { + color: #92400e; + line-height: 1.6; + font-style: italic; + } +`; + +const CarouselControls = styled.div` + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 2rem; + + button { + width: 12px; + height: 12px; + border-radius: 50%; + border: none; + background-color: ${props => props.active ? '#78350f' : '#d6d3d1'}; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #92400e; + } + } +`; + +const CarouselControlButton = styled.button` + position: absolute; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: #78350f; + font-size: 2rem; + cursor: pointer; + z-index: 2; + + &.prev { + left: -2rem; + } + + &.next { + right: -2rem; + } +`; + +function Testimonial() { return ( - <> -
- -
-

What Our Customer Says

-
-
-
-
- - -
-
-
-
-
-
-
- -
-
-

Devolina

-

⭐️⭐️⭐️⭐️

-

- -"Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists, and every cup is a masterpiece.

-
-
- -
-
-
-
- -
-
-

Priya Jha

-

⭐️⭐️⭐️⭐️

-

A hidden gem! This coffee shop not only has a fantastic selection of drinks but also a mouth-watering array of pastries.

-
-
- -
-
-
-
- -
-
-

Hellan

-

⭐️⭐️⭐️⭐️

-

"Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there’s always a good mix of people.

-
-
- -
-
-
- -
-
-
-
-
- -
-
-

David

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
-
- -
-
-
-
- -
-
-

John

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
-
- -
-
-
-
- -
-
-

Sandy

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
-
-
-
- -
- - -
-
-
+ + + What Our Customers Say + + +
+ + + + Devolina + + +

Devolina

+
⭐️⭐️⭐️⭐️⭐️
+

"Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists, and every cup is a masterpiece."

+ + + + + + Priya Jha + + +

Priya Jha

+
⭐️⭐️⭐️⭐️⭐️
+

"A hidden gem! This coffee shop not only has a fantastic selection of drinks but also a mouth-watering array of pastries."

+ + + + + + Hellan + + +

Hellan

+
⭐️⭐️⭐️⭐️⭐️
+

"Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there's always a good mix of people."

+ + +
-
-
- - ); -} -export default Testimonial; +
+ + + + David + + +

David

+
⭐️⭐️⭐️⭐️⭐️
+

"The attention to detail here is exceptional. From the latte art to the friendly service, everything is top-notch. A must-visit for coffee lovers!"

+ + + + + John + + +

John

+
⭐️⭐️⭐️⭐️⭐️
+

"Great atmosphere for working or meeting friends. The WiFi is reliable, and their seasonal drink specials are always creative and delicious."

+ + + + + + Sandy + + +

Sandy

+
⭐️⭐️⭐️⭐️⭐️
+

"The staff here is incredibly knowledgeable about coffee. They're always happy to explain different brewing methods and help you find your perfect cup."

+ + + +
+ + + + + + + + + + + + + + + + + + ); +} +export default Testimonial; \ No newline at end of file