hero tailwind styling

Author: ashmitjsg

src/components/Header/index.jsx

@@ -6,11 +6,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 
 export default function Header() {
-    const headerBackClasses = `${styles.header_back} ${styles.section_padding}`;
+    const tagLine = `${styles.section_padding}`;
     const customButtonClasses = `button button--lg ${styles.customButtonStyle}`;
 
     return (
-        <div className={headerBackClasses}>
+        <div className={`bg-gradient-blue flex flex-col lg:flex-row hero-clip p-12 pr-28 pb-24 pl-28 md:p-16 lg:p-12`}>
             <div className={styles.header_content}>
             <ThemedImage
                 alt="Supported By Logo"

src/components/Header/index_old.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import UptaneCubes from '@site/static/img/uptane_hero_img.svg';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+
+export default function Header() {
+    const headerBackClasses = `${styles.header_back} ${styles.section_padding}`;
+    const customButtonClasses = `button button--lg ${styles.customButtonStyle}`;
+
+    return (
+        <div className={headerBackClasses}>
+            <div className={styles.header_content}>
+            <ThemedImage
+                alt="Supported By Logo"
+                width="300px"
+                sources={{
+                    light: useBaseUrl('/img/uptaneLogoHero.svg'),
+                    dark: useBaseUrl('/img/uptaneLogoHero.svg'),
+                }}
+            />
+                <h3>A Secure Software Update Framework for Automobiles</h3>
+                <div className={styles.header_content_buttons}>
+                    <Link to="/learn-more/getting-started" className={customButtonClasses}>Learn More</Link>
+                </div>
+            </div>
+            <div className={styles.header_image}>
+                <UptaneCubes title="uptane Cubes" width="100%" />
+            </div>
+        </div>
+    );
+}

src/components/Header/styles.module.css

@@ -68,7 +68,7 @@
         line-height: 60px;
     }
 
-    .header_back h3 {
+    .tag-line {
         font-size: 25px;
     }
 

src/css/custom_tailwind.css

@@ -137,6 +137,12 @@ a {
   @apply font-content;
 }
 
+@layer utilities {
+  .hero-clip {
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
+  }
+}
+
 .button.button--secondary {
   color: var(--ifm-color-primary);
 }

tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
         'max-sm': {'max': '489px'},
         'max-md': {'max': '649px'},
       },
+      backgroundImage: {
+        'gradient-blue': 'linear-gradient(130deg, #0C64D6 0%, rgba(12, 100, 214, 0.87) 0%, rgba(12, 100, 214, 0.78) 47.69%, rgba(12, 100, 214, 0.62) 99.61%, rgba(12, 100, 214, 0.00) 100%)',
+      },
     },
   },
   plugins: [],