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

Added animation through out the website #261

Merged
merged 1 commit into from
Oct 26, 2024
Merged

Added animation through out the website #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 24 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@splinetool/runtime": "^1.0.67",
"@splinetool/viewer": "^1.0.67",
"antd": "^5.21.3",
"aos": "^3.0.0-beta.6",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
Expand Down
6 changes: 6 additions & 0 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import NotFound from "./component/NotFound";
// import MiniChatbot from "./component/MiniChatbot";
import ProgressBar from "./component/ProgressBar/ProgressBar";
import ProtectedRoute from '../../client/src/component/ProtectedRoute'
import AOS from 'aos';
import 'aos/dist/aos.css';

// Main Layout Component

Expand Down Expand Up @@ -125,6 +127,10 @@ function App() {
}
};

useEffect(() => {
AOS.init();
}, [])

return (
<div className="h-full w-screen">
<ProjectState>
Expand Down
40 changes: 20 additions & 20 deletions client/src/component/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export default function About(props) {

return (
<div>
<div
className="about-content container h-[100vh] px-[2rem] mt-[10vh]"
style={{
background: props.mode === "dark" ? "#121212" : "#ffffff",
color: props.mode === "dark" ? "white" : "black",
}}
>
<div
className="about-content container h-[100vh] px-[2rem] mt-[10vh]"
style={{
background: props.mode === "dark" ? "#121212" : "#ffffff",
color: props.mode === "dark" ? "white" : "black",
}}
>
<section className="about-main-section">
<div className="about-content-left">
<div className="about-content-left" data-aos="fade-right" data-aos-duration="1300">
<h2 className="Heading-Page !bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent ">About Us</h2>
<div className="about-section-desc w-[70%] text-sm leading-relaxed mx-auto fs-4">
Bitbox is like a friendly community where people working on
Expand Down Expand Up @@ -83,7 +83,7 @@ export default function About(props) {
<div className="tracker tr-23"></div>
<div className="tracker tr-24"></div>
<div className="tracker tr-25"></div>
<div id="card">
<div id="card" data-aos="fade-left" data-aos-duration="1300">
<img src={AboutImgHero} id="propmpt" alt="aboutVectorImg" />
</div>
</div>
Expand All @@ -97,12 +97,12 @@ export default function About(props) {
<div className="Team-Sec">
<div className="px-[2.5rem] m-0 text-center">
<div className="team-content">
<h2 className="Heading-Page">
<h2 className="Heading-Page" data-aos="zoom-in" data-aos-duration="1400">
Our <span className="!bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent ">Team</span>
</h2>
<div className="team-grid container ">
{/* card 1 */}
<div className="team-card">
<div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="100">
<div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
<b>Anuj Verma</b> is a tech-savvy person who loves working with AI and building websites. He&apos;s gained experience through internships and projects, showing that he&apos;s ready to do great things in the tech world.
</div>
Expand All @@ -127,7 +127,7 @@ export default function About(props) {
</div>
</div>
{/* card 2 */}
<div className="team-card">
<div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="300">
<div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
<b>Jitendra Kumar</b>: Tech enthusiast skilled in web development and database management, showcasing expertise in projects like weather app and algorithm analyzer, poised for impactful contributions in the tech industry.
</div>
Expand All @@ -152,7 +152,7 @@ export default function About(props) {
</div>
</div>
{/* card 3 */}
<div className="team-card">
<div className="team-card" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="500">
<div className="team-text" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>
<b>Harshit Singh</b>: Entry-level software engineer skilled in C, C++, Python, HTML, CSS, and JavaScript. Eager to leverage abilities in problem-solving and project development for organizational growth.
</div>
Expand Down Expand Up @@ -186,12 +186,12 @@ export default function About(props) {
<div className="Team-Sec">
<div className="visitors-container">
<div className="visitors-content">
<h2 className="Heading-Page">
<h2 className="Heading-Page" data-aos='zoom-in'>
Visitors
</h2>
<div className="container">
<div className="row">
<div className="col-md-3 col-sm-6">
<div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="100">
<div className="counter">
<div className="counter-icon">
<FontAwesomeIcon icon={faUser} />
Expand All @@ -200,7 +200,7 @@ export default function About(props) {
<h3>VisitorCount</h3>
</div>
</div>
<div className="col-md-3 col-sm-6">
<div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="300">
<div className="counter blue">
<div className="counter-icon" style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>
{/* <i className="fa fa-youtube"></i> */}
Expand All @@ -210,7 +210,7 @@ export default function About(props) {
<h3 style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>Registrations</h3>
</div>
</div>
<div className="col-md-3 col-sm-6">
<div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="500">
<div className="counter">
<div className="counter-icon">
<i className="fa-solid fa-user-group"></i>
Expand All @@ -219,7 +219,7 @@ export default function About(props) {
<h3>Participants</h3>
</div>
</div>
<div className="col-md-3 col-sm-6">
<div className="col-md-3 col-sm-6" data-aos="fade-up" data-aos-duration="1700" data-aos-delay="700">
<div className="counter blue">
<div className="counter-icon" style={{ color: props.mode === 'dark' ? 'white' : '#4accdb' }}>
{/* <i className="fa fa-rocket"></i> */}
Expand All @@ -237,14 +237,14 @@ export default function About(props) {
{/* FAQ */}
<div className="accordion-container">

<div className="faq-section">
<div className="faq-section" data-aos="fade-up" data-aos-duration="1700">
<div className="container">
<h2 className="Heading-Page mb-7">Frequently Asked <span className="!bg-gradient-to-r from-cyan-500 to-blue-500 !bg-clip-text !text-transparent ">Questions</span></h2>
<section>
<div className="accordion" id="accordionExample">
<div className="accordion-item">
<h2 className="accordion-header flex justify-center">
<button className="accordion-button collapsed fs-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style={{background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
<button className="accordion-button collapsed fs-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
Will a beginner, with absolutely no knowledge of github, gain
anything fruitful?
</button>
Expand Down
10 changes: 5 additions & 5 deletions client/src/component/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const Footer = (props) => {
{/* Footer container with dynamic background color */}
<div className="Footer" style={{ backgroundColor: props.mode === 'dark' ? '#0B192C' : 'white' }}>
<div className="container">
<div className='mb-4'>
<div className='mb-4' data-aos="fade-up" data-aos-duration='1500'>
<h4 className="text-3xl font-semibold text-center text-black mb-4">Subscribe to our Newsletter</h4>
<form
className="flex flex-col items-center gap-4 md:flex-row md:justify-center"
Expand Down Expand Up @@ -117,7 +117,7 @@ const Footer = (props) => {
</div>
<div className="row">
{/* Left section with branding and social icons */}
<div className="col-md-6 col-lg-5 col-12 ft-1">
<div className="col-md-6 col-lg-5 col-12 ft-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1800">
<h3 style={{ fontFamily: "medium", fontSize: "2.5rem" }}>
BIT<span className='code' style={{ color: "#0D92F4" }}>BOX</span>
</h3>
Expand All @@ -143,7 +143,7 @@ const Footer = (props) => {
</div>

{/* Middle section with About links */}
<div className="col-md-6 col-lg-3 col-12 ft-2">
<div className="col-md-6 col-lg-3 col-12 ft-2" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1800">
<h5>About</h5>
<ul>
<li className="nav-item">
Expand All @@ -156,7 +156,7 @@ const Footer = (props) => {
</div>

{/* Right section with Legal links */}
<div className="col-md-7 col-lg-4 col-13 ft-3">
<div className="col-md-7 col-lg-4 col-13 ft-3" data-aos="fade-up" data-aos-delay='500' data-aos-duration="1800">
<h5>Legals</h5>
<ul>
<li className="nav-item">
Expand All @@ -176,7 +176,7 @@ const Footer = (props) => {

{/* Last footer section with copyright info */}
<div className='Last-footer'>
<p className='copy-content'>
<p className='copy-content' data-aos="fade-up" data-aos-offset="30">
© 2024 Bitbox.&nbsp; Made with 🤍 by Bitbox India.&nbsp; All rights reserved.
</p>
</div>
Expand Down
11 changes: 7 additions & 4 deletions client/src/component/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ const Home = (props) => {
<CardsPage />

{/* Service Section */}
<div className="service-section" style={{ marginTop: "5rem", background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
<div className="service-section" style={{ marginTop: "5rem", background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }} data-aos="fade-up" data-aos-duration='1600'>
<div className='text-center' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>We&apos;re Still</div>
<h1 className="service-heading text-center" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Cooking Our Service</h1>
<div className="service-description text-center" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>We are going to launch our service Very Soon,</div>
Expand All @@ -224,7 +224,7 @@ const Home = (props) => {
</div>
{/* Works Section */}
<div className="work-Sec mb-2" style={{ background: props.mode === 'dark' ? 'black' : '#f7f7f7', color: props.mode === 'dark' ? 'white' : 'black' }}>
<h2 className='work-heading' style={{ textAlign: 'center', marginBottom: '1rem', fontWeight: 'bold', textTransform: 'uppercase' }}>
<h2 className='work-heading' style={{ textAlign: 'center', marginBottom: '1rem', fontWeight: 'bold', textTransform: 'uppercase' }} data-aos="zoom-out">
What We Work On
</h2>

Expand All @@ -236,6 +236,9 @@ const Home = (props) => {
<div
key={index}
className="py-16 px-3 rounded-2xl border-blue-main border-2 space-y-3 transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-main hover:shadow-lg group"
data-aos='zoom-in'
data-aos-delay={100 * index}
data-aos-duration='1700'
>
<h3 className="font-semibold text-[28px] text-center text-blue-main group-hover:text-white">
{word.title}
Expand Down Expand Up @@ -278,8 +281,8 @@ const Home = (props) => {
{/* Technology Section */}
<div className='Technology-Sec' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
<div className="Technology-Container">
<h2 className='Heading-Page mb-4' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Project Technology</h2>
<div className="content">
<h2 className='Heading-Page mb-4' style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }} data-aos="zoom-out">Project Technology</h2>
<div className="content" data-aos="zoom-in" data-aos-duration="1700">
<div className="benefits">
<div className="basic-marquee basic-marquee-1">
<a className="social-media-link" href="#">
Expand Down
4 changes: 4 additions & 0 deletions client/src/component/HomePage/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const CardsPage = (props) => {
<h2
className="font-bold text-blue-main text-4xl md:text-5xl lg:text-[3.5rem] pt-16"
style={{ color: props.mode === "dark" ? "white" : "" }}
data-aos='zoom-out'
>
Be a part of Bitbox Community
</h2>
Expand All @@ -37,6 +38,9 @@ const CardsPage = (props) => {
<div
key={index}
className="py-16 px-5 rounded-2xl border-blue-main border-2 space-y-3 transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-main hover:shadow-lg group"
data-aos='zoom-in'
data-aos-delay={100 * index}
data-aos-duration='1700'
>
<h3 className="font-semibold text-[28px] text-center text-blue-main group-hover:text-white">
{card.title}
Expand Down
6 changes: 3 additions & 3 deletions client/src/component/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
}

return (
<div className="h-screen flex items-center justify-center">
<div className="h-screen flex items-center justify-center" data-aos="zoom-in" data-aos-duration="1800">
{userLoggedIn && navigate('/')}
<div
className="wrapper h-3/4 mt-10"
Expand Down Expand Up @@ -136,7 +136,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {

<button className="submit" type="submit" disabled={loading}>
{loading ? <Spin size="small" /> : "Login"}
</Button>
</button>
<button
disabled={isloggedin}
onClick={(e) => { onGoogleSignIn(e) }}
Expand All @@ -155,7 +155,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
</defs>
</svg>
{isloggedin ? 'Signing In...' : 'Continue with Google'}

</button>

<p
Expand Down
6 changes: 4 additions & 2 deletions client/src/component/Testimonial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,13 @@ const Testimonial = () => {

return (
<div>
<h1 className='text-center text-5xl'>
<h1 className='text-center text-5xl' data-aos="zoom-out">
See What our client say&apos;s about us !
</h1>

<div className="slider" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}>
<div className="slider" style={{ position: 'relative', marginTop: '100px', width: '100%', height: '550px', overflow: 'hidden' }}
data-aos='zoom-in'
data-aos-duration='1700'>
{items.map((item, index) => (
<div className="item max-sm:!w-[300px] max-sm:!h-[430px] bg-blue-700 text-white" key={index} style={{
position: 'absolute',
Expand Down
Loading