diff --git a/src/components/WhyChooseCodeHarbor.tsx b/src/components/WhyChooseCodeHarbor.tsx new file mode 100644 index 000000000..ad61d9391 --- /dev/null +++ b/src/components/WhyChooseCodeHarbor.tsx @@ -0,0 +1,113 @@ +import Link from "@docusaurus/Link"; +import { + BookOpen, + Code2, + Users2, + Zap, + Trophy, + Github +} from 'lucide-react'; + +const reasons = [ + { + title: "Free Education", + desc: "Comprehensive tech curriculum taught by industry masters, 100% free.", + icon: , + }, + { + title: "Open Source", + desc: "Contribute to real-world projects and build your GitHub profile.", + icon: , + }, + { + title: "Live Editor", + desc: "Practice coding in real-time with our integrated browser-based IDE.", + icon: , + }, + { + title: "Active Community", + desc: "Join over 100+ contributors and thousands of learners worldwide.", + icon: , + }, + { + title: "DSA Mastery", + desc: "Curated problems and solutions to help you crack technical interviews.", + icon: , + }, + { + title: "Expert Guidance", + desc: "Roadmaps and tutorials designed for both beginners and pros.", + icon: , + }, +]; + +const WhyChooseCodeHarbor = () => { + return ( +
+ {/* Subtle Background Pattern */} +
+ +
+ +
+ + {/* Header */} +
+ + Why CodeHarborHub? + +

+ Empowering Your Tech Journey +

+

+ We shatter limitations by offering an exclusive open-source platform for mastering + in-demand skills and launching your dream career. +

+
+ + {/* Feature Grid */} +
+ {reasons.map((item, index) => ( +
+ {/* Animated Glow Effect */} +
+ + {/* Icon Container */} +
+ {item.icon} +
+ + {/* Content */} +

+ {item.title} +

+

+ {item.desc} +

+ + {/* Bottom Accent Line */} +
+
+ ))} +
+ + {/* Call to Action */} +
+ + + Join Our Open Source Mission + +
+ +
+
+ ); +}; + +export default WhyChooseCodeHarbor; \ No newline at end of file diff --git a/src/data/team.ts b/src/data/team.ts new file mode 100644 index 000000000..372f2d9e6 --- /dev/null +++ b/src/data/team.ts @@ -0,0 +1,68 @@ +export interface Socials { + github?: string; + twitter?: string; + linkedin?: string; +} + +export interface Member { + slug: string; + name: string; + role: string; + image: string; + bio: string; + email: string; + location: string; + skills: string[]; + socials: Socials; +} + +export const teamMembers: Member[] = [ + { + slug: "ajay-dhangar", + name: "Ajay Dhangar", + role: "Founder & CEO", + image: "https://github.com/ajay-dhangar.png", + bio: "Visionary developer and open-source advocate. Ajay founded CodeHarborHub to democratize tech education and build a collaborative ecosystem for developers worldwide.", + email: "ajaydhangar49@gmail.com", + location: "Mandsaur, MP, India", + skills: ["Full Stack Dev", "System Design", "Open Source", "Leadership"], + socials: { + twitter: "https://x.com/CodesWithAjay", + github: "https://github.com/ajay-dhangar", + linkedin: "https://www.linkedin.com/in/ajay-dhangar/", + }, + }, + { + slug: "sarah-jenkins", + name: "Sarah Jenkins", + role: "Full Stack Developer", + image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=500", + bio: "Expert in building scalable MERN stack applications. Sarah leads the frontend architecture and ensures a seamless user experience across the platform.", + email: "sarah@example.com", + location: "London, UK", + skills: ["React", "Node.js", "MongoDB", "Tailwind CSS"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, + { + slug: "jhon-smith", + name: "Jhon Smith", + role: "Web Designer", + image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=500", + bio: "Passionate about clean UI and accessible design. Jhon crafts the visual identity of CodeHarborHub, making complex documentation easy to navigate.", + email: "jhon@example.com", + location: "New York, USA", + skills: ["UI/UX", "Figma", "Accessibility", "CSS3"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, + { + slug: "jake-nackos", + name: "Product Manager", + role: "Product Manager", + image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=500", + bio: "Strategist focused on community growth. Jake bridges the gap between user feedback and technical implementation to keep our roadmap on track.", + email: "jake@example.com", + location: "Berlin, Germany", + skills: ["Product Strategy", "Agile", "Community Building"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, +]; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d592c4aa0..c158e4915 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,6 +13,7 @@ import { CommunityStatsProvider } from "../context/CommunityStats"; import Faq from "./Faq"; import Organizations from "../components/HomePage/organizations"; import TweetsSection from "../components/HomePage/TweetsSection"; +import WhyChooseCodeHarbor from "../components/WhyChooseCodeHarbor"; export default function Home() { const { siteConfig } = useDocusaurusContext(); @@ -42,6 +43,12 @@ export default function Home() {
+
+ +
+ +
+
@@ -80,4 +87,4 @@ export default function Home() { ); -} +} \ No newline at end of file diff --git a/src/pages/our-team/details.tsx b/src/pages/our-team/details.tsx new file mode 100644 index 000000000..09e0f82fc --- /dev/null +++ b/src/pages/our-team/details.tsx @@ -0,0 +1,226 @@ +import { useLocation } from "@docusaurus/router"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import { teamMembers } from "@site/src/data/team"; +import { + Github, + Twitter, + Linkedin, + Mail, + MapPin, + Terminal, + CheckCircle2, + ChevronRight, Home +} from "lucide-react"; + +const Header = ({ memberName }) => { + return ( +
+ + {/* 1. Animated Background Mesh Pattern */} +
+
+ {/* 2. Gradient Glows */} +
+
+
+ +
+ {/* Badge Style Subtitle */} + + Member Profile + + + {/* Dynamic Title with Text Gradient */} +

+ Member + Information + +

+ + {/* 3. Breadcrumbs */} + +
+ + {/* 4. Bottom Decorative Divider */} +
+ + {/* Internal CSS for the text gradient animation */} + +
+ ); +}; + +export default function MemberDetailsPage() { + const { siteConfig } = useDocusaurusContext(); + const location = useLocation(); + + // Get slug from URL: /our-team/details?member=ajay-dhangar + const params = new URLSearchParams(location.search); + const memberSlug = params.get("member"); + + const member = teamMembers.find((m) => m.slug === memberSlug); + + if (!member) { + return ( + +
+

Member not found

+ + Back to Team + +
+ + ); + } + + return ( + +
+ {/* Header Section */} + +
+ +
+
+ {/* Left Column: Image with Skewed Label (Branding from your image) */} +
+
+ {member.name} + + {/* Brand Skew Label */} +
+
+

+ {member.name} +

+

+ {member.role} +

+
+
+ + {/* Social Sidebar */} + +
+
+ + {/* Right Column: Bio & Skills */} +
+
+

Biography

+

+ {member.bio} +

+
+ + {/* Contact Info Grid */} +
+
+ +
+

+ Email +

+

{member.email}

+
+
+
+ +
+

+ Location +

+

{member.location}

+
+
+
+ + {/* Skills Ability */} +
+

+ + Skills & Abilities +

+
+ {member.skills.map((skill, idx) => ( +
+ + {skill} +
+ ))} +
+
+
+
+
+
+ + ); +} diff --git a/src/pages/our-team/index.tsx b/src/pages/our-team/index.tsx new file mode 100644 index 000000000..7cc5c936b --- /dev/null +++ b/src/pages/our-team/index.tsx @@ -0,0 +1,150 @@ +import Link from "@docusaurus/Link"; +import Layout from "@theme/Layout"; +import { Github, Linkedin, Twitter, Rocket, Heart, Code, Coffee } from "lucide-react"; +import { teamMembers } from '@site/src/data/team'; + +export default function TeamPage() { + + return ( + + {/* 1. Hero / Header Section */} +
+
+
+
+ +
+

+ The Faces Behind CodeHarborHub +

+

+ We are a global collective of developers, designers, and educators + united by a single mission: to make high-quality tech education + accessible, open-source, and community-driven. +

+
+ + Meet the Team + + + Join as Contributor + +
+
+
+ + {/* 2. Values Section (More Info) */} +
+
+
+
+
+

Open Source First

+

Everything we build is public. We believe the best way to learn is by contributing to real-world software.

+
+
+
+

Community Driven

+

Our roadmap is shaped by our learners. We grow together by sharing knowledge and peer-reviewing code.

+
+
+
+

Career Focused

+

We don't just teach syntax; we teach the industry standards, DSA, and architecture required for top tech roles.

+
+
+
+
+ + {/* 3. Team Grid Section */} +
+
+
+
+

+ Our Core Team +

+

+ Meet the leadership team ensuring CodeHarborHub remains the #1 destination for open-source learning. +

+
+
+ + Fuelled by 100+ contributors +
+
+ +
+ {teamMembers.map((member) => ( +
+ {member.name} + +
+ +
+
+
+ +

+ {member.name} +

+ +

+ {member.role} +

+
+ +
+ + + +
+
+
+
+
+ ))} +
+
+
+ + {/* 4. Join Us CTA Section (Increasing Content) */} +
+
+
+
+
+
+ +

Want to Join the Crew?

+

+ CodeHarborHub is always looking for passionate developers, technical writers, + and mentors. If you love open source and helping others grow, we'd love to have you. +

+
+ + Start Contributing + + + Contact Us + +
+
+
+ + ); +} \ No newline at end of file