Update banner styles and general fonts

Author: combimauri

Diff for: src/assets/fonts/GoogleSans/GoogleSans-Bold.ttf

@@ -0,0 +1,28 @@
+![Google Sans](https://i.imgur.com/VWjSZX3.png)
+
+# Google Sans Font aka Product Sans
+
+Product Sans is a geometric sans-serif typeface created by Google for branding purposes.[2][3] It replaced the old Google logo on September 1, 2015. As Google's branding was becoming more apparent on a multitude of devices, Google sought to adapt its design so that its logo could be portrayed in constrained spaces and remain consistent for its users across platforms. Product Sans is also used in some of Google’s user interfaces, in a size-optimized version named Google Sans[4].
+
+## Design
+
+The design team wanted to retain the simple and approachable styles in previous logos but also include geometric forms. At first glance, the font nearly matches the Futura typeface.[5] The most notable difference between the two is the double-story 'a', which was implemented to contrast the circular shapes of the other characters.[6] Product Sans prefers to end the stroke terminals at about 45 degrees, with the cut off being perpendicular to the tangent of the stroke.
+
+Slight optical corrections were also made to the geometric forms. The uppercase "G" has its circular shape pulled inwards slightly where it meets the crossbar. The counters of the '6', '8', and '9' are almost perfect circles. These visual corrections were made for legibility.
+
+
+## Usage
+
+The present Google logo is based on Product Sans. Slight modifications do exist in the logo compared to the typeface: the most noticeable is the slanted 'e'. The differences between the logo and Product Sans allows for distinction between the Google logotype and product name.[2] Product Sans is mainly used in the text of Google's numerous services' logotypes such as Maps, Drive, News, Earth, etc. The font is also used on the "Made by Google" website, which showcases Google products,[7] and in some versions of Android.
+
+## References
+- "Google Product Sans License". Google. Retrieved 2 March 2017.
+- "Evolving the Google Identity". Google Design. Google. Retrieved 2 May 2016.
+ Swanner, Nate. "Google created an entirely new typeface (Product Sans) for its snappy logo redesign". The Next Web. Retrieved 2 May 2016.
+- Hall, Stephen (9 May 2018). "Now we know: Google Sans is actually a size-optimized version of Product Sans". 9to5Google. Retrieved 14 May 2018.
+- "What Font is the New Google Logo? - Design for Hackers". Design for Hackers. 2015-09-01. Retrieved 2017-03-12.
+- "Product Sans Specimen" (PDF). Google Inc. 2015. Retrieved 12 March 2017.
+- "Made by Google". Made by Google. Retrieved 2017-04-20.
+
+## Disclaimer
+This file is completely free to use and distribute. All uploaded files and copyrights are properties of their respective owners.

Diff for: src/assets/fonts/GoogleSans/GoogleSans-BoldItalic.ttf

@@ -5,27 +5,27 @@ import logoBuildWithAI from '../assets/images/logo-build-with-ai.png';
 import boliviaLogo from '../assets/images/bolivia-logo.svg';
 ---
 
-<section class="banner">
+<section class="relative bg-hero-section bg-cover bg-no-repeat h-dvh min-h-800">
   <div
-    class="banner_actions flex flex-col justify-center items-center sm:items-start md:items-center w-full lg:w-1/2 xl:w-1/2 h-full"
+    class="flex flex-col justify-center xl:w-1/2 h-full"
   >
     <Image
       src={logoBuildWithAI}
       alt="Build with AI Logo"
-      class="w-full sm:w-2/5 md:w-3/5 lg:w-full xl:w-3/5 mb-4 mx-2 md:mb-10"
+      class="w-full md:w-4/5 lg:w-3/5 xl:w-4/5 mb-10 px-2 md:px-10"
     />
-    <div class="flex gap-3 sm:ml-2">
+    <div class="flex justify-center md:justify-start gap-3 px-4 md:px-20">
       <a
         href="https://b.link/RegistroBuildWithAI"
-        class="banner__button flex items-center justify-center px-3 py-2 uppercase w-250"
+        class="bg-black text-white flex items-center justify-center px-3 py-2 uppercase w-250"
         target="_blank"
         rel="noopener noreferrer"
       >
         Regístrate Aquí
       </a>
       <a
         href="https://b.link/BuildWithAIHackathon"
-        class="banner__button banner__button--secondary flex items-center justify-center px-3 py-2 uppercase w-250"
+        class="bg-white text-black border border-solid border-black flex items-center justify-center px-3 py-2 uppercase w-250"
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -39,23 +39,3 @@ import boliviaLogo from '../assets/images/bolivia-logo.svg';
     class="bg-white lg:bg-transparent absolute bottom-5 right-10 w-16 xl:w-[152px]"
   />
 </section>
-
-<style>
-  .banner {
-    background-image: url('../assets/images/black-lines.svg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100dvh;
-
-    .banner__button {
-      background: #000;
-      color: white;
-
-      &.banner__button--secondary {
-        background: #fff;
-        border: 1px solid #000;
-        color: #000;
-      }
-    }
-  }
-</style>

Diff for: src/assets/fonts/GoogleSans/GoogleSans-Italic.ttf

@@ -1,5 +1,5 @@
 ---
-
+import '@styles/base.css'
 ---
 
 <!doctype html>

Diff for: src/assets/fonts/GoogleSans/GoogleSans-Medium.ttf

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Google Sans';
+  src: url(../assets/fonts/GoogleSans/GoogleSans-Regular.ttf) format('truetype')
+      font-weight-normal,
+    url(../assets/fonts/GoogleSans/GoogleSans-Bold.ttf) format('truetype')
+      font-weight-bold,
+    url(../assets/fonts/GoogleSans/GoogleSans-Italic.ttf) format('truetype')
+      font-style-italic,
+    url(../assets/fonts/GoogleSans/GoogleSans-BoldItalic.ttf) format('truetype')
+      font-weight-bold font-style-italic,
+    url(../assets/fonts/GoogleSans/GoogleSans-Medium.ttf) format('truetype')
+      font-weight-500,
+    url(../assets/fonts/GoogleSans/GoogleSans-MediumItalic.ttf)
+      format('truetype') font-weight-500 font-style-italic;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 16px;
+  line-height: normal;
+  margin: 0;
+  padding: 0;
+}

Diff for: src/assets/fonts/GoogleSans/GoogleSans-MediumItalic.ttf

@@ -1,13 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
-      colors: { gray: "#626c75" },
+      colors: { gray: '#626c75' },
       backgroundImage: {
-        'desktop-about-section': "url('/src/assets/images/bg-about-us-desktop.svg')",
-        'mobile-about-section': "url('/src/assets/images/bg-about-us-mobile.svg')",
-      }
+        'hero-section': "url('/src/assets/images/black-lines.svg')",
+        'desktop-about-section':
+          "url('/src/assets/images/bg-about-us-desktop.svg')",
+        'mobile-about-section':
+          "url('/src/assets/images/bg-about-us-mobile.svg')",
+      },
+      minHeight: {
+        800: '800px',
+      },
     },
   },
   plugins: [],

Diff for: src/assets/fonts/GoogleSans/GoogleSans-Regular.ttf

@@ -1,3 +1,9 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@styles/*": ["styles/*"]
+    }
+  }
 }