Skip to content

Commit b4d6f04

Browse files
devsdenepaldevsdenepal
committed
add testimonial
1 parent 9838ae5 commit b4d6f04

File tree

7 files changed

+114
-12
lines changed

7 files changed

+114
-12
lines changed

‎src/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Title from './assets/Components/Title/Title'
66
import About from './assets/Components/About/About'
77
import Upcoming from './assets/Components/Upcoming/Upcoming'
88
import Glimpses from './assets/Components/Glimpses/Glimpses'
9+
import Testimonial from './assets/Components/Testimonials/Testimonial'
910
const App = () => {
1011
return (
1112
<div>
@@ -21,7 +22,7 @@ const App = () => {
2122
<Title title='Glimpses' subtitle='sneekpeek from past events'></Title>
2223
<Glimpses> </Glimpses>
2324
<Title title='TESTIMONIALS' subtitle='What student says'></Title>
24-
25+
<Testimonial></Testimonial>
2526
</div>
2627
</div>
2728
)

‎src/assets/Components/Collabs/Collabs.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
import "../Glimpses/Glimpses.css"
3+
const Collabs = () => {
4+
return (
5+
<div class="album">
6+
<div class="gallery">
7+
<img src={poster} alt="" />
8+
<img src={poster} alt="" />
9+
<img src={poster} alt="" />
10+
<img src={poster} alt="" />
11+
12+
</div>
13+
<div class="gallery">
14+
<img src={poster} alt="" />
15+
<img src={poster} alt="" />
16+
<img src={poster} alt="" />
17+
<img src={poster} alt="" />
18+
19+
</div>
20+
<button class="btn dark-btn">See more here &nbsp;<i class="fa-solid fa-arrow-right"></i> </button>
21+
</div>
22+
)
23+
}
24+
25+
export default Collabs

‎src/assets/Components/Glimpses/Glimpses.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import './Glimpses.css'
33
import poster from "../nposter.png"
44
const Glimpses = () => {
55
return (
6-
<div class="campus">
6+
<div class="album">
77
<div class="gallery">
88
<img src={poster} alt="" />
99
<img src={poster} alt="" />
@@ -18,9 +18,7 @@ const Glimpses = () => {
1818
<img src={poster} alt="" />
1919

2020
</div>
21-
<button class="btn dark-btn">See more here
22-
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAeCAYAAABnuu2GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADPSURBVHgB7dnRDYJAEEXRpxVYAiXQgpVICVqB2IEdaAeUQAlrB9iBdjDOyPqhm2yCX7xhTzIJhITkBgJkAWZIRDY6vYw624cHGtLItzA1bo15+o2odTqwi7dikNQF7LzHVTrD0uKOYFfiWJU4VhpR6zyWFrez46u4cUb6GcOssbBBNyr48rSPYE9X6uMddtC5w5cTWGUeHnuwykS1YJV5QbdgVaJYlCgWmagrWMm4mOMyKriKMpKuBJsw5RwsK8E3nS3YxVuxi1eqlz9+SrwAYrdvIKJt0HIAAAAASUVORK5CYII=" alt="" />
23-
</button>
21+
<button class="btn dark-btn">See more here &nbsp;<i class="fa-solid fa-arrow-right"></i> </button>
2422
</div>
2523
)
2624
}

‎src/assets/Components/Testimonials/Sub_testimonial.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
const Sub_Testimonial = ({ userImage, userName, userTitle, userMessage }) => {
4+
5+
const renderSub_Testimonial = (image, name, title, message) => (
6+
<div className="slide">
7+
<div className="user-info">
8+
<img src={image} alt={`${name}'s avatar`} />
9+
<div>
10+
<h3>{name}</h3>
11+
<span>{title}</span>
12+
</div>
13+
</div>
14+
<p>{message}</p>
15+
</div>
16+
);
17+
18+
return (
19+
20+
21+
22+
<li>
23+
{renderSub_Testimonial(userImage, userName, userTitle, userMessage)}
24+
</li>
25+
26+
27+
28+
);
29+
}
30+
31+
export default Sub_Testimonial;

‎src/assets/Components/Testimonials/Testimonial.jsx‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,56 @@
1-
import React from 'react'
1+
import React, { useRef } from 'react';
2+
import Sub_testimonial from './Sub_testimonial'; // Ensure this matches the file name exactly
3+
import userImage from '../user-demo.png'; // Make sure the path is correct and the image exists
24

35
const Testimonial = () => {
6+
const slider = useRef();
7+
let tx=0;
8+
const slideForward = ()=>{
9+
if (tx > -50) {
10+
tx -= 25;
11+
}
12+
slider.current.style.transform = `translateX(${tx}%)`;
13+
}
14+
const slideBackward = ()=>{
15+
if(tx < 0) {
16+
tx += 25;
17+
}
18+
slider.current.style.transform = `translateX(${tx}%)`;
19+
}
420
return (
5-
<div>
6-
21+
<div className='testimonials'>
22+
<i class="fa-solid fa-arrow-right next-btn" onClick={slideForward}></i>
23+
<i class="fa-solid fa-arrow-left back-btn" onClick={slideBackward}></i>
24+
<div className='slider'>
25+
<ul ref={slider}>
26+
<Sub_testimonial
27+
userImage={userImage}
28+
userName="Aayush Kurmi"
29+
userTitle="Student at Bhairahawa Multiple Campus"
30+
userMessage="Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quam suscipit soluta porro maiores nihil, ut quod autem facere dignissimos atque sed modi ex aliquid voluptate ipsa error. Accusantium, beatae."
31+
/>
32+
<Sub_testimonial
33+
userImage={userImage}
34+
userName="Aayush Kurmi"
35+
userTitle="Student at Bhairahawa Multiple Campus"
36+
userMessage="Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quam suscipit soluta porro maiores nihil, ut quod autem facere dignissimos atque sed modi ex aliquid voluptate ipsa error. Accusantium, beatae."
37+
/>
38+
<Sub_testimonial
39+
userImage={userImage}
40+
userName="Aayush Kurmi"
41+
userTitle="Student at Bhairahawa Multiple Campus"
42+
userMessage="Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quam suscipit soluta porro maiores nihil, ut quod autem facere dignissimos atque sed modi ex aliquid voluptate ipsa error. Accusantium, beatae."
43+
/>
44+
<Sub_testimonial
45+
userImage={userImage}
46+
userName="Aayush Kurmi"
47+
userTitle="Student at Bhairahawa Multiple Campus"
48+
userMessage="Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quam suscipit soluta porro maiores nihil, ut quod autem facere dignissimos atque sed modi ex aliquid voluptate ipsa error. Accusantium, beatae."
49+
/>
50+
</ul>
51+
</div>
752
</div>
8-
)
53+
);
954
}
1055

11-
export default Testimonial
56+
export default Testimonial;

‎src/assets/Components/user-demo.png‎

44.3 KB
Loading

‎src/index.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ svg{
1515
h2{
1616
color: var(--h2-color)
1717
}
18-
.campus {
18+
.album {
1919
margin: 80px auto;
2020
width: 90%;
2121
text-align: center
@@ -59,7 +59,9 @@ h2{
5959
width: 50px;
6060
border-radius: 50%;
6161
cursor: pointer;
62-
background: #212ea0
62+
background: #212ea0;
63+
color: #fff;
64+
6365
}
6466

6567
.back-btn {

0 commit comments

Comments
 (0)