Skip to content

Commit b589596

Browse files
chhakuli123chhakuli123
authored
Merge pull request #10 from chhakuli123/issue-9-explore-projects-section
Build the Explore projects section
2 parents 40d2337 + c734545 commit b589596

File tree

7 files changed

+154
-1
lines changed

7 files changed

+154
-1
lines changed

‎src/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ type RootLayoutProps = Readonly<{
2525
export default function RootLayout({ children }: RootLayoutProps) {
2626
return (
2727
<html lang="en">
28-
<body className={`min-h-screen font-sans antialiased ${inter.className}`}>
28+
<body
29+
className={`min-h-scree bg-primary-950 antialiased ${inter.className}`}
30+
>
2931
{children}
3032
</body>
3133
</html>

‎src/components/home/Homepage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Footer from '@/layout/footer/Footer';
22
import Navbar from '@/layout/navbar/Navbar';
33

4+
import ExploreProjectsSection from './section/ExploreProjectsSection';
45
import FeaturesSection from './section/FeaturesSection';
56
import HeroSection from './section/HeroSection';
67

@@ -9,6 +10,7 @@ const Homepage = () => {
910
<div className="bg-primary-950">
1011
<Navbar />
1112
<HeroSection />
13+
<ExploreProjectsSection />
1214
<FeaturesSection />
1315
<Footer />
1416
</div>

‎src/components/home/section/ExploreProjectsSection.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { motion } from 'framer-motion';
5+
6+
import { projects } from './helper/projects';
7+
import ProjectCard from './ProjectCart';
8+
9+
const ExploreProjectsSection = () => {
10+
return (
11+
<section className="relative py-20">
12+
<div className="container mx-auto px-4">
13+
<motion.h2
14+
className="mb-6 text-center text-5xl font-bold text-white"
15+
initial={{ opacity: 0, y: -20 }}
16+
animate={{ opacity: 1, y: 0 }}
17+
transition={{ duration: 0.6 }}
18+
>
19+
Explore Projects{' '}
20+
</motion.h2>
21+
<motion.p
22+
className="mx-auto mb-16 max-w-3xl text-center text-xl text-gray-300"
23+
initial={{ opacity: 0, y: -20 }}
24+
animate={{ opacity: 1, y: 0 }}
25+
transition={{ duration: 0.6, delay: 0.2 }}
26+
>
27+
Dive into our showcase projects and experience the power of
28+
CodeCompass in action.
29+
</motion.p>
30+
31+
<div className="relative">
32+
{/* Vertical Timeline */}
33+
<div className="absolute bottom-0 left-1/2 top-0 w-1 -translate-x-1/2 transform rounded-lg bg-green-600"></div>
34+
35+
{projects.map((project, index) => (
36+
<React.Fragment key={index}>
37+
<ProjectCard {...project} isRight={index % 2 === 0} />
38+
{/* Timeline Node */}
39+
<div
40+
className="absolute left-1/2 top-0 h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-green-400"
41+
style={{ top: `${(index + 0.5) * (100 / projects.length)}%` }}
42+
></div>
43+
</React.Fragment>
44+
))}
45+
</div>
46+
</div>
47+
</section>
48+
);
49+
};
50+
51+
export default ExploreProjectsSection;

‎src/components/home/section/ProjectCart.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { motion } from 'framer-motion';
2+
import { LuChevronRight, LuCode, LuStar, LuUsers } from 'react-icons/lu';
3+
4+
import { ProjectCardProps } from 'types';
5+
6+
const ProjectCard: React.FC<ProjectCardProps> = ({
7+
title,
8+
description,
9+
language,
10+
lastUpdated,
11+
stars,
12+
contributors,
13+
isRight,
14+
}) => (
15+
<motion.div
16+
className={`flex ${isRight ? 'justify-start' : 'justify-end'} relative`}
17+
initial={{ opacity: 0, x: isRight ? 100 : -100 }}
18+
whileInView={{ opacity: 1, x: 0 }}
19+
viewport={{ once: true }}
20+
transition={{ duration: 0.6 }}
21+
>
22+
<div
23+
className={`w-full md:w-5/12 ${
24+
isRight ? 'md:ml-auto md:pr-8' : 'md:mr-auto md:pl-8'
25+
}`}
26+
>
27+
<div className="rounded-xl bg-gradient-to-br from-green-700 to-primary-900 p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
28+
<div className="mb-4 flex items-center justify-between">
29+
<div className="flex items-center">
30+
<LuCode className="mr-2 text-green-300" size={24} />
31+
<h3 className="text-xl font-bold text-white">{title}</h3>
32+
</div>
33+
<span className="rounded-full bg-green-900 px-3 py-1 text-sm font-semibold text-green-300">
34+
{language}
35+
</span>
36+
</div>
37+
<p className="mb-4 text-gray-300">{description}</p>
38+
<div className="flex items-center justify-between text-gray-300">
39+
<div className="flex items-center space-x-4">
40+
<span className="flex items-center">
41+
<LuStar className="mr-1" /> {stars}
42+
</span>
43+
<span className="flex items-center">
44+
<LuUsers className="mr-1" /> {contributors}
45+
</span>
46+
</div>
47+
<span className="text-sm">Updated {lastUpdated}</span>
48+
</div>
49+
<div className="mt-4 flex justify-end">
50+
<button className="flex items-center rounded-full bg-green-500 px-4 py-2 text-white transition-colors duration-300 hover:bg-green-400">
51+
Explore <LuChevronRight className="ml-1" />
52+
</button>
53+
</div>
54+
</div>
55+
</div>
56+
</motion.div>
57+
);
58+
59+
export default ProjectCard;

‎src/components/home/section/helper/projects.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export const projects = [
2+
{
3+
title: 'E-commerce Platform',
4+
description:
5+
'AttireX is a fashion e-commerce website that aims to provide a seamless and enjoyable shopping experience for customers looking to explore and purchase the latest fashion trends..',
6+
language: 'React',
7+
lastUpdated: 'last year',
8+
stars: 8,
9+
contributors: 1,
10+
},
11+
{
12+
title: 'CodeCompass.AI',
13+
description:
14+
' Save time, boost productivity, and ensure seamless knowledge transfer across your organization. Transform how your team navigates project information.',
15+
language: 'NextJS',
16+
lastUpdated: 'a day ago',
17+
stars: 2,
18+
contributors: 2,
19+
},
20+
{
21+
title: 'Git Repo Parser',
22+
description:
23+
'A tool to scrape all files from a GitHub repository and turn it into a JSON or TXT file, Useful for AI and LLM Projects.',
24+
language: 'Typescript',
25+
lastUpdated: '3 days ago',
26+
stars: 2,
27+
contributors: 1,
28+
},
29+
];

‎types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type { ProjectCardProps } from './interface/projectCard';

‎types/interface/projectCard.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export interface ProjectCardProps {
2+
title: string;
3+
description: string;
4+
language: string;
5+
lastUpdated: string;
6+
stars: number;
7+
contributors: number;
8+
isRight: boolean;
9+
}

0 commit comments

Comments
 (0)