Add AVIF conversion script and enhance landing page styles: introduce a new TypeScript file for converting images to AVIF format, update SCSS for the hero section with new layout and styles, and modify HTML structure to include organization details and a tagline.

Author: markgoho

convert-single-to-avif.ts

@@ -0,0 +1,75 @@
+import { access } from "node:fs/promises";
+import path from "node:path";
+import sharp from "sharp";
+
+// Parse command line arguments
+const forceFlag = process.argv.includes("--force");
+const filePath = process.argv.find(
+  arg =>
+    !arg.startsWith("--") && arg !== process.argv[0] && arg !== process.argv[1],
+);
+
+if (!filePath) {
+  console.error("Usage: bun convert-single-to-avif.ts <file-path> [--force]");
+  console.error("Example: bun convert-single-to-avif.ts image.jpg");
+  console.error("Example: bun convert-single-to-avif.ts image.jpg --force");
+  process.exit(1);
+}
+
+async function convertToAvif(inputPath: string) {
+  // Check if input file exists
+  try {
+    await access(inputPath);
+  } catch {
+    console.error(`Error: File '${inputPath}' does not exist.`);
+    process.exit(1);
+  }
+
+  const extension = path.extname(inputPath).toLowerCase();
+  const supportedExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".webp",
+    ".bmp",
+    ".tiff",
+    ".tif",
+  ];
+
+  if (!supportedExtensions.includes(extension)) {
+    console.error(
+      `Error: Unsupported file format '${extension}'. Supported formats: ${supportedExtensions.join(", ")}`,
+    );
+    process.exit(1);
+  }
+
+  const baseName = inputPath.replace(extension, "");
+  const avifPath = `${baseName}.avif`;
+
+  // Check if AVIF file already exists
+  try {
+    await access(avifPath);
+    if (!forceFlag) {
+      console.log(
+        `Skipped: ${avifPath} (already exists, use --force to overwrite)`,
+      );
+      return;
+    }
+  } catch {
+    // File doesn't exist, will be created
+  }
+
+  try {
+    // Convert to AVIF without resizing or cropping
+    await sharp(inputPath).avif({ quality: 50 }).toFile(avifPath);
+
+    console.log(`Converted: ${inputPath} → ${avifPath}`);
+  } catch (error) {
+    console.error(`Failed to convert ${inputPath}:`, error);
+    process.exit(1);
+  }
+}
+
+// Convert the file
+await convertToAvif(filePath);
+console.log("Conversion complete.");

hugo/assets/scss/landing-page.scss

@@ -1,20 +1,56 @@
 @use "components/nav-card";
+@use "button";
 
 .hero {
   position: relative;
-  padding-block: var(--space-3xl) var(--space-3xl);
+  padding: var(--space-m);
   color: var(--brown-300);
+  height: 100vh;
+
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: max-content 1fr max-content;
+
+  .button {
+    align-self: start;
+  }
+}
+
+.tagline {
+  font-size: var(--step-6);
+  font-weight: var(--font-weight-boldest);
+  line-height: 1.2;
+  margin: 0;
+  color: var(--brown-200);
+  max-width: 18ch;
+  text-wrap: pretty;
+  margin-block-end: var(--space-2xl);
+}
+
+.org-container {
+  display: flex;
+  flex-direction: column;
+  color: var(--brown-200);
 }
+
+.org-name {
+  font-weight: var(--font-weight-boldest);
+}
+
+.org-location {
+  font-size: var(--step--2);
+}
+
 .hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: url("/assets/images/hero-background.png");
+  background-image: url("/assets/images/hero-section.avif");
   background-size: cover;
-  background-position: center;
+  background-position: calc(50% + 23rem) center;
   z-index: -2;
 }
 .hero::after {
@@ -31,9 +67,6 @@
   );
   z-index: -1;
 }
-.hero__content {
-  max-width: 50%;
-}
 
 .welcome {
   max-width: 60ch;
@@ -61,6 +94,10 @@
     max-width: 100%;
   }
 
+  .hero__content h1 {
+    font-size: var(--step-3);
+  }
+
   .cta-cards__grid {
     grid-template-columns: 1fr; /* Stack cards on smaller screens */
   }

hugo/hugo_stats.json

@@ -35,10 +35,10 @@
       "svg",
       "textarea",
       "title",
-      "ul"
+      "ul",
+      "wrap"
     ],
     "classes": [
-      "2",
       "active",
       "amount",
       "benefits",
@@ -50,13 +50,11 @@
       "board-member-card__role",
       "board-members",
       "browse-buttons",
-      "browse-section",
       "button",
       "callout",
       "callout__icon",
       "callout__text",
       "contact-info",
-      "contact-section",
       "contact-us-page__title",
       "container",
       "content-wrapper",
@@ -65,9 +63,7 @@
       "currency-symbol",
       "date-grid",
       "doula-list",
-      "f",
       "faq",
-      "fieldset-group",
       "find-a-doula-nav",
       "footer",
       "footer-icon",
@@ -89,22 +85,17 @@
       "form",
       "form-group",
       "form__confirmation",
-      "form__date-fields",
       "form__error-message",
       "form__group",
-      "form__group--checkbox",
-      "form__group--radio",
-      "form__grouphalf-width",
       "form__input",
       "form__input--textarea",
       "form__label",
       "full-width",
-      "fw",
-      "half-width",
       "header",
       "headshot",
       "headshot__image",
       "hero",
+      "hero__content",
       "highlight",
       "info-content",
       "input-grid",
@@ -113,7 +104,6 @@
       "main",
       "membership-cta",
       "membership-join",
-      "na",
       "name",
       "nav-card",
       "nav-card__description",
@@ -125,29 +115,22 @@
       "navbar__link",
       "navbar__logo",
       "navbar__nav",
-      "post-submission-section",
+      "org-container",
+      "org-location",
+      "org-name",
       "price",
       "profile-card",
       "profile-card-container",
       "profile-container",
       "search-form",
-      "search-section",
       "single-column",
       "small",
-      "standalone-form",
       "tag",
       "tag-group",
+      "tagline",
       "tags",
-      "test",
-      "test-input",
-      "test-input2",
-      "test-label",
-      "test-label2",
       "text-content",
-      "title",
-      "two-colum",
-      "two-column",
-      "|"
+      "title"
     ],
     "ids": [
       "birth-doula",

hugo/layouts/index.html

@@ -7,8 +7,12 @@
 
 {{ define "hero" }}
   <section class="hero">
-    <h1>Doulas for every step of your birth journey</h1>
+    <div class="tagline">Doulas for every step of your birth journey</div>
     <a href="/find-a-doula/" class="button">Find a Doula</a>
+    <div class="org-container">
+      <span class="org-name">Doula Cooperative</span>
+      <span class="org-location">Rochester, NY</span>
+    </div>
   </section>
 {{ end }}