Skip to content

Commit 1ed20ed

Browse files
devsdenepaldevsdenepal
authored
Merge pull request #5 from NepTechTribe/dev-2
Dev 2
2 parents 9838ae5 + 21375ee commit 1ed20ed

File tree

12 files changed

+400
-188
lines changed

12 files changed

+400
-188
lines changed

‎src/App.jsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ 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'
10+
import Testimonials_2 from './assets/Components/Testimonials/Testimonials_2'
11+
import Contact from './assets/Components/Contact/Contact'
912
const App = () => {
1013
return (
1114
<div>
@@ -21,7 +24,13 @@ const App = () => {
2124
<Title title='Glimpses' subtitle='sneekpeek from past events'></Title>
2225
<Glimpses> </Glimpses>
2326
<Title title='TESTIMONIALS' subtitle='What student says'></Title>
24-
27+
<Testimonial></Testimonial>
28+
<Title title='COMMUNITIES AND ORGANIZATIONS' subtitle='Partnership and Collaboration With'></Title>
29+
<Glimpses></Glimpses>
30+
<Title title='TESTIMONIALS' subtitle='From Board and Advisors'></Title>
31+
<Testimonials_2></Testimonials_2>
32+
<Title title='LEAVE A FEEDBACK' subtitle='Suggestions and Plans'></Title>
33+
<Contact></Contact>
2534
</div>
2635
</div>
2736
)

‎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/Contact/Contact.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
.contact {
3+
margin: 80px auto;
4+
max-width: 90%;
5+
display: flex;
6+
align-content: center;
7+
justify-content: space-between
8+
}
9+
10+
.contact-col {
11+
flex-basis: 48%;
12+
color: #676767
13+
}
14+
15+
.contact-col h3 {
16+
color: #000f38;
17+
font-weight: 500;
18+
font-size: 25px;
19+
display: flex;
20+
align-items: center;
21+
margin-bottom: 20px
22+
}
23+
24+
.contact-col h3 img {
25+
width: 35px;
26+
margin-left: 10px
27+
}
28+
29+
.contact-col p {
30+
max-width: 450px;
31+
list-style: .3
32+
}
33+
34+
.contact-col ul li {
35+
display: flex;
36+
align-items: center;
37+
margin: 20px 0
38+
}
39+
40+
.contact-col ul li img {
41+
width: 25px;
42+
margin-right: 10px
43+
}
44+
45+
.contact form input,.contact form textarea {
46+
display: block;
47+
width: 100%;
48+
background: #ebecfe;
49+
padding: 15px;
50+
border: 0;
51+
outline: 0;
52+
margin-bottom: 15px;
53+
margin-top: 5px;
54+
resize: none
55+
}
56+
57+
.contact-col span {
58+
display: block;
59+
margin: 20px 0
60+
}
61+
62+
.submit-btn {
63+
margin-top: 10px
64+
}
65+
66+
@media (max-width: 700px) {
67+
.contact {
68+
display:block
69+
}
70+
71+
.contact-col {
72+
padding: 20px
73+
}
74+
}

‎src/assets/Components/Contact/Contact.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import './Contact.css';
3+
4+
const Contact = () => {
5+
return (
6+
<div className="contact" style={{ backgroundColor: 'lightgrey', padding: '20px' }}>
7+
<div className="contact-col">
8+
<h3>Send us a message
9+
</h3>
10+
<p>Feel free to reach out through the contact form or find our contact information below. Your feedback, questions, and suggestions are important to us as we strive to provide exceptional service to our university community.</p>
11+
<ul>
12+
<li>
13+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#040a93" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0l57.4-43c23.9-59.8 79.7-103.3 146.3-109.8l13.9-10.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176 0 384c0 35.3 28.7 64 64 64l296.2 0C335.1 417.6 320 378.5 320 336c0-5.6 .3-11.1 .8-16.6l-26.4 19.8zM640 336a144 144 0 1 0 -288 0 144 144 0 1 0 288 0zm-76.7-43.3c6.2 6.2 6.2 16.4 0 22.6l-72 72c-6.2 6.2-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L480 353.4l60.7-60.7c6.2-6.2 16.4-6.2 22.6 0z"/></svg>&nbsp; [email protected] </li>
14+
<li>
15+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#040a93" d="M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z"/></svg> &nbsp; +977 9816494300 </li>
16+
<li>
17+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#040a93" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>&nbsp;Bhairahawa, Rupandehi | Lumibini, Nepal
18+
</li>
19+
</ul>
20+
</div>
21+
<div className="contact-col">
22+
<form>
23+
<label>Your name</label>
24+
<input type="text" name="name" placeholder="Enter your name" required />
25+
<label>Phone Number</label>
26+
<input type="tel" name="phone" placeholder="Enter your mobile number" required />
27+
<label>Your Email</label>
28+
<input type="email" name="email" placeholder="Enter your email id" required />
29+
<label>Write your messages here</label>
30+
<textarea name="message" rows="6" placeholder="Enter your message" required />
31+
<div className="h-captcha" data-captcha="true" data-sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2" />
32+
{/* <iframe src="https://newassets.hcaptcha.com/captcha/v1/503a6fc/static/hcaptcha.html#frame=checkbox&amp;id=0sxzfpm9akol&amp;host=greatstack.in&amp;sentry=true&amp;reportapi=https%3A%2F%2Faccounts.hcaptcha.com&amp;recaptchacompat=off&amp;custom=false&amp;hl=en&amp;tplinks=on&amp;pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&amp;sitekey=50b2fe65-b00b-4b9e-ad62-3ba471098be2&amp;theme=light&amp;origin=https%3A%2F%2Fgreatstack.in" tabindex="0" frameborder="0" scrolling="no" title="Widget containing checkbox for hCaptcha security challenge" data-hcaptcha-widget-id="0sxzfpm9akol" data-hcaptcha-response="" style={{ pointerEvents: 'auto', width: '303px', height: '78px', overflow: 'hidden' }}> */}
33+
{/* </iframe> */}
34+
<textarea id="h-captcha-response-0sxzfpm9akol" name="h-captcha-response" style={{ display: 'none' }}></textarea>
35+
</form>
36+
<button type="submit" className="btn dark-btn submit-btn">Submit now &nbsp;<i class="fa-solid fa-arrow-right"></i></button>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
export default Contact;

‎src/assets/Components/Glimpses/Glimpses.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
width: 50px;
3838
border-radius: 50%;
3939
cursor: pointer;
40-
background: #212ea0
40+
background: #212ea0;
41+
color: #fff;
4142
}
4243

4344
.back-btn {

‎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.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
2+
.testimonials {
3+
margin: 80px auto;
4+
padding: 0 80px;
5+
position: relative
6+
}
7+
8+
.next-btn,.back-btn {
9+
position: absolute;
10+
top: 50%;
11+
right: 0;
12+
transform: translateY(-50%);
13+
padding: 15px;
14+
width: 50px;
15+
border-radius: 50%;
16+
cursor: pointer;
17+
background: #212ea0;
18+
color: #fff;
19+
20+
}
21+
22+
.back-btn {
23+
right: auto;
24+
left: 0
25+
}
26+
27+
.slider {
28+
overflow: hidden
29+
}
30+
31+
.slider ul {
32+
display: flex;
33+
width: 200%;
34+
overflow-x: hidden;
35+
transition: .5s
36+
}
37+
38+
.slider ul li {
39+
list-style: none;
40+
width: 50%;
41+
padding: 20px
42+
}
43+
44+
.slide {
45+
box-shadow: 0 0 20px #0000000d;
46+
padding: 40px;
47+
border-radius: 10px;
48+
color: #676767;
49+
line-height: 1.4
50+
}
51+
52+
.slide img {
53+
width: 65px;
54+
border-radius: 50%;
55+
margin-right: 10px;
56+
border: 4px solid #212EA0
57+
}
58+
59+
.user-info {
60+
display: flex;
61+
align-items: center;
62+
margin-bottom: 20px;
63+
font-size: 15px
64+
}
65+
66+
.user-info h3 {
67+
color: #212ea0
68+
}
69+
70+
@media (max-width: 800px) {
71+
.testimonials {
72+
padding:0 40px
73+
}
74+
75+
.next-btn,.back-btn {
76+
padding: 10px;
77+
width: 35px
78+
}
79+
80+
.testimonials ul li,.slide {
81+
padding: 10px
82+
}
83+
84+
.slide img {
85+
width: 50px;
86+
border: 3px solid #212EA0
87+
}
88+
}
89+
90+
@media (max-width: 600px) {
91+
.user-info {
92+
display:block;
93+
margin-bottom: 10px;
94+
font-size: 12px
95+
}
96+
97+
.user-info h3 {
98+
font-size: 16px
99+
}
100+
101+
.slider p {
102+
font-size: 12px
103+
}
104+
}

‎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;

0 commit comments

Comments
 (0)