Skip to content

Commit c331a92

Browse files
ShivanshPlaysShivanshPlays
authored
Merge branch 'Bitbox-Connect:main' into modal
2 parents 8102b9e + 41b3b98 commit c331a92

File tree

2 files changed

+115
-57
lines changed

2 files changed

+115
-57
lines changed

Diff for: ‎client/src/component/Home.jsx

+110-54
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,40 @@ import CardsPage from './HomePage/Card';
99
import { motion } from 'framer-motion'; // Importing framer-motion
1010
import './Home.css';
1111

12-
const worddata =[
12+
const worddata = [
1313
{
14-
title:"Community Collaboration",
15-
content:"Engage with a diverse community of developers, designers, and enthusiasts passionate about creating impactful software.",
16-
14+
title: "Community Collaboration",
15+
content: "Engage with a diverse community of developers, designers, and enthusiasts passionate about creating impactful software.",
16+
1717
},
1818
{
19-
title:"Transparency and Accessibility",
20-
content:"Explore endless possibilities for innovation by harnessing the collective creativity of a global network of contributors",
21-
19+
title: "Transparency and Accessibility",
20+
content: "Explore endless possibilities for innovation by harnessing the collective creativity of a global network of contributors",
21+
2222
},
2323
{
24-
title:"Innovation and Creativity",
25-
content:"Explore endless possibilities for innovation by harnessing the collective creativity of a global network of contributors",
26-
24+
title: "Innovation and Creativity",
25+
content: "Explore endless possibilities for innovation by harnessing the collective creativity of a global network of contributors",
26+
2727
},
2828
{
29-
title:"Flexibility and Customization",
30-
content:"Customize and adapt open-source projects to suit your specific needs, empowering you to build solutions tailored to your requirements.",
29+
title: "Flexibility and Customization",
30+
content: "Customize and adapt open-source projects to suit your specific needs, empowering you to build solutions tailored to your requirements.",
3131
},
3232
{
33-
title:"Learning and Skill Development",
34-
content:"Accelerate your learning and skill development through hands-on collaboration, mentorship, and continuous feedback within the open-source community.",
33+
title: "Learning and Skill Development",
34+
content: "Accelerate your learning and skill development through hands-on collaboration, mentorship, and continuous feedback within the open-source community.",
3535
},
3636
{
37-
title:"Global Impact",
38-
content:"Make a meaningful impact on a global scale by contributing to projects that address real-world challenges and improve the lives of people everywhere.",
37+
title: "Global Impact",
38+
content: "Make a meaningful impact on a global scale by contributing to projects that address real-world challenges and improve the lives of people everywhere.",
3939
},
40-
40+
4141

4242
]
4343

4444
const Home = (props) => {
45+
const text = "Bitbox Community Cornerstone";
4546
return (
4647
<div>
4748
{/* Landing Page Section */}
@@ -61,7 +62,7 @@ const Home = (props) => {
6162
At BitBox, we simplify version control and collaboration by providing a user-friendly platform for developers. Whether you’re a solo programmer or part of a large team, BitBox offers intuitive tools to manage your projects efficiently. Experience fast, reliable performance and seamless integration with modern development workflows. With BitBox, managing and sharing your code becomes a smooth process, enabling you to focus on building better software.
6263
</div>
6364
</div>
64-
<motion.div
65+
<motion.div
6566
className="content-right"
6667
initial={{ opacity: 0, scale: 0.8 }} // Starting state of animation
6768
whileInView={{ opacity: 1, scale: 1 }} // Animation on scroll
@@ -91,25 +92,51 @@ const Home = (props) => {
9192
transition={{ duration: 0.6 }}
9293
viewport={{ once: true }}
9394
>
94-
Bitbox Community Cornerstone
95+
{text.split('').map((char, index) => (
96+
<motion.span
97+
key={index} // Unique key for each character
98+
initial={{ opacity: 0, y: 20 }} // Start with invisible and slightly lower
99+
whileInView={{ opacity: 1, y: 0 }} // Animate to visible and original position
100+
transition={{ duration: 0.6, delay: index * 0.1 }} // Add delay for staggered effect
101+
viewport={{ once: true }} // Animation triggers once when in view
102+
>
103+
{char === ' ' ? '\u00A0' : char} {/* Preserve spaces */}
104+
</motion.span>
105+
))}
95106
</motion.h2>
96107

97108
{/* Grow Section */}
98-
<motion.div
109+
<motion.div
99110
className="flex justify-center items-center"
100111
initial={{ opacity: 0, x: -100 }}
101112
whileInView={{ opacity: 1, x: 0 }}
102113
transition={{ duration: 0.8 }}
103114
viewport={{ once: true }}
104115
>
105-
<img className="w-[500px] rounded-5" src={Grow} alt="Grow" />
106-
<div className="p-5 mt-4 w-[60%]">
107-
<h1 className="display-4">Grow</h1>
116+
117+
<motion.div className="flex justify-center items-center">
118+
<motion.img
119+
whileHover={{ scale: 1.1 }} className="w-[500px] rounded-5"
120+
src={Grow}
121+
alt="Grow"
122+
/>
123+
</motion.div>
124+
<motion.div className="p-5 mt-4 w-[60%]" animate={{ x: [0, 100, 0] }}>
125+
126+
<motion.h1
127+
className="display-4"
128+
initial={{ opacity: 0, x: -100 }}
129+
whileInView={{ opacity: 1, x: 0 }}
130+
transition={{ duration: 0.8 }}
131+
viewport={{ once: true }}
132+
>
133+
Grow
134+
</motion.h1>
108135
<p className="lead">
109136
Within Bitbox&apos;s open-source embrace, ideas flourish, boundless space.
110137
Collaborating minds, a vibrant symphony, innovating together, unlocking our destiny.
111138
</p>
112-
</div>
139+
</motion.div>
113140
</motion.div>
114141

115142
{/* Learn Section */}
@@ -121,27 +148,55 @@ const Home = (props) => {
121148
viewport={{ once: true }}
122149
>
123150
<div className="p-5 mt-4 w-[60%]">
124-
<h1 className="display-4">Learn</h1>
151+
<motion.h1
152+
className="display-4"
153+
initial={{ opacity: 0, x: -100 }}
154+
whileInView={{ opacity: 1, x: 0 }}
155+
transition={{ duration: 0.8 }}
156+
viewport={{ once: true }}
157+
>
158+
Learn
159+
</motion.h1>
125160
<p className="lead">
126161
📚 Within this dynamic ecosystem, ideas are shared freely, nurtured by the collective intellect of passionate developers and enthusiasts alike.
127162
From seasoned veterans to eager newcomers, all are welcomed into the fold, united by a common mission:
128163
to push the boundaries of what&apos;s possible in the realm of digital exchange.
129164
</p>
130165
</div>
131-
<img className="w-[500px] rounded-5" src={Learn} alt="Learn" />
166+
<motion.div className="flex justify-center items-center">
167+
<motion.img
168+
whileHover={{ scale: 1.1 }} className="w-[500px] rounded-5"
169+
src={Learn}
170+
alt="Learn"
171+
/>
172+
</motion.div>
132173
</motion.div>
133174

134175
{/* Share Section */}
135-
<motion.div
176+
<motion.div
136177
className="flex justify-center items-center my-5"
137178
initial={{ opacity: 0, x: -100 }}
138179
whileInView={{ opacity: 1, x: 0 }}
139180
transition={{ duration: 0.8 }}
140181
viewport={{ once: true }}
141182
>
142-
<img className="w-[500px] rounded-5" src={Share} alt="Share" />
183+
<motion.div className="flex justify-center items-center">
184+
<motion.img
185+
whileHover={{ scale: 1.1 }} className="w-[500px] rounded-5"
186+
src={Share}
187+
alt="Share"
188+
/>
189+
</motion.div>
143190
<div className="p-5 mt-4 w-[60%]">
144-
<h1 className="display-4">Share</h1>
191+
<motion.h1
192+
className="display-4"
193+
initial={{ opacity: 0, x: -100 }}
194+
whileInView={{ opacity: 1, x: 0 }}
195+
transition={{ duration: 0.8 }}
196+
viewport={{ once: true }}
197+
>
198+
Share
199+
</motion.h1>
145200
<p className="lead">
146201
🌐 Join the vibrant Bitbox Open Source Community today! Whether you&apos;re a seasoned developer or just starting out,
147202
there&apos;s a place for you to collaborate, innovate, and make a difference.
@@ -166,35 +221,36 @@ const Home = (props) => {
166221
<img src={glichBitboxGif} alt="bitbox gif" />
167222
</div>
168223
</div>
224+
{/* Works Section */}
225+
<div className="work-Sec mb-2" style={{ background: props.mode === 'dark' ? 'black' : '#f7f7f7', color: props.mode === 'dark' ? 'white' : 'black' }}>
226+
<h2 className='work-heading' style={{ textAlign: 'center', marginBottom: '1rem', fontWeight: 'bold', textTransform: 'uppercase' }}>
227+
What We Work On
228+
</h2>
229+
230+
231+
<div className="work-row1 flex items-center justify-center">
232+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 pt-12 pb-16 ">
233+
{worddata.map((word, index) => (
234+
235+
<div
236+
key={index}
237+
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"
238+
>
239+
<h3 className="font-semibold text-[28px] text-center text-blue-main group-hover:text-white">
240+
{word.title}
241+
</h3>
242+
<p className="font-medium text-blue-main pl-6 group-hover:text-white">
243+
{word.content}
244+
</p>
245+
</div>
169246

247+
))}
248+
</div>
170249

171-
{/* Works Section */}
172-
<div className="work-Sec mb-2" style={{ background: props.mode === 'dark' ? 'black' : '#f7f7f7', color: props.mode === 'dark' ? 'white' : 'black' }}>
173-
<h2 className="work-heading text-center mb-4 font-bold uppercase text-2xl md:text-3xl">
174-
What We Work On
175-
</h2>
176-
177-
{/* Work Row 1 */}
178-
<div className="work-row1 flex items-center justify-center px-4">
179-
<div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-8 pb-12 w-full max-w-6xl">
180-
{worddata.map((word, index) => (
181-
<div
182-
key={index}
183-
className="py-10 px-4 rounded-2xl border-2 border-blue-main space-y-3 transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-main hover:shadow-lg group"
184-
>
185-
<h3 className="font-semibold text-xl md:text-2xl text-center text-blue-main group-hover:text-white">
186-
{word.title}
187-
</h3>
188-
<p className="font-medium text-blue-main group-hover:text-white">
189-
{word.content}
190-
</p>
191250
</div>
192-
))}
193-
</div>
194-
</div>
195251

252+
{/* <div className="work-row2" style={{ marginBottom: "2rem" }}>
196253
197-
{/* <div className="work-row2" style={{ marginBottom: "2rem" }}>
198254
<div className="work-cont1">
199255
<h3 className='text hover-text'>Flexibility and Customization</h3>
200256
<div className="work-description">
@@ -214,7 +270,7 @@ const Home = (props) => {
214270
</div>
215271
</div>
216272
</div>*/}
217-
</div>
273+
</div>
218274

219275

220276
{/* Technology Section */}

Diff for: ‎client/src/component/Navbar.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import logo from "../assets/images/logo.png";
88
import avatarDropdown from "../assets/images/Dropdown/avatar.png";
99
import { auth } from "../component/Firebase/Setup";
1010
import { FaSun } from "react-icons/fa6";
11-
import {FaMoon} from "react-icons/fa6";
11+
import { FaMoon } from "react-icons/fa6";
1212

1313
function Navbar(props) {
1414
const { showAlert, mode } = props;
@@ -122,11 +122,13 @@ function Navbar(props) {
122122
to="/"
123123
>
124124
<img
125-
className="mx-3 logoImg w-[3.5rem] h-[3.5rem] rounded-full"
125+
className="mx-3 logoImg w-[3.5rem] h-[3.5rem] rounded-full transition-transform transform rotate-0 hover:rotate-180 duration-1000 ease-in-out"
126126
src={logo}
127127
alt="logo"
128128
/>
129-
<div className="logoTitle md:block hidden" style={{ color: props.mode === 'dark' ? 'white' : 'black' }}>{props.title}</div>
129+
<div className={`logoTitle md:block hidden ${props.mode === 'dark' ? 'text-white' : 'text-black'}`}>
130+
{props.title}
131+
</div>
130132
</Link>
131133
<div
132134
className={`collapse navbar-collapse justify-content-center ${isOpen ? "show" : ""}`}

0 commit comments

Comments
 (0)