From eed057922eca2b8ca83da399128ed094b0ee3e5a Mon Sep 17 00:00:00 2001 From: Aditi Prabakaran Date: Thu, 2 Jan 2025 07:43:18 +0530 Subject: [PATCH 1/3] 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 From 38d5d50fca2e21e0ca905adb3d467c6e1a0034e1 Mon Sep 17 00:00:00 2001 From: Aditi Prabakaran Date: Thu, 2 Jan 2025 13:22:56 +0530 Subject: [PATCH 2/3] updated testimonial --- src/Pages/Testimonial.css | 215 +++++++++++++++-------- src/Pages/Testimonial.js | 359 ++++++++++++-------------------------- 2 files changed, 251 insertions(+), 323 deletions(-) diff --git a/src/Pages/Testimonial.css b/src/Pages/Testimonial.css index faed088..d0587d9 100644 --- a/src/Pages/Testimonial.css +++ b/src/Pages/Testimonial.css @@ -1,108 +1,169 @@ -*{ - margin:0; - padding: 0; - font-family: 'poppins', sans-serif ; -} +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Open+Sans:wght@400;500&display=swap'); -.testimonial{ - background:#f8f8f8; - height:90vh; +.testimonial { + background-color: #f5e6d3; + padding: 80px 0; + background-image: + linear-gradient(rgba(245, 230, 211, 0.9), rgba(245, 230, 211, 0.9)), + url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a87d5a' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); } -h1{ - text-align: center; - color: #7c2214; + +.testimonial .container { + max-width: 1200px; + margin: 0 auto; } -.container{ - margin-top: 5%; +.testimonial h1 { + text-align: center; + color: #5c3d2e; + font-family: 'Playfair Display', serif; + font-size: 2.8rem; + margin-bottom: 50px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.1); + position: relative; } -.image-text{ - width:100% ; - height: 300px; +.testimonial h1::after { + content: '☕'; display: block; - text-align: center; - padding: 40% 5%; - background: white; - color:black ; - border-radius: 15px; - box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1); - animation: fadeInUp 1s ease-in-out; /* Added animation */ + font-size: 1.5rem; + margin-top: 10px; + text-shadow: none; } -.image-text h2{ - font-size: 25px; - text-transform: uppercase; - letter-spacing: 2px; +.single { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 8px 16px rgba(92, 61, 46, 0.1); + margin: 15px; + transition: all 0.3s ease; + border: 1px solid #e6d5c3; + height: 100%; + display: flex; + flex-direction: column; } -.image-text p{ - font-size: 14px; +.single:hover { + transform: translateY(-5px); + box-shadow: 0 12px 20px rgba(92, 61, 46, 0.15); } -.single{ - position: relative; - margin-bottom: 50px; +.image { + text-align: center; + margin-bottom: 20px; } -.image{ - position: absolute; - width:100px; +.image img { + width: 100px; height: 100px; - border: 3px solid #7c2214; - overflow: hidden; - top:15px; - left:125px; border-radius: 50%; - animation: bounceIn 1s ease-in-out; /* Added animation */ + object-fit: cover; + border: 4px solid #b68f40; + transition: transform 0.3s ease; } -.image img{ - width: 100%; - object-fit: cover; +.single:hover .image img { + transform: scale(1.05); } -.carousel-indicators{ - left: 0; - top: auto; - bottom: -70px; +.image-text { + text-align: center; + flex-grow: 1; + display: flex; + flex-direction: column; } -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } +.image-text h2 { + color: #5c3d2e; + font-size: 1.4rem; + margin-bottom: 10px; + font-family: 'Playfair Display', serif; + font-weight: 600; } -@keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: scale3d(.3, .3, .3); +.image-text .rating { + color: #b68f40; + font-size: 1.2rem; + margin-bottom: 15px; +} + +.image-text .testimonial-text { + color: #6b4f3b; + font-size: 1rem; + line-height: 1.7; + font-family: 'Open Sans', sans-serif; + margin-bottom: 0; + font-style: italic; + flex-grow: 1; +} + +.carousel { + padding-bottom: 50px; +} + +.carousel-indicators { + bottom: -50px; +} + +.carousel-indicators button { + background-color: #b68f40 !important; + width: 10px !important; + height: 10px !important; + border-radius: 50% !important; + margin: 0 5px !important; + opacity: 0.5; + transition: opacity 0.3s ease; +} + +.carousel-indicators button.active { + opacity: 1; +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + background-color: #b68f40; + border-radius: 50%; + padding: 25px; + transition: all 0.3s ease; +} + +.carousel-control-prev, +.carousel-control-next { + opacity: 0.7; + width: 5%; +} + +.carousel-control-prev:hover, +.carousel-control-next:hover { + opacity: 1; +} + +@media (max-width: 768px) { + .testimonial { + padding: 40px 0; } - 20% { - transform: scale3d(1.1, 1.1, 1.1); + + .testimonial h1 { + font-size: 2rem; + margin-bottom: 30px; } - 40% { - transform: scale3d(.9, .9, .9); + + .single { + margin: 10px; + padding: 20px; } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); + + .image img { + width: 80px; + height: 80px; } - 80% { - transform: scale3d(.97, .97, .97); + + .image-text h2 { + font-size: 1.2rem; } - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); + + .image-text .testimonial-text { + font-size: 0.9rem; } -} +} \ No newline at end of file diff --git a/src/Pages/Testimonial.js b/src/Pages/Testimonial.js index ba9a939..9227df2 100644 --- a/src/Pages/Testimonial.js +++ b/src/Pages/Testimonial.js @@ -1,252 +1,119 @@ -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%; -`; - -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; - } -`; +import React from 'react' +import './Testimonial.css' function Testimonial() { return ( - - - 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."

- - - -
- -
- - - - 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."

- - - -
- - - - - - - - - - - - - - - - - + <> +
+
+

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?

+
+
+
+
+
+
+ + +
+
+
+
+
+ ); } From 2cb9afa1b46147a404e4e5a48f9ec7d8ae9a37c2 Mon Sep 17 00:00:00 2001 From: Aditi Prabakaran Date: Thu, 2 Jan 2025 13:26:47 +0530 Subject: [PATCH 3/3] updated testimonial --- src/Pages/Testimonial.js | 105 +++++++++++++++++++-------------------- 1 file changed, 52 insertions(+), 53 deletions(-) diff --git a/src/Pages/Testimonial.js b/src/Pages/Testimonial.js index 79723db..9227df2 100644 --- a/src/Pages/Testimonial.js +++ b/src/Pages/Testimonial.js @@ -3,59 +3,58 @@ import './Testimonial.css' function Testimonial() { return ( - - - 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."

- - - -
+ <> +
+
+

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.

+
+
+
+
+