Skip to content

Commit 24d3a8a

Browse files
shree404shree404
authored
Merge pull request #22 from NepTechTribe/new
Testimonials Section Added
2 parents 2979e8a + c79fbfe commit 24d3a8a

File tree

7 files changed

+292
-2
lines changed

7 files changed

+292
-2
lines changed

‎src/Components/landingpage/Testimonials.jsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import Title from "./title";
2+
import { Container, Row, Col } from "react-bootstrap";
3+
import React, { useState, useEffect } from "react";
4+
import { Quote } from "react-bootstrap-icons";
5+
import Carousel from "react-bootstrap/Carousel";
6+
import img1 from "../../assets/LandingPage/pr-1.jpg";
7+
import img2 from "../../assets/LandingPage/about.jpg";
8+
9+
function Testimonials(){
10+
11+
const TestimonialsArray = [
12+
{
13+
image : img1,
14+
name:"Demo Name",
15+
post:"Demo Post",
16+
description:" Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, corrupti ipsum! Harum exercitationem illo impedit aspernatur architecto? Ipsa dignissimos earum incidunt omnis sunt hic reiciendis natus, repellendus, sequi excepturi eos!",
17+
},
18+
{
19+
image : img1,
20+
name:"Demo Name",
21+
post:"Demo Post",
22+
description:" Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, corrupti ipsum! Harum exercitationem illo impedit aspernatur architecto? Ipsa dignissimos earum incidunt omnis sunt hic reiciendis natus, repellendus, sequi excepturi eos!",
23+
},
24+
{
25+
image : img2,
26+
name:"Demo Name",
27+
post:"Demo Post",
28+
description:" Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, corrupti ipsum! Harum exercitationem illo impedit aspernatur architecto? Ipsa dignissimos earum incidunt omnis sunt hic reiciendis natus, repellendus, sequi excepturi eos!",
29+
},
30+
{
31+
image : img2,
32+
name:"Demo Name",
33+
post:"Demo Post",
34+
description:" Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, corrupti ipsum! Harum exercitationem illo impedit aspernatur architecto? Ipsa dignissimos earum incidunt omnis sunt hic reiciendis natus, repellendus, sequi excepturi eos!",
35+
},
36+
]
37+
38+
39+
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 576);
40+
41+
useEffect(() => {
42+
const handleResize = () => {
43+
setIsSmallScreen(window.innerWidth < 576);
44+
};
45+
46+
window.addEventListener('resize', handleResize);
47+
return () => window.removeEventListener('resize', handleResize);
48+
}, []);
49+
50+
51+
const createTestimonials = (array) => {
52+
if (isSmallScreen) {
53+
return array.map(item => [item]);
54+
}
55+
let pairs = [];
56+
for (let i = 0; i < array.length; i += 2) {
57+
pairs.push(array.slice(i, i + 2));
58+
}
59+
return pairs;
60+
};
61+
62+
const testimonialGroups = createTestimonials(TestimonialsArray);
63+
64+
return(
65+
<>
66+
67+
<Title title={"TESTIMONIALS"} head={"Testimonials From Team Members"}/>
68+
<Container className="Testimonials">
69+
<Carousel>
70+
{testimonialGroups.map((group, index) => (
71+
<Carousel.Item key={index} className="Testimonials-item">
72+
<div className="Testimonials-row">
73+
{group.map((testimonial, subIndex) => (
74+
<div className="Testimonials-individual" key={subIndex}>
75+
<p className="Testimonials-individual__desc">{testimonial.description}</p>
76+
<div className="Testimonials-individual__head">
77+
<div className="Testimonials-individual__head2">
78+
<img
79+
className="Testimonials-individual__image"
80+
src={testimonial.image}
81+
alt={`Image of ${testimonial.name}`}
82+
/>
83+
<p>
84+
<span className="Testimonials-individual__name">{testimonial.name}</span> <br />
85+
<span className="Testimonials-individual__post">{testimonial.post}</span>
86+
</p>
87+
</div>
88+
<Quote className="Testimonials-individual__icon" />
89+
</div>
90+
</div>
91+
))}
92+
</div>
93+
</Carousel.Item>
94+
))}
95+
</Carousel>
96+
</Container>
97+
</>
98+
)
99+
}
100+
101+
export default Testimonials;

‎src/Pages/Landingpage.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Programs from "../Components/landingpage/programs";
55
import Announcement from "../Components/landingpage/announcement";
66
import PastEvent from "../Components/landingpage/pastevent";
77
import Partners from "../Components/landingpage/partners";
8+
import Testimonials from "../Components/landingpage/Testimonials";
89

910
function LandingPage(){
1011
return(
@@ -16,6 +17,7 @@ function LandingPage(){
1617
<Announcement/>
1718
<PastEvent/>
1819
<Partners/>
20+
<Testimonials/>
1921
</>
2022
)
2123
}

‎src/Styles/App.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,14 @@
106106
font-size: 1.25rem;
107107
font-family: "Lobster Two", sans-serif;
108108
color: #000080;
109+
text-transform: uppercase;
109110
}
110111
.Title-head {
111112
font-size: 2.5rem;
112113
color: black;
113114
font-family: "Lato", sans-serif;
114115
font-weight: 500;
116+
text-transform: capitalize;
115117
}
116118

117119
.About {
@@ -222,4 +224,92 @@
222224
.Partners-col__image {
223225
height: 10rem;
224226
width: 10rem;
227+
}
228+
229+
.Testimonials {
230+
background-color: white;
231+
}
232+
.Testimonials-item {
233+
background-color: white;
234+
}
235+
.Testimonials-row {
236+
display: flex;
237+
justify-content: space-between;
238+
}
239+
.Testimonials-individual {
240+
width: 37rem;
241+
height: 22rem;
242+
padding: 2rem;
243+
background-color: #e0e0f2;
244+
align-items: center;
245+
}
246+
.Testimonials-individual__head {
247+
display: flex;
248+
justify-content: space-between;
249+
align-items: center;
250+
margin-bottom: 2rem;
251+
}
252+
.Testimonials-individual__head2 {
253+
display: flex;
254+
gap: 2rem;
255+
align-items: center;
256+
}
257+
.Testimonials-individual__image {
258+
height: 5rem;
259+
width: 5rem;
260+
border-radius: 50%;
261+
}
262+
.Testimonials-individual__name {
263+
font-size: 1.625rem;
264+
font-family: "Poppins", sans-serif;
265+
}
266+
.Testimonials-individual__post {
267+
text-transform: capitalize;
268+
font-weight: 400;
269+
color: black;
270+
}
271+
.Testimonials-individual__icon {
272+
transform: rotateY(180deg);
273+
height: 5rem;
274+
width: 5rem;
275+
color: black;
276+
}
277+
.Testimonials-individual__desc {
278+
margin-top: 2rem;
279+
margin-bottom: 2rem;
280+
}
281+
282+
.Testimonials .carousel-control-prev,
283+
.Testimonials .carousel-control-next {
284+
display: none;
285+
}
286+
.Testimonials .carousel-indicators button {
287+
height: 15px;
288+
width: 15px;
289+
background-color: transparent;
290+
border: 1px solid #000080;
291+
}
292+
.Testimonials .carousel-indicators button.active {
293+
background-color: #000080;
294+
}
295+
296+
@media screen and (max-width: 575px) {
297+
.Testimonials {
298+
padding-top: 3rem;
299+
padding-bottom: 3rem;
300+
}
301+
.Testimonials-individual {
302+
width: 100%;
303+
height: 30rem;
304+
}
305+
}
306+
@media screen and (min-width: 576px) and (max-width: 1024px) {
307+
.Testimonials {
308+
padding-top: 3rem;
309+
padding-bottom: 3rem;
310+
}
311+
.Testimonials-individual {
312+
width: 48%;
313+
height: auto;
314+
}
225315
}/*# sourceMappingURL=App.css.map */

‎src/Styles/App.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Styles/LandingPage/_Index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
@import 'About';
77
@import 'Program';
88
@import 'Announcement';
9-
@import 'Partners';
9+
@import 'Partners';
10+
@import 'Testimonials';

‎src/Styles/LandingPage/_Testimonials.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.Testimonials{
2+
background-color: white;
3+
&-item{
4+
background-color: white;
5+
}
6+
&-row{
7+
display: flex;
8+
justify-content: space-between;
9+
}
10+
&-individual{
11+
width: 37rem;
12+
height: 22rem;
13+
padding: 2rem;
14+
background-color: #e0e0f2;
15+
align-items: center;
16+
&__head{
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
margin-bottom: 2rem;
21+
}
22+
&__head2{
23+
display: flex;
24+
gap: 2rem;
25+
align-items: center;
26+
}
27+
&__image{
28+
height: 5rem;
29+
width: 5rem;
30+
border-radius: 50%;
31+
}
32+
&__name{
33+
font-size: 1.625rem;
34+
font-family: $font;
35+
}
36+
&__post{
37+
text-transform: capitalize;
38+
font-weight: 400;
39+
color: black
40+
}
41+
&__icon{
42+
transform: rotateY(180deg);
43+
height: 5rem;
44+
width: 5rem;
45+
color: black;
46+
}
47+
&__desc{
48+
margin-top: 2rem;
49+
margin-bottom: 2rem;
50+
}
51+
}
52+
}
53+
54+
55+
.Testimonials {
56+
.carousel-control-prev,
57+
.carousel-control-next {
58+
display: none;
59+
}
60+
.carousel-indicators{
61+
& button {
62+
height: 15px;
63+
width: 15px;
64+
background-color: transparent;
65+
border: 1px solid #000080 ;
66+
&.active {
67+
background-color: #000080 ;
68+
}
69+
}
70+
}
71+
72+
}
73+
74+
@media screen and (max-width:575px) {
75+
.Testimonials{
76+
padding-top: 3rem;
77+
padding-bottom: 3rem;
78+
&-individual{
79+
width: 100%;
80+
height: 30rem;
81+
}
82+
}
83+
}
84+
85+
@media screen and (min-width:576px) and (max-width:1024px) {
86+
.Testimonials{
87+
padding-top: 3rem;
88+
padding-bottom: 3rem;
89+
&-individual{
90+
width: 48%;
91+
height: auto;
92+
}
93+
}
94+
}

‎src/Styles/LandingPage/_Title.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@
55
font-size: 1.25rem;
66
font-family: $lobster;
77
color:#000080 ;
8+
text-transform: uppercase;
89
}
910
&-head{
1011
font-size: 2.5rem;
1112
color: black;
1213
font-family: $lato;
1314
font-weight: 500;
15+
text-transform: capitalize;
1416
}
1517
}

0 commit comments

Comments
 (0)