diff --git a/src/components/Technologies.tsx b/src/components/Technologies.tsx
new file mode 100644
index 0000000..64d7cbf
--- /dev/null
+++ b/src/components/Technologies.tsx
@@ -0,0 +1,128 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import { Box, Image, Text } from '@chakra-ui/react';
+import react from '../images/react.svg';
+import typescript from '../images/typescript.svg';
+import node from '../images/nodejs.svg';
+import go from '../images/golang.svg';
+import nextjs from '../images/nextjs.svg';
+import cucicon from '../images/cucicon.svg';
+
+const cards = [
+ {
+ title: 'React',
+ description: 'React is a JavaScript library for building user interfaces.',
+ image: react,
+ },
+ {
+ title: 'NodeJS',
+ description:
+ "Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.",
+ image: node,
+ },
+ {
+ title: 'NextJS',
+ description:
+ 'Next.js is a framework for server-rendered React applications.',
+ image: nextjs,
+ },
+ {
+ title: 'TypeScript',
+ description:
+ 'TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.',
+ image: typescript,
+ },
+ {
+ title: 'React',
+ description: 'React is a JavaScript library for building user interfaces.',
+ image: react,
+ },
+ {
+ title: 'Go',
+ description:
+ 'TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.',
+ image: go,
+ },
+];
+
+const Technologies: React.FC = () => {
+ return (
+
+
+
+
+
+ Tecnologias mais usadas
+
+
+ {cards.map(card => (
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default Technologies;
diff --git a/src/images/cucicon.svg b/src/images/cucicon.svg
new file mode 100644
index 0000000..1b7abe4
--- /dev/null
+++ b/src/images/cucicon.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/images/golang.svg b/src/images/golang.svg
new file mode 100644
index 0000000..553e332
--- /dev/null
+++ b/src/images/golang.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/images/nextjs.svg b/src/images/nextjs.svg
new file mode 100644
index 0000000..19a72c3
--- /dev/null
+++ b/src/images/nextjs.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/images/nodejs.svg b/src/images/nodejs.svg
new file mode 100644
index 0000000..ab113d5
--- /dev/null
+++ b/src/images/nodejs.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/images/react.svg b/src/images/react.svg
new file mode 100644
index 0000000..aa636bc
--- /dev/null
+++ b/src/images/react.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/images/typescript.svg b/src/images/typescript.svg
new file mode 100644
index 0000000..6edb240
--- /dev/null
+++ b/src/images/typescript.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 46b2436..3f82159 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
import { Box } from '@chakra-ui/react';
import Navibar from '../components/Navibar';
import VslSection from '../components/VslSection';
+import Technologies from '../components/Technologies';
function IndexPage() {
return (
-
+
+
);
}