Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Hover Effect on cards of team section. #34 #48

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add Hover Effect on cards of team section. #34 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a9352d
feat: Add Hover Effect on cards of team section. #34
naitikhoriya1 Oct 21, 2024
8d18029
"Updated index.html and App.jsx with minor formatting changes, added …
naitikhoriya1 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions frontend/index.html
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're using tailwind so kindly contribute using it.

Original file line number Diff line number Diff line change
@@ -1,16 +1,27 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
/>
<title>devXsphere</title>

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css">
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions frontend/src/App.jsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need faq section kindly read our readme file in ./frontend folder.

Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import TeamSection from "./components/TeamSection";
import Footer from "./components/Footer";
import Testimonials from "./components/Testimonials";
import Main from "./components/Main";
import Events from "./components/Events"
import Events from "./components/Events";
import Carousel from "./components/Carousel";

import Faq from "./components/Faq";

export default function App() {
return (
Expand All @@ -17,6 +17,7 @@ export default function App() {
<Events />
<TeamSection />
<Testimonials />
<Faq />
<Footer />
</div>
);
Expand Down
41 changes: 24 additions & 17 deletions frontend/src/components/CanvasLoader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
import { Html, useProgress} from '@react-three/drei'
import React from 'react'
import { Html, useProgress } from "@react-three/drei";
import React from "react";
// import { toFixed } from '@react-three/drei';

const CanvasLoader = () => {
const { progress } = useProgress();
const { progress } = useProgress();
return (
<Html
as='div'
center
as="div"
center
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
}}
>
<span className="canvas-loader" />
<p
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
fontSize: 14,
color: "#F1F1F1",
fontWeight: 800,
marginTop: 40,
}}
>
<span className='canvas-loader' />
<p style={{ fontSize: 14, color: '#F1F1F1', fontWeight: 800, marginTop: 40}}>
{ progress != 0 ? `${progress.toFixed(2)}%` : 'Loading...'}
</p>
>
{progress != 0 ? `${progress.toFixed(2)}%` : "Loading..."}
</p>
</Html>
)
}
);
};

export default CanvasLoader
export default CanvasLoader;
69 changes: 54 additions & 15 deletions frontend/src/components/Carousel.jsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please keep it in one line consize.

Original file line number Diff line number Diff line change
Expand Up @@ -63,16 +63,40 @@
// };

// export default Carousel;
import React, { useState, useEffect, useRef } from 'react';
import './style/carousel2.css';
import React, { useState, useEffect, useRef } from "react";
import "./style/carousel2.css";
import { FaArrowLeft, FaArrowRight } from "react-icons/fa";

const Carousel = () => {
const [carouselItems, setCarouselItems] = useState([
{ id: 1, image: '../image/event.JPG', author: '', title: 'devXsphere gaianet', topic: 'meetup' },
{ id: 2, image: '../image/event 2.JPG', author: 'Author 2', title: 'Title 2', topic: 'Topic 2' },
{ id: 3, image: '../image/event 3.JPG', author: 'Author 3', title: 'Title 3', topic: 'Topic 3' },
{ id: 4, image: '../image/event4.jpg', author: 'Author 4', title: 'Title 4', topic: 'Topic 4' }
{
id: 1,
image: "../image/event.JPG",
author: "",
title: "devXsphere gaianet",
topic: "meetup",
},
{
id: 2,
image: "../image/event 2.JPG",
author: "Author 2",
title: "Title 2",
topic: "Topic 2",
},
{
id: 3,
image: "../image/event 3.JPG",
author: "Author 3",
title: "Title 3",
topic: "Topic 3",
},
{
id: 4,
image: "../image/event4.jpg",
author: "Author 4",
title: "Title 4",
topic: "Topic 4",
},
]);

const timeRunning = 1000;
Expand All @@ -83,25 +107,28 @@ const Carousel = () => {

useEffect(() => {
const runNextAuto = setTimeout(() => {
showSlider('next');
showSlider("next");
}, timeAutoNext);

return () => clearTimeout(runNextAuto);
}, [carouselItems]);

const showSlider = (type) => {
if (type === 'next') {
if (type === "next") {
setCarouselItems((prevItems) => [...prevItems.slice(1), prevItems[0]]);
carouselRef.current.classList.add('next');
carouselRef.current.classList.add("next");
} else {
setCarouselItems((prevItems) => [prevItems[prevItems.length - 1], ...prevItems.slice(0, -1)]);
carouselRef.current.classList.add('prev');
setCarouselItems((prevItems) => [
prevItems[prevItems.length - 1],
...prevItems.slice(0, -1),
]);
carouselRef.current.classList.add("prev");
}

clearTimeout(timeRef.current);
timeRef.current = setTimeout(() => {
carouselRef.current.classList.remove('next');
carouselRef.current.classList.remove('prev');
carouselRef.current.classList.remove("next");
carouselRef.current.classList.remove("prev");
}, timeRunning);
};

Expand Down Expand Up @@ -132,8 +159,20 @@ const Carousel = () => {

{/* Carousel Controls */}
<div className="arrows">
<button id="prev" onClick={() => showSlider('prev')} className='opacity-60'><FaArrowLeft/></button>
<button id="next" onClick={() => showSlider('next')} className='opacity-60'><FaArrowRight/></button>
<button
id="prev"
onClick={() => showSlider("prev")}
className="opacity-60"
>
<FaArrowLeft />
</button>
<button
id="next"
onClick={() => showSlider("next")}
className="opacity-60"
>
<FaArrowRight />
</button>
</div>
</div>
</div>
Expand Down
149 changes: 149 additions & 0 deletions frontend/src/components/Faq.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import React from "react";

const Faq = () => {
return (
<section className="bg-light py-3 py-md-5">
<div className="container">
<div className="row gy-5 gy-lg-0 align-items-lg-center">
<div className="col-12 col-lg-6">
<img
className="img-fluid rounded"
loading="lazy"
src="./assets/img/faq-img-1.png"
alt="How can we help you?"
/>
</div>
<div className="col-12 col-lg-6">
<div className="row justify-content-xl-end">
<div className="col-12 col-xl-11">
<h2 className="h1 mb-3">How can we help you?</h2>
<p className="lead fs-4 text-secondary mb-5">
We hope you have found an answer to your question. If you need
any help, please search your query on our Support Center or
contact us via email.
</p>
<div
className="accordion accordion-flush"
id="accordionExample"
>
<div className="accordion-item">
<h2 className="accordion-header" id="headingOne">
<button
className="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
How Do I Change My Billing Information?
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<p>
To change your billing information, please follow
these steps:
</p>
<ul>
<li>
Go to our website and sign in to your account.
</li>
<li>
Click on your profile picture in the top right
corner of the page and select "Account Settings."
</li>
<li>
Under the "Billing Information" section, click on
"Edit."
</li>
<li>Make your changes and click on "Save."</li>
</ul>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingTwo">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
How Does Payment System Work?
</button>
</h2>
<div
id="collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
A payment system is a way to transfer money from one
person or organization to another. It is a complex
process that involves many different parties, including
banks, credit card companies, and merchants.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
How Do I Cancel My Account?
</button>
</h2>
<div
id="collapseThree"
className="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<p>
To cancel your account, please follow these steps:
</p>
<ul>
<li>
Go to our website and sign in to your account.
</li>
<li>
Click on your profile picture in the top right
corner of the page and select "Account Settings."
</li>
<li>
Scroll to the bottom of the page and click on
"Cancel Account."
</li>
<li>
Enter your password and click on "Cancel Account."
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};

export default Faq;
Loading