Styles/lgs update mobile version more info cards

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,69 @@
     --fifth-color: 20, 14, 64;
     --pointer-color: 112, 43, 144;
 
+    --alert: 78, 90%, 75%;
+
     --radius: 24px;
   }
 }
 
+/* #### Generated By: http://font.download #### */
+
+@font-face {
+  font-family: 'Futura PT Book';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Book'), url('../assets/fonts/futura-pt/FuturaCyrillicBook.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Light';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Light'), url('../assets/fonts/futura-pt/FuturaCyrillicLight.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Medium';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Medium'), url('../assets/fonts/futura-pt/FuturaCyrillicMedium.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Demi';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Demi'), url('../assets/fonts/futura-pt/FuturaCyrillicDemi.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Heavy';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Heavy'), url('../assets/fonts/futura-pt/FuturaCyrillicHeavy.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Bold';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Bold'), url('../assets/fonts/futura-pt/FuturaCyrillicBold.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Futura PT Extra Bold';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Futura PT Extra Bold'), url('../assets/fonts/futura-pt/FuturaCyrillicExtraBold.woff') format('woff');
+}
+
 * {
   @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 +176,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;

apps/webapp/assets/fonts/futura-pt/style.css

@@ -0,0 +1,56 @@
+/* #### Generated By: http://font.download #### */
+
+    @font-face {
+    font-family: 'Futura PT Book';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Book'), url('FuturaCyrillicBook.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Light';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Light'), url('FuturaCyrillicLight.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Medium';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Medium'), url('FuturaCyrillicMedium.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Demi';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Demi'), url('FuturaCyrillicDemi.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Heavy';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Heavy'), url('FuturaCyrillicHeavy.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Bold';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Bold'), url('FuturaCyrillicBold.woff') format('woff');
+    }
+
+
+    @font-face {
+    font-family: 'Futura PT Extra Bold';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Futura PT Extra Bold'), url('FuturaCyrillicExtraBold.woff') format('woff');
+    }

apps/webapp/components/layout/footer/learn-section.tsx

@@ -6,26 +6,30 @@ import Link from 'next/link'
 export function LearnSection() {
   return (
     <Section heading={content.sectionTitle}>
-      <div className="h-[2px] bg-[#FF52EE] w-28 mx-auto mb-9"></div>
+      <div className="h-[2px] bg-accent w-28 mx-auto mb-9"></div>
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <Link href="/blog/bitcash/how-to-register-and-kyc-to-bitcash ">
           <Card className="relative overflow-hidden min-h-96 bg-[#0F113E] rounded-[48px]">
             <div className="flex flex-col justify-end w-auto shadow-md bg-[linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent_40%)]">
-              <Image
-                src={content.cards[0].image}
-                alt={content.cards[0].title}
-                loading="lazy"
-                width={311}
-                height={309}
-                className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_43%)]"
-              />
-              <CardHeader className="z-30 text-center px-16">
-                <CardTitle className="mx-auto text-4xl font-medium text-left">
+              <picture>
+                <source srcSet={content.cards[0].images[0]} type="image/webp"/>
+                <source srcSet={content.cards[0].images[1]} type="image/png"/>
+                <Image
+                  src={content.cards[0].images[0]}
+                  alt={content.cards[0].title}
+                  loading="lazy"
+                  width={311}
+                  height={309}
+                  className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_43%)]"
+                />
+              </picture>
+              <CardHeader className="z-30 text-center px-3 lg:px-16 gap-y-3">
+                <CardTitle className="text-3xl lg:text-4xl font-medium text-left font-futura-pt">
                   {content.cards[0].title}
                 </CardTitle>
+                <div className="w-28 h-[2px] bg-secondary-500 mb-7" />
               </CardHeader>
-              <div className="w-28 h-[2px] bg-[#5361FF] mx-16 mb-7" />
-              <CardContent className="z-30 text-left px-16 pb-14">
+              <CardContent className="z-30 text-left px-3 lg:px-16 pb-14">
                 <div className="flex flex-col justify-center items-start gap-y-5">
                   {
                     content.cards[0].paragraphs.map((p) => (
@@ -41,43 +45,49 @@ export function LearnSection() {
         <div className="grid grid-cols-1 gap-8 grid-rows-2 h-full">
           <Link href="/blog/bitcash/how-to-register-and-kyc-to-bitcash ">
             <Card className="relative min-h-44 bg-[#0F113E] rounded-[48px] h-full flex jutify-center items-center">
-
               <div className="shadow-md bg-[linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent_40%)] grid grid-cols-[60%_40%] gap-2 items-center justify-center h-full">
-                <CardHeader className="text-center px-20 py-16 pr-0">
-                  <CardTitle className="mx-auto text-4xl text-left font-medium">
+                <CardHeader className="text-center px-3 lg:px-20 lg:pr-0 py-16 pr-0 gap-y-3 lg:gap-y-14">
+                  <CardTitle className="mx-auto text-3xl lg:text-4xl text-left font-medium">
                     {content.cards[1].title}
                   </CardTitle>
-                  <div className="w-28 h-[2px] bg-[#5361FF] mt-7" />
+                  <div className="w-28 h-[2px] bg-secondary-600 mt-7" />
                 </CardHeader>
-                <Image
-                  src={content.cards[1].image}
-                  alt={content.cards[1].title}
-                  loading="lazy"
-                  width={230}
-                  height={275}
-                  className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_43%)]"
-                />
+                <picture>
+                  <source srcSet={content.cards[1].images[0]} type="image/webp"/>
+                  <source srcSet={content.cards[1].images[1]} type="image/png"/>
+                  <Image
+                    src={content.cards[1].images[0]}
+                    alt={content.cards[1].title}
+                    loading="lazy"
+                    width={230}
+                    height={275}
+                    className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_60%)]"
+                  />
+                </picture>
               </div>
             </Card>
           </Link>
           <Link href="/blog/bitcash/how-to-register-and-kyc-to-bitcash ">
             <Card className="relative min-h-44 bg-[#0F113E] rounded-[48px] h-full flex jutify-center items-center">
-
               <div className="shadow-md bg-[linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent_40%)] grid grid-cols-[60%_40%] gap-2 items-center justify-center h-full">
-                <CardHeader className="text-center px-20 py-16 pr-0">
-                  <CardTitle className="mx-auto text-4xl text-left font-medium">
+                <CardHeader className="text-center px-3 lg:px-20 lg:pr-0 py-16 pr-0 gap-y-3 lg:gap-y-14">
+                  <CardTitle className="mx-auto text-3xl lg:text-4xl text-left font-medium !font-sans">
                     {content.cards[2].title}
                   </CardTitle>
-                  <div className="w-28 h-[2px] bg-[#5361FF] mt-7" />
+                  <div className="w-28 h-[2px] bg-alert mt-7" />
                 </CardHeader>
-                <Image
-                  src={content.cards[2].image}
-                  alt={content.cards[2].title}
-                  loading="lazy"
-                  width={205}
-                  height={261}
-                  className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_43%)]"
-                />
+                <picture>
+                  <source srcSet={content.cards[2].images[0]} type="image/webp"/>
+                  <source srcSet={content.cards[2].images[1]} type="image/png"/>
+                  <Image
+                    src={content.cards[2].images[0]}
+                    alt={content.cards[2].title}
+                    loading="lazy"
+                    width={205}
+                    height={261}
+                    className="mx-auto bg-[radial-gradient(#7D81D96E,transparent_70%)]"
+                  />
+                </picture>
               </div>
             </Card>
           </Link>
@@ -96,17 +106,26 @@ const content = {
         "A good place to start is: what is Bitlauncher? (We'll give you the brief version). Bitlauncher is a platform that connects young projects with early community members through initial decentralized offerings (IDOS). It provides a unique opportunity for investors to engage with up-and-coming tech innovations.",
         "By participating in an IDO on Bitlauncher, users can gain early access to tokens from new blockchain projects. This early access can potentially lead to significant benefits if the projects grow in value and popularity. Bitlauncher aims to democratize the investment process, making it accessible to a broader audience."
       ],
-      image: "/images/home/kyc-bitcash.png"
+      images: [
+        "/images/home/platform-circles.webp",
+        "/images/home/platform-circles.png",
+      ]
     },
     {
       title: 'How to buy the Bitlauncher $BC token?',
       paragraphs: [],
-      image: "/images/home/bc-tokens.png"
+      images: [
+        "/images/home/bc-coins.webp",
+        "/images/home/bc-coins.png",
+      ]
     },
     {
       title: 'What is an IDO (Initial Decentralized Offering)?',
       paragraphs: [],
-      image: "/images/home/ido.png"
+      images: [
+        "/images/home/glass.webp",
+        "/images/home/glass.png",
+      ]
     }
   ]
 }

apps/webapp/tailwind.config.js

@@ -2,8 +2,8 @@ const {
   default: flattenColorPalette
 } = require('tailwindcss/lib/util/flattenColorPalette')
 const svgToDataUri = require('mini-svg-data-uri')
-
 const colors = require('tailwindcss/colors')
+const { fontFamily } = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -50,7 +50,9 @@ module.exports = {
           100: '#535461',
           200: '#040216',
           300: '#080821',
-          400: '#F5F5F5'
+          400: '#F5F5F5',
+          500: '#5361FF',
+          600: '#9A9EFC'
         },
         tertiary: { blue: '#0000EE' },
         destructive: {
@@ -77,6 +79,9 @@ module.exports = {
         card: {
           DEFAULT: 'hsla(var(--card))',
           foreground: 'hsla(var(--card-foreground))'
+        },
+        alert: {
+          DEFAULT: "hsla(var(--alert))"
         }
       },
       borderRadius: {
@@ -90,6 +95,11 @@ module.exports = {
         'inputs-shaped': '100px',
         'check-box': '4px'
       },
+      fontFamily: {
+        sans: ["Futura PT", ...fontFamily.sans],
+        'futura-pt-bold': ['Futura PT Bold', 'sans-serif'],
+        'futura-pt-condensed': ['Futura PT Heavy', 'sans-serif'],
+      },
       keyframes: {
         'accordion-down': {
           from: { height: 0 },