Merge pull request #2 from LeonardoRafaelDev/master

implementado ajustes projeto

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

src/components/beneficios.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from "astro-icon";
 import ContentSection from "../layout/content-section.astro";
-import type { BeneficiosItem } from "~/types";
+import type { BeneficiosItem } from "../types";
 
 const beneficios: Array<BeneficiosItem> = [
   {

src/components/footer.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon";
-import type { FooterLink } from "~/types";
+import type { FooterLink } from "../types";
 
 const links: Array<FooterLink> = [
   {

src/components/hero.astro

@@ -5,11 +5,12 @@ import GitHubCorner from "./github-corner.astro";
 <section class="background relative h-full bg-fixed">
   <GitHubCorner />
   <div class="flex flex-col self-center justify-center relative h-full place-items-center">
-    <span>Venha participar do</span>
-    <br />
-    <h2>#100DiasDeCodigo</h2>
-    <br />
-    <button class="btn">Como participar</button>
+    <span class="mb-2 text-xl md:text-6xl font-bold text-secondary">Venha participar do</span>
+    <h2 class="mb-2 text-2xl md:text-8xl font-bold text-primary">#100DiasDeCodigo</h2>
+    <div class="max-w-md md:max-w-xl w-full p-5">
+      <iframe class="mb-4 w-full h-full aspect-video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    </div>
+    <a class="bg-button hover:bg-indigo-900 rounded-xl py-3 px-8 font-medium text-button" href="#como-participar">Como participar</a>
   </div>
 </section>
 
@@ -21,15 +22,4 @@ import GitHubCorner from "./github-corner.astro";
     background-size: cover;
   }
 
-  span {
-    font-size: clamp(20px, 10vw,72px);
-    font-weight: bold;
-    color: var(--color-secondary);
-  }
-
-  h2 {
-    font-size: clamp(32px, 10vw, 100px);
-    font-weight: bold;
-    color: var(--color-primary);
-  }
 </style>

src/components/links-uteis.astro

@@ -1,18 +1,54 @@
 ---
+import type { LinksUteisItem } from "../types";
 import ContentSection from "../layout/content-section.astro";
+
+const links: Array<LinksUteisItem> = [
+  {
+    name: "Trilha.info",
+    description:
+      "Você conhecerá colegas e mentores (e provavelmente amigos!), que te ajudarão na jornada nos dias difíceis.",
+    tags: ["Brasileiro", "Back-end", "Front-end", "DevOps"],
+    url: "https://fodase.com",
+    thumbnail_url: "https://i.imgur.com/ikPMRq4.png",
+  },
+];
 ---
 
-<ContentSection title="Links Úteis" id="beneficios" align="start" extraclass="sm:pl-8 sm:mx-40">
-  <div class="border-l-4 border-violet-800 pl-4">
-    <h2 class="text-xl color-secondary mb-2">roadmap.danielheart.dev</h2>
-    <p class="text-[#676779]">A ideia desse projeto é organizar todo o conteúdo que eu já produzi sobre programação até o momento e criar uma trilha para ajudar novos desenvolvedores.</p>
-  </div>
-  <div class="border-l-4 border-violet-800 pl-4">
-    <h2 class="text-xl color-secondary mb-2">trilha.info</h2>
-    <p class="text-[#676779]">A Trilha Info é um projeto Open Source com o objetivo de agregar e organizar conteúdos gratuitos em português para pessoas que querem ingressar na área de Tecnologia.</p>
-  </div>
-  <div class="border-l-4 border-violet-800 pl-4">
-    <h2 class="text-xl color-secondary mb-2">roadmap.sh</h2>
-    <p class="text-[#676779]">A roadmap.sh é um esforço de comunidade para criar guias e agregar conteúdos educacionais para ajudar a orientar os desenvolvedores a orientar seus aprendizados.</p>
+<ContentSection
+  title="Links Úteis"
+  id="beneficios"
+  align="start"
+  extraclass="sm:pl-8 sm:mx-40"
+>
+  <div class="grid gap-4 lg:grid-cols-3">
+    {
+      links.map((link) => (
+        <div class="max-w-sm overflow-hidden rounded bg-card shadow-lg ">
+          <img
+            class="w-full"
+            src="https://i.imgur.com/ikPMRq4.png"
+            alt="Sunset in the mountains"
+          />
+          <div class="px-6 py-4">
+            <div class="mb-2 font-bold text-primary text-xl">Trilha Info</div>
+            <p class="text-card text-base">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Voluptatibus quia, nulla! Maiores et perferendis eaque,
+              exercitationem praesentium nihil.
+            </p>
+          </div>
+          <div class="px-6 pt-4 pb-2">
+            {link.tags?.map((tag) => (
+              <span class="mr-2 mb-2 inline-block rounded-full bg-gray-200 px-3 py-1 font-semibold text-gray-700 text-sm">
+                #{tag}
+              </span>
+            ))}
+          </div>
+          <div class="px-6 pt-4 pb-2 mb-4">
+            <a href={`${link.url}`} class="bg-button hover:bg-indigo-900 rounded-xl py-3 px-8 font-medium text-button">Link</a>
+          </div>
+        </div>
+      ))
+    }
   </div>
 </ContentSection>

src/components/menu.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from "astro-icon";
-import ThemeSwitcher from "~/components/theme-switcher.astro";
-import type { NavItem } from "~/types";
+import ThemeSwitcher from "../components/theme-switcher.astro";
+import type { NavItem } from "../types";
 
 const navItems: Array<NavItem> = [
   { title: "Como Participar", url: "#comoParticipar" },

src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
-import LinksUteis from "~/components/links-uteis.astro";
-import Beneficios from "~/components/beneficios.astro";
-import Footer from "~/components/footer.astro";
-import Participar from "~/components/participar.astro";
-import Hero from "~/components/hero.astro";
-import Menu from "~/components/menu.astro";
+import LinksUteis from "../components/links-uteis.astro";
+import Beneficios from "../components/beneficios.astro";
+import Footer from "../components/footer.astro";
+import Participar from "../components/participar.astro";
+import Hero from "../components/hero.astro";
+import Menu from "../components/menu.astro";
 
 import "@fontsource/inter/variable.css";
 import "~/styles/index.css";
@@ -64,7 +64,7 @@ const description =
   >
     <Menu />
     <Hero />
-    <div class="space-y-24 bg-primary px-8 py-32">
+    <div id="como-participar" class="space-y-24 bg-primary px-8 py-32">
       <Participar />
     </div>
     <div class="space-y-24 bg-secondary px-8 py-32">

src/styles/global.css

@@ -10,11 +10,4 @@ a,
   @apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
 }
 
-button {
-    background-color: var(--color-primary);
-    padding: 16px 32px;
-    border-radius: 12px;
-    font-weight: 500;
-  }
-
 

src/styles/theme.css

@@ -4,10 +4,14 @@
   --color-text: #111827;
   --color-title: #171720;
   --color-text-offset: #707070;
+  --color-text-card: #707070;
+  --color-text-button: #ffffff;
 
   --color-background-primary: #ffffff;
   --color-background-secondary: #f0f2f5;
   --color-background-offset: #ffffff;
+  --color-background-button: #6c63ff;
+  --color-background-card: #fff;
 
   --color-border: theme("colors.gray.900" / 10%);
 }
@@ -18,10 +22,14 @@
   --color-text: theme("colors.gray.50");
   --color-title: #ffffff;
   --color-text-offset: #C5C5C5;
+  --color-text-card: #ffffff;
+  --color-text-button: #ffffff;
 
   --color-background-primary: #171720;
   --color-background-secondary: #0f0f16;
   --color-background-offset: #282834;
+  --color-background-button: #6c63ff;
+  --color-background-card: #282834;
 
   --color-border: theme("colors.gray.50" / 10%);
 }

src/types.ts

@@ -3,6 +3,13 @@ export interface CompatibilityItem {
   title: string;
   url: string;
 }
+export interface LinksUteisItem {
+  name: string;
+  url: string;
+  thumbnail_url: string;
+  description: string;
+  tags?: Array<string>;
+}
 
 export interface BeneficiosItem {
   description: string;

tailwind.config.cjs

@@ -14,11 +14,15 @@ module.exports = {
       textColor: {
         default: "var(--color-text)",
         offset: "var(--color-text-offset)",
+        card: "var(--color-text-card)",
+        button: "var(--color-text-button)",
       },
       backgroundColor: {
         primary: "var(--color-background-primary)",
         secondary: "var(--color-background-secondary)",
         offset: "var(--color-background-offset)",
+        button: "var(--color-background-button)",
+        card: "var(--color-background-card)",
       },
       borderColor: {
         default: "var(--color-border)",