projects section added

src/components/about-section.tsx

@@ -67,7 +67,7 @@ const TAB_DATA = [
     title: "Redes",
     id: "redes",
     content: (
-      <div className="text-gray-400 pl-2 space-y-2">
+      <div className="text-gray-400 pl-2 space-y-2" id="contact">
         <Link
           className="flex items-center gap-2"
           href="https://www.linkedin.com/in/luis-felipe-silv/"

src/components/footer.tsx

@@ -1,8 +1,8 @@
 
 export function Footer(){
   return (
-    <footer className="blur-background border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-black">
-        <div className="container  flex justify-between">
+    <footer className="w-full blur-background border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-black">
+        <div className="flex justify-between">
         <span className="text-slate-600">LF</span>
         <p className="text-slate-600">Todos os direitos reservados</p>
       </div>

src/components/project-tag.tsx

@@ -0,0 +1,21 @@
+
+interface ProjectTagProps {
+  name: string;
+  isSelected: boolean;
+  onClick: (name: string) => void;
+}
+
+export function  ProjectTag({ name, isSelected, onClick }: ProjectTagProps){
+  const buttonStyles = isSelected
+  ? "text-black border-primary-500"
+  : "text-black border-green-600";
+
+  return (
+    <button
+      className={`${buttonStyles} rounded-full border-2 shadow-xl px-6 py-3 text-xl cursor-pointer`}
+      onClick={() => onClick(name)}
+    >
+      {name}
+    </button>
+  );
+}

src/components/projects-card.tsx

@@ -0,0 +1,40 @@
+import { CodeIcon } from "lucide-react";
+import Link from "next/link";
+
+interface ProjectCardProps {
+  title: string;
+  description: string;
+  imageUrl: string;
+  link: string;
+}
+
+export function ProjectCard({
+  imageUrl,
+  title,
+  description,
+  link,
+}: ProjectCardProps) {
+  return (
+    <div>
+      <div
+        className="h-60 md:h-72 shadow-lg relative group border border-[#ADB7BE]"
+        style={{ background: `url(${imageUrl})`, backgroundSize: "cover", backgroundPosition: "center" , backgroundRepeat: "no-repeat"}}
+      >
+        <div className="overlay items-center justify-center absolute top-0 left-0 w-full h-full bg-[#181818] bg-opacity-0 hidden group-hover:flex group-hover:bg-opacity-80 transition-all duration-500 ">
+          <Link
+            href={link}
+            className="h-14 w-14 mr-2 border-2 relative rounded-full border-[#ADB7BE] hover:border-white group/link"
+          >
+            <CodeIcon className="h-10 w-10 text-[#ADB7BE] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  cursor-pointer group-hover/link:text-white" />
+          </Link>
+        </div>
+      </div>
+
+      <div className="text-black rounded-b-xl mt-3 bg-[#181818]py-6 px-4">
+        <h5 className="text-xl font-semibold mb-2">{title}</h5>
+        <p className="text-[#ADB7BE]">{description}</p>
+      </div>
+
+    </div>
+  );
+}

src/components/projects-section.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { ProjectTag } from "./project-tag";
+import { ProjectsData } from "@/data/projects-data";
+import { ProjectCard } from "./projects-card";
+
+export function ProjectSection() {
+  const [tag, setTag] = useState("All");
+  const ref = useRef(null);
+  const filteredProjects = ProjectsData.filter((project) =>
+    project.tag.includes(tag)
+  );
+
+  function handleTagChange(newTag: string) {
+    setTag(newTag);
+  }
+
+  return (
+    <section id="projects">
+      <h2 className="text-center text-4xl font-bold text-black mt-4 mb-8 md:mb-12">
+        Meus Projetos
+      </h2>
+      <div className="flex flex-row justify-center items-center gap-2 py-6">
+        <ProjectTag
+          onClick={handleTagChange}
+          name="All"
+          isSelected={tag === "All"}
+        />
+        <ProjectTag
+          onClick={handleTagChange}
+          name="Web"
+          isSelected={tag === "Web"}
+        />
+        <ProjectTag
+          onClick={handleTagChange}
+          name="Mobile"
+          isSelected={tag === "Mobile"}
+        />
+      </div>
+      <ul ref={ref} className="grid md:grid-cols-3 gap-8 md:gap-12">
+        {filteredProjects.map((project, index) => (
+          <ProjectCard
+            key={project.id}
+            title={project.title}
+            description={project.description}
+            imageUrl={project.image}
+            link={project.link}
+          />
+        ))}
+      </ul>
+    </section>
+  );
+}

src/data/projects-data.ts

@@ -0,0 +1,70 @@
+
+
+
+export const ProjectsData = [
+  { 
+    id:1,
+    title: "HealtCare",
+    description: "Sistema de gerenciamento de consultas médicas",
+    image: "/images-projects/healtcare.png",
+    link: "",
+    tag: ["All", "Web"],
+  },
+  {
+    id:2,
+    title: "Planner Io",
+    description: "Sistema para planejar viagens e eventos",
+    image: "/images-projects/planner-io.png",
+    link: "",
+    tag: ["All", "Web"],
+  },
+  {
+    id:3,
+    title: "Gdelivery",
+    description: "Sistema de delivery de alimentos versao mobile",
+    image: "/images-projects/gdelivery.png",
+    link: "",
+    tag: ["All", "Mobile"],
+  },
+  {
+    id:4,
+    title: "MyContacts",
+    description: "Gereciador de contatos",
+    image: "/images-projects/mycontacts.png",
+    link: "",
+    tag: ["All", "Web"],
+  },
+  {
+    id:5,
+    title: "Web Carros",
+    description: "Sistema de gerenciamento de carros",
+    image: "/images-projects/webcarros.png",
+    link: "",
+    tag: ["All", "Web"],
+  },
+  {
+    id:6,
+    title: "Pass In",
+    description: "Aplicaçao Mobile para gerenciamento de inscrições em eventos",
+    image: "/images-projects/pass-in.png",
+    link: "",
+    tag: ["All", "Mobile"],
+  },
+  {
+    id:7,
+    title: "My Goals",
+    description: "Aplicaçao Mobile para gerenciamento de metas financeiras",
+    image: "/images-projects/mygoals.png",
+    link: "",
+    tag: ["Mobile"],
+  },
+  {
+    id:8,
+    title: "Iweather",
+    description: "Aplicaçao Mobile de previsao do tempo usando api do openweather",
+    image: "/images-projects/iweather.png",
+    link: "",
+    tag: ["Mobile"],
+  }
+
+]

src/pages/index.tsx

@@ -2,14 +2,17 @@ import { AboutSection } from "@/components/about-section";
 import { Footer } from "@/components/footer";
 import { HeroSection } from "@/components/hero-section";
 import { Navbar } from "@/components/navbar";
+import { ProjectCard } from "@/components/projects-card";
+import { ProjectSection } from "@/components/projects-section";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen flex-col ">
+    <div className="flex mx-2 min-h-screen flex-col ">
       <Navbar />
       <div className="container mt-36 mx-auto px-18 py-4">
         <HeroSection />
         <AboutSection />
+        <ProjectSection />
       </div>
       <Footer />
     </div>