feat: creates projects and project item components

components/ProjectItem.jsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+const ProjectItem = ({ title, technology, backgroundImg, projectUrl }) => {
+  return (
+    <div className="relative flex items-center justify-center h-auto w-full shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#7E52A0] to-[#D295BF]">
+      <Image
+        className="rounded-xl group-hover:opacity-10"
+        src={backgroundImg}
+        alt="/"
+      />
+      <div className="hidden group-hover:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
+        <h3 className="text-2xl text-white tracking-widest text-center">
+          {title}
+        </h3>
+        <p className="pb-4 pt-2 text-white text-center">{technology}</p>
+        <Link href={projectUrl}>
+          <p className="text-center py-3 rounded-lg bg-white text-gray-700 font-bold text-lg cursor-pointer">
+            Informações
+          </p>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ProjectItem

components/Projects.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import cerveshopImg from '../public/assets/projects/cerveshopImg.jpg'
+import dragonImg from '../public/assets/projects/dragonImg.jpg'
+import studytimerImg from '../public/assets/projects/studytimerImg.jpg'
+import ProjectItem from './ProjectItem'
+
+const Projects = () => {
+  return (
+    <div className="w-full">
+      <div className="max-w-[1240px] mx-auto px-2 py-16">
+        <p className="text-xl tracking-widest uppercase text-[#803C90]">
+          Projetos
+        </p>
+        <h2 className="py-4">O que eu construí</h2>
+        <div className="grid md:grid-cols-2 gap-8">
+          <ProjectItem
+            title="Cerve Shop"
+            technology="React + TypeScript"
+            backgroundImg={cerveshopImg}
+            projectUrl="/"
+          />
+          <ProjectItem
+            title="Study Timer"
+            technology="React + TypeScript"
+            backgroundImg={studytimerImg}
+            projectUrl="/"
+          />
+          <ProjectItem
+            title="Dragon Ball Login UI"
+            technology="HTML + CSS + JavaScript"
+            backgroundImg={dragonImg}
+            projectUrl="/"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Projects

pages/index.js

@@ -3,6 +3,7 @@ import About from '../components/About'
 
 import Main from '../components/Main'
 import NavBar from '../components/NavBar'
+import Projects from '../components/Projects'
 import Skills from '../components/Skills'
 
 export default function Home() {
@@ -17,6 +18,7 @@ export default function Home() {
       <Main />
       <About />
       <Skills />
+      <Projects />
     </div>
   )
 }