Updates site banner, buttons, and background gradients (#61)

astro.config.mjs

@@ -1,12 +1,11 @@
-import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
-import react from "@astrojs/react";
-import mdx from "@astrojs/mdx";
-import svelte from "@astrojs/svelte";
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import svelte from '@astrojs/svelte';
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [tailwind(), svelte(), mdx()],
-  site: "https://dev-mcswf.usmc.dev",
-  base: "/",
+  site: 'https://dev-mcswf.usmc.dev',
+  base: '/',
 });

src/components/buttons/ButtonCustom.svelte

@@ -1,30 +1,30 @@
 <script>
-  import { Button } from 'flowbite-svelte'
+  import { twMerge } from 'tailwind-merge';
+  import { Button } from 'flowbite-svelte';
 
-  export let color = 'white' // white, yellow, red
-  export let size = 'md' // xs, sm, md, lg, xl
-  export let handleClick
-  export let link = ''
-  export let customClasses = ''
-  export let disabled = false
-
-  const defaultClasses =
-    'inline-block uppercase text-center align-middle rounded font-bold tracking-wide transition-all border border-transparent shadow-lg focus:outline-none focus:ring-2 '
+  export let color = 'white'; // white, yellow, red
+  export let size = 'md'; // xs, sm, md, lg, xl
+  export let handleClick;
+  export let link = '';
+  export let disabled = false;
 
   const colorSpecificClasses = {
-    white:
-      'bg-mcswf-white-50 text-usmc-red hover:bg-zinc-200 hover:focus:ring-zinc-400/0 focus:ring-zinc-400/70 ',
-    yellow:
-      'bg-mcswf-gold text-usmc-red hover:bg-amber-400 hover:focus:ring-amber-600/0 focus:ring-amber-600/70 ',
+    white: 'bg-mcswf-white-50 text-usmc-red hover:bg-zinc-200 hover:focus:ring-zinc-400/0 focus:ring-zinc-400/70 ',
+    yellow: 'bg-mcswf-gold text-usmc-red hover:bg-amber-400 hover:focus:ring-amber-600/0 focus:ring-amber-600/70 ',
     red: 'bg-mcswf-red text-mcswf-white-50 hover:bg-red-900 hover:focus:ring-red-950/0 focus:ring-red-950/70 ',
-  }
+  };
 </script>
 
 <Button
+  {...$$restProps}
   href={link}
   on:click={handleClick}
   {size}
-  class={defaultClasses + colorSpecificClasses[color] + customClasses}
+  class={twMerge(
+    'inline-block uppercase text-center align-middle rounded font-bold tracking-wide transition-all border border-transparent shadow-lg focus:outline-none focus:ring-2',
+    colorSpecificClasses[color],
+    $$props.class
+  )}
   {disabled}>
   <slot />
 </Button>

src/components/static/Banner.svelte

@@ -1,44 +1,17 @@
 <script>
-  import ButtonCustom from '../buttons/ButtonCustom.svelte'
-  // import Icon from '@iconify/svelte'
-  import { displaySiteBanner } from '../stores.js'
+  import ButtonCustom from '../buttons/ButtonCustom.svelte';
+  import { displaySiteBanner } from '../stores.js';
+  import { externalLinks } from '@content/constants';
 </script>
 
 {#if $displaySiteBanner}
-  <div
-    id="banner"
-    class="font-expressway grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-8 gap-2 w-full bg-custom-gradient-banner md:h-20 place-content-stretch place-items-stretch py-4 px-8 md:py-0 lg:px-14">
-    <div
-      class="hidden md:block 2xl:col-start-2 col-span-1 overflow-hidden justify-self-end place-self-stretch w-full">
-      <img
-        class="object-cover md:scale-200 md:-translate-y-6 xl:scale-150 xl:-translate-y-8"
-        alt="Marines in Dress Blue Uniform"
-        src="/images/marine_blues_banner.png" />
-    </div>
-    <h3
-      class="col-span-2 lg:col-span-3 2xl:col-span-4 place-self-center text-center">
-      <span class="font-bold">MARINE-LED SOFTWARE DEVELOPMENT:</span>
-      <span class="hidden md:inline"
-        >Lorem ipsum dolor sit amet. Et quae quibusdam</span>
+  <div id="banner" class="font-expressway flex flex-col md:h-20 md:flex-row justify-center items-center w-full bg-custom-gradient-banner py-4 px-8 md:py-0 lg:px-14 md:gap-4 lg:gap-12">
+    <h3 class="text-center tracking-wide md:mr-4 bg-gradient-to-r from-white via-slate-50 to-slate-100 inline-block text-transparent bg-clip-text">
+      <span class="font-bold">MARINE-LED <span class="block sm:inline">SOFTWARE DEVELOPMENT</span><span class="hidden md:inline">:</span></span>
+      <span class="hidden md:inline ml-2">For Marines.<span class="ml-2">By Marines.</span></span>
     </h3>
-    <div class="col-span-1 place-self-center md:w-full">
-      <ButtonCustom
-        color="yellow"
-        size="md"
-        link="/application"
-        customClasses="md:w-full">Apply Now</ButtonCustom>
+    <div class="my-2 md:my-auto">
+      <ButtonCustom color="yellow" size="md" link={externalLinks.recruitingApplication} class="px-2 py-1 text-xs sm:px-4 sm:text-base md:px-8">Apply Now</ButtonCustom>
     </div>
-
-    <!-- If you want to add a close button to the banner, you can add the following code: -->
-    <!-- <div class="flex items-center">
-      <button
-        on:click={() => (isVisible = false)}
-        type="button"
-        class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-white hover:text-mcswf-gold rounded-lg text-sm p-1.5"
-      >
-        <Icon class="text-2xl" icon="mdi:close" />
-        <span class="sr-only">Close banner</span>
-      </button>
-    </div> -->
   </div>
 {/if}

src/content/constants.js

@@ -0,0 +1,3 @@
+export const externalLinks = {
+  recruitingApplication: 'https://docs.google.com/forms/d/e/1FAIpQLSeJBKVSocqNje8_Tn7OUUZpELNDBJU65RUMeh_9bzvHa2bEzg/viewform',
+};

src/layouts/Layout.astro

@@ -1,38 +1,33 @@
 ---
-// import { Banner } from 'flowbite-svelte'
-import ButtonCustom from '../components/buttons/ButtonCustom.svelte'
-
-import Navigation from '../components/static/Navigation.svelte'
-
-import FooterSmall from '../components/footer/FooterSmall.svelte'
-import Banner from '../components/static/Banner.svelte'
-
-import '../styles/global.css'
-import '../styles/fonts.css'
+import Navigation from '../components/static/Navigation.svelte';
+import Banner from '../components/static/Banner.svelte';
+import '../styles/global.css';
+import '../styles/fonts.css';
 
 interface Props {
-  title?: string
+  title?: string;
 }
 
-const { title = null } = Astro.props
+const { title = null } = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en" class="overflow-hidden h-full">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="description" content="Marine Corps Software Factory" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap"
+    <meta property="og:title" content="Marine Corps Software Factory" />
+    <meta
+      property="og:description"
+      content="The Marine Corps Software Factory welcomes Marines from any MOS who have the aptitude, competence, and discipline to serve in key roles on software development teams."
     />
+    <meta property="og:image" content="/mcswf-badge.svg" />
     <title>MCSWF {title && '-'} {title}</title>
   </head>
-  <body
-    class="overflow-auto h-full font-expressway bg-opacity-40 text-white bg-custom-gradient-red bg-cover bg-center">
+  <body class="overflow-auto h-full font-expressway bg-opacity-40 text-white bg-custom-gradient-red bg-cover bg-center">
     <Banner />
     <header class="w-full sticky top-0 z-30">
       <Navigation client:only="svelte" />

tailwind.config.mjs

@@ -1,9 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
-    './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
-  ],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
   darkMode: 'selector',
   theme: {
     extend: {
@@ -25,7 +22,6 @@ export default {
         'linkedin-blue': '#0077B5',
       },
       fontFamily: {
-        rubik: ['Rubik', 'sans'], // 'Rubik' is the font name
         colossalis: ['Colossalis'],
         expressway: ['Expressway', 'sans-serif'],
         menobanner: ['MenoBanner'],
@@ -34,10 +30,8 @@ export default {
         grid: 'grid-template-columns',
       },
       backgroundImage: (theme) => ({
-        'custom-gradient-banner':
-          'radial-gradient(73.99% 331.82% at 15.43% 50%, #6F1319 0%, #89181D 38.02%, #9F1C1F 65.1%, #711319 100%)', // Dictated by wireframes for banner
-        'custom-gradient-red':
-          'radial-gradient(circle, rgba(137,24,29,1) 0%, rgba(137,24,29,1) 76%, rgba(102,41,31,1) 100%);',
+        'custom-gradient-banner': 'background: radial-gradient(78.55% 1170.94% at 12.82% 54.91%, #6F1319 0%, #89181D 53.12%, #9F1C1F 100%)',
+        'custom-gradient-red': 'radial-gradient(circle at 0% 56.8%, #6F1319 0%, #89181D 53.13%, #9F1C1F 100%)',
       }),
       scale: {
         200: '2',
@@ -51,4 +45,4 @@ export default {
     },
   },
   plugins: [require('@tailwindcss/typography'), require('flowbite/plugin')],
-}
+};

tsconfig.json

@@ -10,6 +10,9 @@
       "@layouts/*": ["src/layouts/*"],
       "@pages/*": ["src/pages/*"],
       "@content/*": ["src/content/*"],
-    }
-  }
+    },
+  },
+  "exclude": [
+    "node_modules",
+  ]
 }