Getting started - Draft

_data/navigation.yml

@@ -1,4 +1,6 @@
 main:
+  - title: "Getting Started"
+    url: "/getting-started/"
   - title: "About"
     url: "/about"
   - title: "Spec"

assets/css/main.scss

@@ -110,3 +110,146 @@ textarea {
   outline: none;
   transition: border-color 0.2s;
 }
+
+.feature__wrapper {
+  text-align: center;
+}
+
+/* Getting Started */
+
+.getting-started__lede {
+  max-width: 52rem;
+  margin: 0 0 2rem;
+  color: $light-gray;
+  font-size: 1.2em;
+  line-height: 1.6;
+}
+
+.role-grid,
+.benefit-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0 3rem;
+}
+
+.role-card {
+  display: flex;
+  min-height: 11rem;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1.3rem;
+  color: inherit;
+  background: linear-gradient(145deg, #1e232e, #151922);
+  border: 1px solid #303847;
+  border-radius: 1rem;
+  text-decoration: none;
+  text-align: center;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
+
+  &:hover {
+    color: inherit;
+    border-color: $primary-color;
+    transform: translateY(-2px);
+  }
+
+  strong {
+    margin-bottom: 0.35rem;
+    color: #fff;
+    font-size: 1.15em;
+  }
+
+  span:last-child {
+    color: $light-gray;
+    font-size: 0.88em;
+    line-height: 1.45;
+  }
+}
+
+.role-card--primary {
+  background: linear-gradient(
+    145deg,
+    rgba($primary-color, 0.27),
+    rgba($primary-color, 0.08)
+  );
+  border-color: rgba($primary-color, 0.7);
+}
+
+.role-card__eyebrow {
+  margin-bottom: 0.75rem;
+  color: rgb(198, 157, 235) !important;
+  font-size: 0.7em !important;
+  font-weight: bold;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.role-card__icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: auto;
+  scale: 1;
+  transition: scale 0.2s;
+}
+
+.role-card:hover .role-card__icon {
+  /* Overwrite box-shadow for hovering on images in links */
+  box-shadow: none !important;
+  scale: 1.1;
+}
+
+.benefit-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-bottom: 2rem;
+}
+
+.benefit-card {
+  padding: 1.25rem;
+  background: #181d27;
+  border: 1px solid #29313e;
+  border-radius: 0.75rem;
+
+  h4 {
+    margin: 0 0 0.5rem;
+    border-bottom: 0;
+  }
+
+  p {
+    margin: 0;
+    color: $light-gray;
+  }
+}
+
+.start-path {
+  @include notice($primary-color);
+  font-size: revert !important;
+  border-left: 3px solid $primary-color;
+
+  a {
+    color: $link-color;
+
+    &:hover {
+      color: $link-color-hover;
+    }
+  }
+}
+
+.getting-started__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin: 1.5rem 0;
+}
+
+@media (max-width: 700px) {
+  .role-grid,
+  .benefit-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .role-card {
+    min-height: 9rem;
+  }
+}

getting-started.md

@@ -0,0 +1,174 @@
+---
+title: Getting Started
+layout: single
+permalink: /getting-started/
+description: Learn what OpenTag3D can do and how users, developers, and filament manufacturers can get started.
+---
+
+<p class="getting-started__lede">
+  <strong>Self-aware filament.</strong> Let every spool tell your printer and
+  slicer what it is and how it should be used. Automatic setup. Fewer mistakes.
+</p>
+
+<nav class="role-grid" aria-label="Choose how you want to use OpenTag3D">
+  <a class="role-card role-card--primary" href="#for-people-who-print">
+    <span class="role-card__eyebrow">I print things</span>
+    <img class="role-card__icon" src="/assets/images/getting-started-user.svg" alt="" aria-hidden="true">
+    <strong>Start or enhance your 3D printing journey</strong>
+    <span>See why tags are useful and how to use them.</span>
+  </a>
+  <a class="role-card" href="#for-developers">
+    <span class="role-card__eyebrow">I design and build tools</span>
+    <img class="role-card__icon" src="/assets/images/getting-started-developer.svg" alt="" aria-hidden="true">
+    <strong>Develop with OpenTag3D</strong>
+    <span>Read the specification and explore the source.</span>
+  </a>
+  <a class="role-card" href="#for-manufacturers">
+    <span class="role-card__eyebrow">I make filament or hardware</span>
+    <img class="role-card__icon" src="/assets/images/getting-started-manufacturer.svg" alt="" aria-hidden="true">
+    <strong>Adopt the open, decentralized standard</strong>
+    <span>Add support without fees, licenses, or lock-in.</span>
+  </a>
+</nav>
+
+## For people who print
+
+### Why does filament need an RFID tag?
+
+An RFID tag gives every spool a digital identity. It carries the filament's
+material, color, recommended settings, and other useful details. Compatible
+printers and slicers can read that information automatically, so you spend less
+time adjusting profiles, catch incompatible settings before a print starts,
+and keep your filament organized.
+
+<div class="benefit-grid" markdown="1">
+
+<div class="benefit-card" markdown="1">
+
+#### Save Time
+
+Your spool can provide its configuration and profiles for you. Change materials
+or colors without manually changing your print settings.
+
+</div>
+
+<div class="benefit-card" markdown="1">
+
+#### Make Less Mistakes
+
+Your printer can warn you when your settings fall outside the filament's
+specifications, helping catch errors that could cause a print to fail before it
+starts.
+
+</div>
+
+<div class="benefit-card" markdown="1">
+
+#### Be More Organized
+
+Every tag identifies its spool, including details such as color, material, and
+serial number. Use that information for inventory and organization that ties
+directly into your printers.
+
+</div>
+
+</div>
+
+### What can it enable?
+
+OpenTag3D is a standard, not a single app or product. It gives projects a common
+set of data they can use to build features such as:
+
+- **Automatic slicer profiles:** Load settings from the filament instead of
+  finding and entering them by hand.
+- **Inventory management:** Identify each spool uniquely and keep its material,
+  color, and other details together.
+- **Automatic dryer settings:** Select an appropriate temperature and duration
+  for the material, reducing the risk of a drying mistake.
+- **Filament-remaining estimates:** Use the tag as a rotation marker and combine
+  it with the stored core diameter, or weigh the spool and subtract the stored
+  empty-spool weight.
+
+> [!NOTE]
+> These are capabilities the standard makes possible. Availability depends on
+> the printer, slicer, accessory, or community project you use.
+
+### I’m sold. How do I start?
+
+#### 1. Use filament and projects that already support OpenTag3D
+
+This is the easiest route: buy a tagged spool, then use it with a compatible
+printer, accessory, slicer, or community project. See the current
+[supporters and implementation status](/about#supporters).
+
+#### 2. Write your own tags
+
+Buy compatible NFC tags, enter the spool information in
+[Make a Tag](/make), and write the result using one of the methods below. The
+specification is designed around **NTAG215** tags; **NTAG216** tags are also
+supported.
+
+Some filament companies provide a lookup that fills in product data for you:
+
+- [Polar Filament](https://pfil.us/rfid)
+
+If the manufacturer does not offer a lookup, you can enter the information
+yourself.
+
+##### With a phone (recommended)
+
+- **Android:** Open [Make a Tag](/make) in a [Web NFC-compatible browser](https://caniuse.com/webnfc). You can
+  create, read, and write a tag directly from the page.
+- **iPhone:** A native app is required. OpenTag3D-compatible iPhone apps are in
+  development, but none are available yet.
+
+###### OpenTag3D phone apps
+
+| Platform | Available apps                                               |
+| -------- | ------------------------------------------------------------ |
+| Android  | None yet. Use the [Web NFC tag tool](/make) in the meantime. |
+| iPhone   | None yet.                                                    |
+
+Building an app? Let us know so it can be added here.
+
+##### With a computer (advanced)
+
+- **NFC Tools Desktop:** Use a USB NFC reader such as the ACR122U (typically
+  around $30) to read and write tags. Follow Polar Filament’s
+  [OpenTag3D NFC Tools guide](https://pfil.us/opentag3d.php).
+- **Proxmark3:** Use this popular RFID development toolkit with the Proxmark3
+  export provided by [Make a Tag](/make).
+
+##### With a Flipper Zero
+
+The hardware is capable of reading and writing compatible tags, but the full
+OpenTag3D workflow is not finished yet. This is not currently a recommended
+getting-started path.
+
+## For developers
+
+OpenTag3D is openly documented and its source is available on GitHub. Start with
+the specification, then use the existing source and community projects as
+implementation references.
+
+<div class="getting-started__actions">
+  <a class="btn btn--primary" href="/spec">Read the specification</a>
+  <a class="btn" href="https://github.com/GooborgStudios/OpenTag3D">View the source on GitHub</a>
+</div>
+
+The [reader implementation guidelines](/spec#reader-implementation-guidelines)
+cover the details most hardware and firmware integrations need first.
+
+## For manufacturers
+
+OpenTag3D is free to adopt. There are **no licensing fees, required vendors, or
+certification requirements**. You can source tags and readers entirely on your
+own, manufacture your own solution, and implement as much of the open standard
+as your product needs.
+
+There is no central service that your product must depend on. The essential
+filament data lives on the tag and works offline; optional web lookups can be
+hosted by the manufacturer or another provider. OpenTag3D is both open source
+and decentralized.
+
+Please feel free to [contact the project maintainers](/about#contact) to discuss implementation. We can walk through the getting-started documentation, answer integration questions, and help you avoid common hardware and data-format pitfalls.

index.md

@@ -9,13 +9,15 @@ header:
   overlay_filter: "0.6"
   overlay_image: /assets/images/background.jpg
   actions:
+    - label: "Get Started"
+      url: "/getting-started/"
     - label: "View Spec"
       url: "/spec"
   announcement: "[OpenTag3D v2.0](./articles/v2-already) is out now!"
   caption: "Placeholder Background by [**morgaannn23**](https://wallpapercave.com/w/wp6945227)"
 excerpt: "An open source standard for 3D printer filament RFID tags. Designed from the ground up for compatibility between printers, filament manufacturers, and accessories, implementation is simple and low-cost."
 intro:
-  - excerpt: "Proprietary locks you in. Open sets you free. — [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/)"
+  - excerpt: "Proprietary locks you in. Open sets you free. [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/)"
 feature_row:
   - title: "Low-Cost, Off-the-Shelf Hardware"
     excerpt: "OpenTag3D uses standard NFC tags (NTAG215/216). These tags are readable and writable by smartphones, compatible with most off-the-shelf RFID/NFC readers (including low-cost PN532 modules), and require no proprietary hardware. This allows everyone, from corporations to hobbyists, to implement the standard into their applications, printers or accessories."