feat: refactor to remove www

resolves #4

src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,71 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Easy to Use',
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: 'Focus on What Matters',
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: 'Powered by React',
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({title, Svg, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): ReactNode {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/css/custom.css

@@ -0,0 +1,215 @@
+/**
+ * Butter brand styles — ported from the Jekyll _scss folder.
+ * Infima variables are overridden to match the original palette and typography.
+ */
+
+/* ---- Fonts ---- */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-regular.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-600.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-600.woff') format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-700.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-700.woff') format('woff');
+}
+@font-face {
+  font-family: 'Prata';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/prata-v13-latin-regular.woff2') format('woff2'),
+       url('/fonts/prata-v13-latin-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/inter-v3-latin-regular.woff2') format('woff2'),
+       url('/fonts/inter-v3-latin-regular.woff') format('woff');
+}
+
+/* ---- Brand variables ---- */
+:root {
+  --butter-white: #ffffff;
+  --butter-cream: #FFFBEB;
+  --butter-black: #000000;
+  --butter-dark-gray: #242424;
+  --butter-gray: #595959;
+  --butter-gold: #FFDF3F;
+  --butter-shade-gold: #EECF06;
+  --butter-royal-blue: #6166E9;
+
+  --butter-base-font: 'Poppins', sans-serif;
+  --butter-text-font: 'Prata', serif;
+  --butter-footer-font: 'Inter', sans-serif;
+
+  /* Infima overrides */
+  --ifm-color-primary: #6166E9;
+  --ifm-color-primary-dark: #464cdf;
+  --ifm-color-primary-darker: #3a40dc;
+  --ifm-color-primary-darkest: #2127b8;
+  --ifm-color-primary-light: #7c80ed;
+  --ifm-color-primary-lighter: #888cef;
+  --ifm-color-primary-lightest: #aeb0f4;
+  --ifm-font-family-base: var(--butter-base-font);
+  --ifm-heading-font-family: var(--butter-base-font);
+  --ifm-navbar-background-color: var(--butter-gold);
+  --ifm-footer-background-color: var(--butter-shade-gold);
+  --ifm-footer-color: var(--butter-dark-gray);
+  --ifm-footer-link-color: var(--butter-dark-gray);
+  --ifm-footer-title-color: var(--butter-dark-gray);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --ifm-color-primary: #FFDF3F;
+  --ifm-color-primary-dark: #f5d10b;
+  --ifm-color-primary-darker: #e8c60b;
+  --ifm-color-primary-darkest: #bfa309;
+  --ifm-color-primary-light: #ffe668;
+  --ifm-color-primary-lighter: #ffe97a;
+  --ifm-color-primary-lightest: #fff0a6;
+  --ifm-background-color: #242424;
+  --ifm-navbar-background-color: #4a3f07;
+  --ifm-footer-background-color: #1b1b1b;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+/* ---- General typography ---- */
+body {
+  font-family: var(--butter-base-font);
+  font-weight: 400;
+}
+
+/* ---- Butter hero band (gold) ---- */
+.butter-hero {
+  background-color: var(--butter-gold);
+  padding: 3.5rem 0 3rem;
+  text-align: center;
+}
+.butter-hero .hero-logo {
+  display: block;
+  margin: 0 auto 1.25rem;
+  max-width: 240px;
+  width: 60%;
+  height: auto;
+}
+.butter-hero .hero-title {
+  font-size: 42px;
+  font-weight: 800;
+  color: var(--butter-black);
+  margin: 0 0 .75rem;
+}
+.butter-hero .hero-subtitle {
+  font-family: var(--butter-text-font);
+  font-size: 22px;
+  color: var(--butter-black);
+  letter-spacing: .4px;
+  line-height: 1.5;
+  max-width: 760px;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .butter-hero { padding: 2.25rem 0 2rem; }
+  .butter-hero .hero-title { font-size: 32px; }
+  .butter-hero .hero-subtitle { font-size: 18px; }
+}
+
+/* ---- Content area (lighter cream background) ---- */
+.butter-content {
+  background-color: var(--butter-cream);
+  padding: 3.5rem 0 4rem;
+}
+[data-theme='dark'] .butter-content {
+  background-color: var(--ifm-background-color);
+}
+.butter-content .section {
+  max-width: 760px;
+  margin: 0 auto 2.5rem;
+  text-align: center;
+}
+.butter-content .section:last-child {
+  margin-bottom: 0;
+}
+.butter-content h2 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 .75rem;
+}
+.butter-content .content-text {
+  font-family: var(--butter-text-font);
+  font-size: 20px;
+  line-height: 1.6;
+  color: var(--butter-black);
+  letter-spacing: .4px;
+  margin: 0 0 1.25rem;
+}
+[data-theme='dark'] .butter-content .content-text,
+[data-theme='dark'] .butter-content h2 {
+  color: var(--ifm-font-color-base);
+}
+@media (max-width: 768px) {
+  .butter-content .content-text { font-size: 17px; }
+  .butter-content h2 { font-size: 24px; }
+}
+
+/* ---- Device image ---- */
+.butter-content .device-image {
+  margin: 1rem auto 2.5rem;
+  text-align: center;
+}
+.butter-content .device-image img {
+  display: block;
+  margin: 0 auto;
+  max-width: 70%;
+  border-radius: 8px;
+}
+.butter-content .device-image .caption {
+  font-family: var(--butter-text-font);
+  font-size: 15px;
+  color: var(--butter-gray);
+  margin: .75rem auto 0;
+  max-width: 70%;
+}
+
+/* ---- Pill button matching the original .btn-main ---- */
+.btn-main {
+  display: inline-block;
+  font-weight: 600;
+  color: var(--butter-white);
+  text-align: center;
+  user-select: none;
+  background-color: var(--butter-royal-blue);
+  border: 1px solid var(--butter-royal-blue);
+  padding: 1.25em 2.75em;
+  font-size: 12px;
+  letter-spacing: 1px;
+  line-height: 1.5;
+  border-radius: 50rem;
+  transition: all .2s ease;
+  text-decoration: none;
+  margin-bottom: 10px;
+}
+.btn-main:hover,
+.btn-main:focus {
+  background-color: #7378ec;
+  color: var(--butter-white);
+  text-decoration: none;
+}

src/pages/contact.mdx

@@ -0,0 +1,13 @@
+
+# Get In Touch
+
+Our "Smooth Operators" team is a growing global community of ButterBox experts, evangelists, and developers. 
+
+You can join our [public operator chat on Signal](https://signal.group/#CjQKIOQaHtO3PYCfsVjxGOCSWvZXivQPyl0L0CafAQm7IPjnEhDyVcw3F4c57xyJiUmfAWMh).
+
+We provide support through our "Global Support Link" help desk available through email and most messaging apps.
+
+Email: [help@globalsupport.link](mailto:help@globalsupport.link)
+Signal or WhatsApp: [+447886176827](https://wa.me/+447886176827) | Telegram: [@GlobalSupportLink_bot](https://t.me/GlobalSupportLink_bot) | Send SMS via: +12494682242
+
+![Butter map](/img/buttermap.png)

src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/pages/index.tsx

@@ -0,0 +1,114 @@
+import type {ReactNode} from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+
+import Translate, {translate} from '@docusaurus/Translate';
+
+const CONTACT_US = '/contact';
+const BOOT_IMAGES = '/docs/build-a-box';
+const REPO = 'https://guardianproject.dev/butter';
+const DOCS = '/docs';
+
+function Hero() {
+  return (
+    <header className="butter-hero">
+      <div className="container">
+        <img
+          className="hero-logo"
+          src="/img/butter-logo-feature-large.svg"
+          alt="Butter App Feature Logo"
+        />
+        <Heading as="h1" className="hero-title">
+          <Translate id="home.title">Introducing Butter Box</Translate>
+        </Heading>
+        <p className="hero-subtitle">
+          <Translate id="home.subtitle1">Life without internet made smoother.</Translate><br/>
+	  <Translate id="home.subtitle2">Get access to tools that help.</Translate>
+        </p>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): ReactNode {
+  return (
+    <Layout
+      title="Introducing Butter Box"
+      description="Life without internet made smoother. Get access to tools that help.">
+      <Hero />
+      <main className="butter-content">
+        <div className="container">
+          <div className="device-image">
+            <img
+              src="/img/butterhome.jpg"
+              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
+            />
+            <p className="caption">
+              <Translate id="home.whatisbutterbox">An app store, encrypted chat, and more, all available over WiFi from an off-the-grid Raspberry Pi.</Translate>
+            </p>
+          </div>
+
+          <section className="section">
+            <Heading as="h2"><Translate id="home.section1.title">How does it work?</Translate></Heading>
+            <p className="content-text">
+              <Translate id="home.section1.description">Butter Box broadcasts its own WiFi network. Once you join, you
+              can install Butter, get apps, join a public chatroom, or make
+              your own private one to share with friends. Butter Box works
+              even when there&apos;s no Internet. Just stop by the box to
+              download more apps or check in on your chatrooms. Everything is
+              stored right on the Butter Box.</Translate>
+            </p>
+            <img
+              src="/img/docs/20250815_142828.jpg"
+              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
+            />
+            <a className="btn-main" href={DOCS}>
+              <Translate id="home.learnmore">Learn More</Translate>
+            </a>
+          </section>
+
+          <section className="section">
+            <Heading as="h2"><Translate id="home.getbutter.title">Get your own Butter Box</Translate></Heading>
+            <p className="content-text">
+              <Translate id="home.getbutter.description">We help make &amp; ship Butter Boxes to partners around the world.
+              Reach out to us if you serve a community that could benefit.</Translate>
+            </p>
+            <a className="btn-main" href={`${CONTACT_US}`}>
+             <Translate id="home.getintouch">Get in Touch</Translate> 
+            </a>
+          </section>
+
+          <section className="section">
+            <Heading as="h2"><Translate id="home.makebutter.title">Make your own Butter Box</Translate></Heading>
+            <p className="content-text">
+              <Translate id="home.makebutter.description">You can make your own Butter Box by installing a pre-made image
+              on a Raspberry Pi or even an old PC. Just download the image and burn it onto a
+              MicroSD card or USB drive using the same RPi or Disk Imager you&apos;d use to install
+              other distros.</Translate>
+            </p>
+            <a
+              className="btn-main"
+              href={BOOT_IMAGES}>
+		<Translate id="home.learnhow">Learn How!</Translate>
+            </a>
+            <p className="content-text" style={{marginTop: '1.5rem'}}>
+              <Translate id="home.getcode.title">Or, customize your Butter Box following the instructions in our
+              open source repository.</Translate>
+            </p>
+            <a
+              className="btn-main"
+              href={`${REPO}`}>
+              <Translate id="home.getsource.button">Source &amp; Documentation</Translate>
+            </a>
+          </section>
+	  <section className="section">
+          ButterBox is built by the teams from <a href="https://guardianproject.info">Guardian Project</a>, <a href="https://sr2.uk">SR2</a>, and <a href="https://okthanks.com">Okthanks</a><br/>
+with the support of <a href="https://f-droid.org">F-Droid</a>, <a href="https://ffdweb.org/">FFDW</a>, and the <a href="https://www.opentech.fund/">Open Technology Fund</a><br/>
+<img src="https://guardianproject.info/images/wordlogo.svg"/>
+	</section>
+        </div>
+
+      </main>
+    </Layout>
+  );
+}

src/pages/markdown-page.mdx

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.