diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1bd67e3..5d255d9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,7 +25,9 @@ type RootLayoutProps = Readonly<{ export default function RootLayout({ children }: RootLayoutProps) { return ( - + {children} diff --git a/src/components/home/Homepage.tsx b/src/components/home/Homepage.tsx index 8c83ff8..5492545 100644 --- a/src/components/home/Homepage.tsx +++ b/src/components/home/Homepage.tsx @@ -1,6 +1,7 @@ import Footer from '@/layout/footer/Footer'; import Navbar from '@/layout/navbar/Navbar'; +import ExploreProjectsSection from './section/ExploreProjectsSection'; import FeaturesSection from './section/FeaturesSection'; import HeroSection from './section/HeroSection'; @@ -9,6 +10,7 @@ const Homepage = () => {
+
diff --git a/src/components/home/section/ExploreProjectsSection.tsx b/src/components/home/section/ExploreProjectsSection.tsx new file mode 100644 index 0000000..b6fd816 --- /dev/null +++ b/src/components/home/section/ExploreProjectsSection.tsx @@ -0,0 +1,51 @@ +'use client'; + +import React from 'react'; +import { motion } from 'framer-motion'; + +import { projects } from './helper/projects'; +import ProjectCard from './ProjectCart'; + +const ExploreProjectsSection = () => { + return ( +
+
+ + Explore Projects{' '} + + + Dive into our showcase projects and experience the power of + CodeCompass in action. + + +
+ {/* Vertical Timeline */} +
+ + {projects.map((project, index) => ( + + + {/* Timeline Node */} +
+ + ))} +
+
+
+ ); +}; + +export default ExploreProjectsSection; diff --git a/src/components/home/section/ProjectCart.tsx b/src/components/home/section/ProjectCart.tsx new file mode 100644 index 0000000..ce69b10 --- /dev/null +++ b/src/components/home/section/ProjectCart.tsx @@ -0,0 +1,59 @@ +import { motion } from 'framer-motion'; +import { LuChevronRight, LuCode, LuStar, LuUsers } from 'react-icons/lu'; + +import { ProjectCardProps } from 'types'; + +const ProjectCard: React.FC = ({ + title, + description, + language, + lastUpdated, + stars, + contributors, + isRight, +}) => ( + +
+
+
+
+ +

{title}

+
+ + {language} + +
+

{description}

+
+
+ + {stars} + + + {contributors} + +
+ Updated {lastUpdated} +
+
+ +
+
+
+ +); + +export default ProjectCard; diff --git a/src/components/home/section/helper/projects.ts b/src/components/home/section/helper/projects.ts new file mode 100644 index 0000000..6ac1498 --- /dev/null +++ b/src/components/home/section/helper/projects.ts @@ -0,0 +1,29 @@ +export const projects = [ + { + title: 'E-commerce Platform', + description: + '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..', + language: 'React', + lastUpdated: 'last year', + stars: 8, + contributors: 1, + }, + { + title: 'CodeCompass.AI', + description: + ' Save time, boost productivity, and ensure seamless knowledge transfer across your organization. Transform how your team navigates project information.', + language: 'NextJS', + lastUpdated: 'a day ago', + stars: 2, + contributors: 2, + }, + { + title: 'Git Repo Parser', + description: + '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.', + language: 'Typescript', + lastUpdated: '3 days ago', + stars: 2, + contributors: 1, + }, +]; diff --git a/types/index.ts b/types/index.ts new file mode 100644 index 0000000..70fe245 --- /dev/null +++ b/types/index.ts @@ -0,0 +1 @@ +export type { ProjectCardProps } from './interface/projectCard'; diff --git a/types/interface/projectCard.ts b/types/interface/projectCard.ts new file mode 100644 index 0000000..35dd413 --- /dev/null +++ b/types/interface/projectCard.ts @@ -0,0 +1,9 @@ +export interface ProjectCardProps { + title: string; + description: string; + language: string; + lastUpdated: string; + stars: number; + contributors: number; + isRight: boolean; +}