impr(webapp): upt mob ver of more info cards (#294)

* styles: update mobile version for information cards of home page * styles: use tailwind css variables * styles: add font family futura pt * styles, config: add cornflowerblue variables on tailwind config and update information cards' background * config: update font importation * chore: replace BC with BL * chore: replace bc files with bl files * chore: replace bc files with bl files --------- Co-authored-by: Roberto Lucas <[email protected]>
bitcashorg · Aug 6, 2024 · 5563038 · 5563038
1 parent d7d64e3
commit 5563038
Show file tree

Hide file tree

Showing 39 changed files with 437 additions and 48 deletions.
diff --git a/apps/webapp/app/(routes)/[lang]/layout.tsx b/apps/webapp/app/(routes)/[lang]/layout.tsx
@@ -17,6 +17,33 @@ import React from 'react'
 import { isMobile } from 'react-device-detect'
 import { Toaster } from 'react-hot-toast'
 import '../../globals.css'
+import {
+  FuturaPTBook,
+  FuturaPTLight,
+  FuturaPTMedium,
+  FuturaPTDemi,
+  FuturaPTHeavy,
+  FuturaPTBold,
+  FuturaPTExtraBold,
+  LufgaRegular,
+  LufgaItalic,
+  LufgaThin,
+  LufgaThinItalic,
+  LufgaExtraLight,
+  LufgaExtraLightItalic,
+  LufgaLight,
+  LufgaLightItalic,
+  LufgaMedium,
+  LufgaMediumItalic,
+  LufgaSemiBold,
+  LufgaSemiBoldItalic,
+  LufgaBold,
+  LufgaBoldItalic,
+  LufgaExtraBold,
+  LufgaExtraBoldItalic,
+  LufgaBlack,
+  LufgaBlackItalic,
+} from "@/assets/fonts/fonts"
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -38,7 +65,10 @@ export default async function RootLayout({
       className={cn('tk-futura-pt max-w-full text-lg antialiased')}
       suppressHydrationWarning
     >
-      <body style={{ width: '100%', maxWidth: '100%' }}>
+      <body 
+        style={{ width: '100vw', maxWidth: '100vw' }}
+        className={`${FuturaPTBook.variable} ${FuturaPTLight.variable} ${FuturaPTMedium.variable} ${FuturaPTDemi.variable} ${FuturaPTHeavy.variable} ${FuturaPTBold.variable} ${FuturaPTExtraBold.variable} ${LufgaRegular.variable} ${LufgaItalic.variable} ${LufgaThin.variable} ${LufgaThinItalic.variable} ${LufgaExtraLight.variable} ${LufgaExtraLightItalic.variable} ${LufgaLight.variable} ${LufgaLightItalic.variable} ${LufgaMedium.variable} ${LufgaMediumItalic.variable} ${LufgaSemiBold.variable} ${LufgaSemiBoldItalic.variable} ${LufgaBold.variable} ${LufgaBoldItalic.variable} ${LufgaExtraBold.variable} ${LufgaExtraBoldItalic.variable} ${LufgaBlack.variable} ${LufgaBlackItalic.variable}`}
+      >
         <Providers
           attribute="class"
           defaultTheme="system"

diff --git a/apps/webapp/app/globals.css b/apps/webapp/app/globals.css
@@ -49,6 +49,8 @@
     --fifth-color: 20, 14, 64;
     --pointer-color: 112, 43, 144;
 
+    --alert: 78, 90%, 75%;
+
     --radius: 24px;
   }
 
@@ -96,10 +98,14 @@
     --fifth-color: 20, 14, 64;
     --pointer-color: 112, 43, 144;
 
+    --alert: 78, 90%, 75%;
+
     --radius: 24px;
   }
 }
 
+/* #### Generated By: http://font.download #### */
+
 * {
   @apply border-border ring-offset-ring focus-within:ring-ring focus-within:ring-offset-ring focus-visible:ring-ring focus-visible:ring-offset-ring before:focus-visible:ring-ring before:focus-visible:ring-offset-ring;
 }
@@ -115,6 +121,17 @@ html {
   @apply bg-background text-foreground;
 }
 
+body,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Futura PT", sans-serif;
+}
+
 .open-sans {
   font-family: 'Open Sans', sans-serif;
   font-optical-sizing: auto;

diff --git a/apps/webapp/assets/fonts/fonts.ts b/apps/webapp/assets/fonts/fonts.ts
@@ -0,0 +1,302 @@
+import localFont from 'next/font/local';
+
+export const FuturaPTBook = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicBook.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-book',
+});
+
+export const FuturaPTLight = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicLight.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-light',
+});
+
+export const FuturaPTMedium = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicMedium.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-medium',
+});
+
+export const FuturaPTDemi = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicDemi.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-demi',
+});
+
+export const FuturaPTHeavy = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicHeavy.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-heavy',
+});
+
+export const FuturaPTBold = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicBold.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-bold',
+});
+
+export const FuturaPTExtraBold = localFont({
+  src: [
+    {
+      path: './futura-pt/FuturaCyrillicExtraBold.woff',
+      weight: 'normal',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-futura-pt-extra-bold',
+});
+
+export const LufgaRegular = localFont({
+    src: [
+      {
+        path: './lufga/LufgaRegular.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-regular',
+  });
+
+  export const LufgaItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-italic',
+  });
+
+  export const LufgaThin = localFont({
+    src: [
+      {
+        path: './lufga/LufgaThin.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-thin',
+  });
+
+  export const LufgaThinItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaThinItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-thin-italic',
+  });
+
+  export const LufgaExtraLight = localFont({
+    src: [
+      {
+        path: './lufga/LufgaExtraLight.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-extra-light',
+  });
+
+  export const LufgaExtraLightItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaExtraLightItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-extra-light-italic',
+  });
+
+  export const LufgaLight = localFont({
+    src: [
+      {
+        path: './lufga/LufgaLight.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-light',
+  });
+
+  export const LufgaLightItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaLightItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-light-italic',
+  });
+
+  export const LufgaMedium = localFont({
+    src: [
+      {
+        path: './lufga/LufgaMedium.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-medium',
+  });
+
+  export const LufgaMediumItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaMediumItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-medium-italic',
+  });
+
+  export const LufgaSemiBold = localFont({
+    src: [
+      {
+        path: './lufga/LufgaSemiBold.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-semi-bold',
+  });
+
+  export const LufgaSemiBoldItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaSemiBoldItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-semi-bold-italic',
+  });
+
+  export const LufgaBold = localFont({
+    src: [
+      {
+        path: './lufga/LufgaBold.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-bold',
+  });
+
+
+  export const LufgaBoldItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaBoldItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-bold-italic',
+  });
+
+  export const LufgaExtraBold = localFont({
+    src: [
+      {
+        path: './lufga/LufgaExtraBold.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-extra-bold',
+  });
+
+  export const LufgaExtraBoldItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaExtraBoldItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-extra-bold-italic',
+  });
+
+  export const LufgaBlack = localFont({
+    src: [
+      {
+        path: './lufga/LufgaBlack.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-black',
+  });
+
+  export const LufgaBlackItalic = localFont({
+    src: [
+      {
+        path: './lufga/LufgaBlackItalic.woff',
+        weight: 'normal',
+        style: 'normal',
+      },
+    ],
+    display: 'swap',
+    variable: '--font-lufga-black-italic',
+  });
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicBold.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicBold.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicBook.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicBook.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicDemi.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicDemi.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicExtraBold.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicExtraBold.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicHeavy.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicHeavy.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicLight.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicLight.woff
diff --git a/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicMedium.woff b/apps/webapp/assets/fonts/futura-pt/FuturaCyrillicMedium.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaBlack.woff b/apps/webapp/assets/fonts/lufga/LufgaBlack.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaBlackItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaBlackItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaBold.woff b/apps/webapp/assets/fonts/lufga/LufgaBold.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaBoldItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaBoldItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaExtraBold.woff b/apps/webapp/assets/fonts/lufga/LufgaExtraBold.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaExtraBoldItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaExtraBoldItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaExtraLight.woff b/apps/webapp/assets/fonts/lufga/LufgaExtraLight.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaExtraLightItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaExtraLightItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaLight.woff b/apps/webapp/assets/fonts/lufga/LufgaLight.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaLightItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaLightItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaMedium.woff b/apps/webapp/assets/fonts/lufga/LufgaMedium.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaMediumItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaMediumItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaRegular.woff b/apps/webapp/assets/fonts/lufga/LufgaRegular.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaSemiBold.woff b/apps/webapp/assets/fonts/lufga/LufgaSemiBold.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaSemiBoldItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaSemiBoldItalic.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaThin.woff b/apps/webapp/assets/fonts/lufga/LufgaThin.woff
diff --git a/apps/webapp/assets/fonts/lufga/LufgaThinItalic.woff b/apps/webapp/assets/fonts/lufga/LufgaThinItalic.woff