Merge pull request #31 from inove-jr/tailwind

Configurado o Tailwind com a identidade visual da empresa e a borda dos títulos
inove-jr · Jul 11, 2024 · 2ba2b23 · 2ba2b23
2 parents 4c37b3e + 47f5e78
commit 2ba2b23
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 10 deletions.
diff --git a/src/app/(homepage)/_components/About.tsx b/src/app/(homepage)/_components/About.tsx
@@ -1,5 +1,5 @@
 export const About = () => (
   <section className='flex h-72 w-full items-center justify-center'>
-    <h2>QUEM SOMOS?</h2>
+    <h2 className="decorated-border">QUEM SOMOS?</h2>
   </section>
 );
diff --git a/src/app/(homepage)/_components/Contact.tsx b/src/app/(homepage)/_components/Contact.tsx
@@ -1,5 +1,5 @@
 export const Contact = () => (
   <section className='flex h-72 w-full items-center justify-center bg-i9-blue-900 text-i9-white-100'>
-    <h2>CONTATE-NOS</h2>
+    <h2 className="decorated-border">CONTATE-NOS</h2>
   </section>
 );
diff --git a/src/app/(homepage)/_components/Portfolio.tsx b/src/app/(homepage)/_components/Portfolio.tsx
@@ -1,5 +1,5 @@
 export const Portfolio = () => (
   <section className='flex h-72 w-full items-center justify-center bg-i9-blue-900 text-i9-white-100'>
-    <h2>PORTFÓLIO</h2>
+    <h2 className="decorated-border">PORTFÓLIO</h2>
   </section>
 );
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,10 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "@/styles/globals.css";
+import type { Metadata } from "next";
 import { Footer } from "@/components/layout/Footer";
 
 import favicon from "public/favicon.ico";
 import faviconDark from "public/favicon-dark.ico";
-
-const inter = Inter({ subsets: ["latin"] });
+import { kanit, prime } from "@/styles/fonts";
 
 export const metadata: Metadata = {
   title: "Inove Jr",
@@ -34,7 +32,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='pt-br'>
-      <body className={inter.className}>
+      <body className={`${prime.variable} ${kanit.variable}`}>
         {children}
         <Footer />
       </body>

diff --git a/src/styles/fonts/Prime-Light.ttf b/src/styles/fonts/Prime-Light.ttf
diff --git a/src/styles/fonts/Prime-Regular.ttf b/src/styles/fonts/Prime-Regular.ttf
diff --git a/src/styles/fonts/index.ts b/src/styles/fonts/index.ts
@@ -0,0 +1,26 @@
+import { Kanit } from "next/font/google";
+import localFont from "next/font/local";
+
+export const kanit = Kanit({
+  weight: ["200", "400", "500", "700", "800"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-kanit",
+});
+
+export const prime = localFont({
+  src: [
+    {
+      path: "./Prime-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./Prime-Light.ttf",
+      weight: "200",
+      style: "normal",
+    },
+  ],
+  variable: "--font-prime",
+});
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -40,13 +40,21 @@
   * {
     @apply border-border;
   }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-primary;
+  }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-secondary text-foreground;
   }
 }
 
 @layer utilities {
   .decorated-border::before {
-    @apply -mt-[0.1em] mr-[0.2em] inline-block h-[1em] w-[0.25em] rounded-[1em] bg-i9-orange align-middle content-[""];
+    @apply -mt-[0.2em] mr-[0.2em] inline-block h-[1em] w-[0.25em] rounded-[1em] bg-i9-orange align-middle content-[""];
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -18,6 +18,10 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        primary: ["var(--font-prime)"],
+        secondary: ["var(--font-kanit)"],
+      },
       colors: {
         border: "var(--border)",
         input: "var(--input)",