Merge pull request #10 from chhakuli123/issue-9-explore-projects-section

Build the Explore projects section
chhakuli123 · Jul 7, 2024 · b589596 · b589596
2 parents 40d2337 + c734545
commit b589596
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 1 deletion.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,7 +25,9 @@ type RootLayoutProps = Readonly<{
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
-      <body className={`min-h-screen font-sans antialiased ${inter.className}`}>
+      <body
+        className={`min-h-scree bg-primary-950 antialiased ${inter.className}`}
+      >
         {children}
       </body>
     </html>

diff --git 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 = () => {
     <div className="bg-primary-950">
       <Navbar />
       <HeroSection />
+      <ExploreProjectsSection />
       <FeaturesSection />
       <Footer />
     </div>

diff --git a/src/components/home/section/ExploreProjectsSection.tsx 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 (
+    <section className="relative py-20">
+      <div className="container mx-auto px-4">
+        <motion.h2
+          className="mb-6 text-center text-5xl font-bold text-white"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          Explore Projects{' '}
+        </motion.h2>
+        <motion.p
+          className="mx-auto mb-16 max-w-3xl text-center text-xl text-gray-300"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+        >
+          Dive into our showcase projects and experience the power of
+          CodeCompass in action.
+        </motion.p>
+
+        <div className="relative">
+          {/* Vertical Timeline */}
+          <div className="absolute bottom-0 left-1/2 top-0 w-1 -translate-x-1/2 transform rounded-lg bg-green-600"></div>
+
+          {projects.map((project, index) => (
+            <React.Fragment key={index}>
+              <ProjectCard {...project} isRight={index % 2 === 0} />
+              {/* Timeline Node */}
+              <div
+                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"
+                style={{ top: `${(index + 0.5) * (100 / projects.length)}%` }}
+              ></div>
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ExploreProjectsSection;
diff --git a/src/components/home/section/ProjectCart.tsx 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<ProjectCardProps> = ({
+  title,
+  description,
+  language,
+  lastUpdated,
+  stars,
+  contributors,
+  isRight,
+}) => (
+  <motion.div
+    className={`flex ${isRight ? 'justify-start' : 'justify-end'}  relative`}
+    initial={{ opacity: 0, x: isRight ? 100 : -100 }}
+    whileInView={{ opacity: 1, x: 0 }}
+    viewport={{ once: true }}
+    transition={{ duration: 0.6 }}
+  >
+    <div
+      className={`w-full md:w-5/12 ${
+        isRight ? 'md:ml-auto md:pr-8' : 'md:mr-auto md:pl-8'
+      }`}
+    >
+      <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">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center">
+            <LuCode className="mr-2 text-green-300" size={24} />
+            <h3 className="text-xl font-bold text-white">{title}</h3>
+          </div>
+          <span className="rounded-full bg-green-900 px-3 py-1 text-sm font-semibold text-green-300">
+            {language}
+          </span>
+        </div>
+        <p className="mb-4 text-gray-300">{description}</p>
+        <div className="flex items-center justify-between text-gray-300">
+          <div className="flex items-center space-x-4">
+            <span className="flex items-center">
+              <LuStar className="mr-1" /> {stars}
+            </span>
+            <span className="flex items-center">
+              <LuUsers className="mr-1" /> {contributors}
+            </span>
+          </div>
+          <span className="text-sm">Updated {lastUpdated}</span>
+        </div>
+        <div className="mt-4 flex justify-end">
+          <button className="flex items-center rounded-full bg-green-500 px-4 py-2 text-white transition-colors duration-300 hover:bg-green-400">
+            Explore <LuChevronRight className="ml-1" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </motion.div>
+);
+
+export default ProjectCard;
diff --git a/src/components/home/section/helper/projects.ts 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
@@ -0,0 +1 @@
+export type { ProjectCardProps } from './interface/projectCard';
diff --git a/types/interface/projectCard.ts 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;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type { ProjectCardProps } from './interface/projectCard';