Build and design homepage

README.md

@@ -1,21 +1,35 @@
-# MARINA coming-soon page
+# MARINA Jekyll theme starter
 
-A minimal Jekyll, Tailwind CSS, and daisyUI page using the supplied maritime image.
+A one-page Jekyll starter based on the supplied dataset landing-page design. It uses Tailwind CSS 3 and daisyUI 4. Editors manage homepage content from the clearly commented front matter in `index.md`, while site-wide header, navigation, and footer settings live in `_data/site.yml`.
 
 ## Run locally
 
+Requirements: Ruby 3+, Bundler, and Node 18+.
+
 ```bash
 bundle install
 npm install
 npm run dev
 ```
 
-Then open `http://127.0.0.1:4000`.
+Open `http://127.0.0.1:4000` or `http://localhost:4000`.
+
+## Production build
+
+```bash
+npm run build
+```
+
+The generated site will be in `_site/`.
 
-## Edit content
+## Editing content
 
-- `index.md` controls the background image, eyebrow, headline, body text, and optional button.
-- `_data/site.yml` controls the brand name and footer organization.
-- Replace `assets/images/coming-soon-background.jpg` or update `background_image` in `index.md`.
+- `index.md` — the single content-editing file for the homepage
+- `_data/site.yml` — site-wide branding, navigation, header CTA, and footer organization
+- `_layouts/home.html` — protected page structure and Liquid templates
+- `tailwind.config.js` — brand colors and the daisyUI theme
+- `assets/css/tailwind.css` — reusable Tailwind component classes
+- `_includes/header.html` and `_includes/footer.html` — shared chrome
+- `assets/js/navigation.js` — reveals the separate fixed navigation after the hero tiles scroll away
 
-Remove the complete `button:` block from `index.md` if the page should not have a call to action.
+Keep URLs beginning with `#` in quotation marks, for example `url: "#overview"`. For button styles, use only `primary` or `outline`.

_config.yml

@@ -16,4 +16,4 @@ defaults:
   - scope:
       path: ""
     values:
-      layout: coming-soon
+      layout: default

_data/site.yml

@@ -1,5 +1,38 @@
+# ==================================================
+# SITE-WIDE BRANDING, CALL TO ACTION, AND NAVIGATION
+# ==================================================
+
 brand:
-  name: MARINA
+  logo:
+    src_reversed: "/assets/images/logo-white.svg"
+    src: "/assets/images/logo.svg"
+    alt: MARINA
+
+cta:
+  button:
+    label: Get the data
+    url: "#releases"
+
+# These links populate both the homepage navigation tiles and fixed header.
+# Always quote URLs beginning with # because YAML treats # as a comment.
+navigation:
+  - label: Overview
+    url: "#overview"
+  - label: Difference
+    url: "#difference"
+  - label: Releases
+    url: "#releases"
+  - label: Leaderboard
+    url: "#leaderboards"
+  - label: Inquiries
+    url: "#inquiries"
+  - label: Citation
+    url: "#citation"
 
 footer:
+  disclaimer: >-
+    Funded by DARPA under MARINA program, contract W912CG-24-C-0020<br>
+    Disclaimer (DARPA)<br>
+    Data owned by Ocean Networks Canada and available under CC-BY 4.0<br>
+    <a class="text-secondary" href="https://www.oceannetworks.ca/data/data-policy/">https://www.oceannetworks.ca/data/data-policy/</a>
   organization: Kitware, Inc.

_includes/footer.html

@@ -0,0 +1,12 @@
+<footer class="border-t border-base-300 py-8 text-xs">
+  <div class="site-container">
+    <div class="lg:flex lg:items-start lg:space-y-0 space-y-8">
+      <div class="lg:text-left lg:w-2/3 text-base-content/50 leading-normal">
+        {{ site.data.site.footer.disclaimer }}
+      </div>
+      <div class="lg:text-right lg:w-1/3 text-base-content/50 uppercase tracking-[0.2em]">
+        © {{ "now" | date: "%Y" }} {{ site.data.site.footer.organization | escape }}
+      </div>
+    </div>
+  </div>
+</footer>

_includes/header.html

@@ -0,0 +1,25 @@
+<header id="fixed-navigation" class="pointer-events-none fixed inset-x-0 top-0 z-50 -translate-y-full border-b border-base-300 bg-white/95 opacity-0 shadow-sm backdrop-blur transition-all duration-300" aria-hidden="true" inert>
+  <div class="mx-auto flex h-16 w-full max-w-7xl items-center gap-8 px-6 lg:px-8">
+    <a href="#top" class="block shrink-0">
+      <img
+        src="{{ site.data.site.brand.logo.src | relative_url }}"
+        alt="{{ site.data.site.brand.logo.alt | escape }}"
+        class="h-8 w-auto"
+      >
+    </a>
+    <nav class="hidden min-w-0 items-center xl:flex" aria-label="Fixed page navigation">
+      {% for item in site.data.site.navigation %}
+        <a class="btn btn-ghost btn-sm whitespace-nowrap font-medium text-navy-950" href="{{ item.url }}">{{ item.label | escape }}</a>
+      {% endfor %}
+    </nav>
+    <div class="ml-auto flex shrink-0 items-center gap-2">
+      <details class="dropdown dropdown-end xl:hidden">
+        <summary class="btn btn-ghost btn-square btn-sm text-navy-950" aria-label="Open navigation">☰</summary>
+        <ul class="menu dropdown-content z-[1] mt-3 w-56 border border-base-300 bg-white p-2 text-navy-950 shadow-panel">
+          {% for item in site.data.site.navigation %}<li><a href="{{ item.url }}">{{ item.label | escape }}</a></li>{% endfor %}
+        </ul>
+      </details>
+      <a class="btn btn-primary btn-sm shrink-0 whitespace-nowrap rounded-none" href="{{ site.data.site.cta.button.url }}">{{ site.data.site.cta.button.label | escape }}</a>
+    </div>
+  </div>
+</header>

_layouts/default.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en" data-theme="marina">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="{{ page.description | default: site.description }}">
+    <title>{{ page.title | default: site.title }}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="{{ '/assets/vendor/remixicon/remixicon.css' | relative_url }}"
+    >
+    <link rel="stylesheet" href="{{ '/assets/css/site.css' | relative_url }}">
+  </head>
+  <body>
+    {% include header.html %}
+    <main>{{ content }}</main>
+    {% include footer.html %}
+    <script src="{{ '/assets/js/navigation.js' | relative_url }}" defer></script>
+    <script src="{{ '/assets/js/web-form.js' | relative_url }}" defer></script>
+    <script src="{{ '/assets/js/uniqueship-scripts.js' | relative_url }}" defer></script>
+
+  </body>
+</html>