Skip to content

Commit 355adf0

Browse files
Nathan-Bransby-NMTNathan-Bransby-NMT
committed
Modularise react components
1 parent eb58a79 commit 355adf0

File tree

11 files changed

+742
-357
lines changed

11 files changed

+742
-357
lines changed

‎package-lock.json‎

Lines changed: 73 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"@fortawesome/react-fontawesome": "^0.2.2",
1818
"lucide-react": "^0.344.0",
1919
"react": "^18.3.1",
20-
"react-dom": "^18.3.1"
20+
"react-dom": "^18.3.1",
21+
"react-router-dom": "^7.2.0"
2122
},
2223
"devDependencies": {
2324
"@eslint/js": "^9.9.1",

‎src/App.tsx‎

Lines changed: 29 additions & 351 deletions
Large diffs are not rendered by default.

‎src/components/About.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
const About : React.FC = () => {
5+
const [isVisible, setIsVisible] = useState(true);
6+
return (
7+
<div className="container mx-auto px-4 py-8">
8+
{/* Hero Section */}
9+
<section className="mb-12 text-center">
10+
<h1 className="text-4xl font-bold mb-4 text-[#4584b6]">About PyVersify</h1>
11+
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
12+
Empowering developers to write better Python code through modern tools and community collaboration.
13+
</p>
14+
</section>
15+
16+
{/* Mission Statement */}
17+
<section className="mb-12 bg-white rounded-lg shadow-md p-8">
18+
<h2 className="text-2xl font-bold mb-4 text-[#4584b6]">Our Mission</h2>
19+
<p className="text-gray-700 leading-relaxed">
20+
PyVersify aims to revolutionize Python development by providing cutting-edge tools
21+
and fostering a collaborative community. We believe in making Python development
22+
more accessible, efficient, and enjoyable for developers of all skill levels.
23+
</p>
24+
</section>
25+
26+
{/* Values Section */}
27+
<section className="mb-12 grid md:grid-cols-3 gap-12">
28+
<div className={`transform transition-all duration-1000 hover:scale-105 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
29+
<div className="bg-gray-50 p-8 shadow-md rounded-xl border border-gray-100">
30+
<h3 className="text-xl font-bold mb-3 text-[#4584b6]">Innovation</h3>
31+
<p className="text-gray-700">
32+
Pushing the boundaries of what's possible with Python development tools.
33+
</p>
34+
</div>
35+
</div>
36+
<div className={`transform transition-all duration-1000 hover:scale-105 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
37+
<div className="bg-gray-50 p-8 shadow-md rounded-xl border border-gray-100">
38+
<h3 className="text-xl font-bold mb-3 text-[#4584b6]">Community</h3>
39+
<p className="text-gray-700">
40+
Building a supportive ecosystem for Python developers worldwide.
41+
</p>
42+
</div>
43+
</div>
44+
<div className={`transform transition-all duration-1000 hover:scale-105 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
45+
<div className="bg-gray-50 p-8 shadow-md rounded-xl border border-gray-100">
46+
<h3 className="text-xl font-bold mb-3 text-[#4584b6]">Quality</h3>
47+
<p className="text-gray-700">
48+
Maintaining high standards in code quality and developer experience.
49+
</p>
50+
</div>
51+
</div>
52+
</section>
53+
54+
{/* FAQ Link Section */}
55+
<section className="text-center mb-12">
56+
<h2 className="text-2xl font-bold mb-4 text-[#4584b6]">Have Questions?</h2>
57+
<p className="text-gray-700 mb-4">
58+
Check out our frequently asked questions or reach out to our team.
59+
</p>
60+
<Link
61+
to="/faq"
62+
className="inline-block bg-[#4584b6] text-white px-6 py-2 rounded-lg hover:bg-[#3a719b] transition-colors"
63+
>
64+
View FAQ
65+
</Link>
66+
</section>
67+
68+
{/* Contact Section */}
69+
<section className="bg-white rounded-lg shadow-md p-8">
70+
<h2 className="text-2xl font-bold mb-4 text-[#4584b6]">Get in Touch</h2>
71+
<p className="text-gray-700 mb-4">
72+
We're always looking to connect with developers and improve our platform.
73+
</p>
74+
<a
75+
href="mailto:[email protected]"
76+
className="text-[#4584b6] hover:text-[#3a719b] transition-colors"
77+
>
78+
[email protected]
79+
</a>
80+
</section>
81+
</div>
82+
);
83+
};
84+
85+
export default About;

‎src/components/CTA.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { Github } from 'lucide-react';
3+
4+
interface HomeProps {
5+
isVisible: boolean;
6+
}
7+
8+
const CTA: React.FC<HomeProps> = ({ isVisible }) => {
9+
return (
10+
<>
11+
{/* CTA Section */}
12+
<section className="bg-[#4584b6] py-20">
13+
<div className="container mx-auto px-6 text-center">
14+
<div className={`transform transition-all duration-1000 ${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`}>
15+
<h2 className="text-4xl font-bold text-white mb-6">Ready to Join Our Community?</h2>
16+
<p className="text-xl text-white/80 mb-8">Start your Python journey with us today!</p>
17+
<button className="bg-[#ffde57] hover:bg-[#ffd633] text-gray-900 px-8 py-3 rounded-lg font-semibold inline-flex items-center space-x-2 transform transition hover:scale-105">
18+
<Github className="h-5 w-5" />
19+
<span>Join via GitHub</span>
20+
</button>
21+
</div>
22+
</div>
23+
</section>
24+
</>
25+
);
26+
};
27+
28+
export default CTA;

‎src/components/FAQ.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// src/components/FAQ.tsx
2+
import React from 'react';
3+
4+
interface FAQProps {
5+
openFaq: number | null;
6+
setOpenFaq: (index: number | null) => void;
7+
}
8+
9+
const FAQ: React.FC<FAQProps> = ({ openFaq, setOpenFaq }) => {
10+
return (
11+
<section className="bg-[#4784b6] dark:bg-gray-50 rounded-xl bg-opacity-75 m-10 hover:bg-[#3a719b] hover:mx-3 transition-colors duration-1000">
12+
<div className="container px-6 py-12 mx-auto">
13+
<h1 className="text-2xl font-semibold text-black lg:text-4xl dark:text-white">
14+
Frequently asked questions
15+
</h1>
16+
17+
<div className="text-xl mt-8 space-y-8 lg:mt-12">
18+
{[
19+
{
20+
question: "How can I get started with Python programming?",
21+
answer: "Getting started with Python is easy! We recommend beginning with our beginner tutorials, joining our community forums, and practicing with simple coding exercises. Our resources section has everything you need to start your Python journey."
22+
},
23+
{
24+
question: "What resources are available for learning?",
25+
answer: "We offer a wide range of resources including video tutorials, interactive coding challenges, documentation guides, and community-driven projects. All resources are freely available to our community members."
26+
},
27+
{
28+
question: "How can I contribute to the community?",
29+
answer: "There are many ways to contribute! You can share your knowledge in forums, create tutorials, help other members with their questions, or contribute to our open-source projects on GitHub."
30+
},
31+
{
32+
question: "Do I need prior programming experience?",
33+
answer: "No prior programming experience is required! Our resources cater to all skill levels, from complete beginners to advanced developers. We have structured learning paths to guide you."
34+
},
35+
{
36+
question: "How can I connect with other members?",
37+
answer: "You can connect with other members through our community forums, Discord server, regular virtual meetups, and collaborative coding sessions. We encourage active participation and networking!"
38+
}
39+
].map((faq, index) => (
40+
<div key={index} className="p-8 bg-gray-100 rounded-lg dark:bg-gray-800">
41+
<button
42+
className="flex items-center justify-between w-full"
43+
onClick={() => setOpenFaq(openFaq === index ? null : index)}
44+
>
45+
<h1 className="font-semibold text-gray-700 dark:text-white">{faq.question}</h1>
46+
<span className={`${openFaq === index ? 'bg-gray-400' : 'bg-blue-500'} rounded-full p-2`}>
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
className="w-6 h-6 text-white transition-transform duration-800"
50+
fill="none"
51+
viewBox="0 0 24 24"
52+
stroke="currentColor"
53+
style={{
54+
transform: openFaq === index ? 'rotate(180deg)' : 'rotate(0deg)'
55+
}}
56+
>
57+
<path
58+
strokeLinecap="round"
59+
strokeLinejoin="round"
60+
strokeWidth={2}
61+
d={openFaq === index ? "M18 12H6" : "M12 6v6m0 0v6m0-6h6m-6 0H6"}
62+
/>
63+
</svg>
64+
</span>
65+
</button>
66+
67+
{openFaq === index && (
68+
<p className="mt-6 text-sm text-gray-500 dark:text-gray-300 animate-fadeIn duration-50000">
69+
{faq.answer}
70+
</p>
71+
)}
72+
</div>
73+
))}
74+
</div>
75+
</div>
76+
</section>
77+
);
78+
};
79+
80+
export default FAQ;

0 commit comments

Comments
 (0)