mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-03-05 21:00:08 -08:00
Homepage (minor) Redesign (#1578)
* update homepage * fix imports * add links * feedback * fix hover on social cards * give card links the same treatment
This commit is contained in:
rcarteraz
GitHub
parent
91d33792de
commit
3af0fc3794
|
|
@ -20,7 +20,7 @@ export const SocialCard = ({
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
<a
|
<a
|
||||||
className="absolute top-0 left-0 right-0 bottom-0 hidden rounded-xl border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
|
className="absolute inset-0 hidden rounded-lg border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
|
||||||
href={link}
|
href={link}
|
||||||
rel={isMeLink ? "me noreferrer" : "noreferrer"}
|
rel={isMeLink ? "me noreferrer" : "noreferrer"}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,12 @@ import Head from "@docusaurus/Head";
|
||||||
import Link from "@docusaurus/Link";
|
import Link from "@docusaurus/Link";
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||||
|
import {
|
||||||
|
CheckCircleIcon,
|
||||||
|
CommandLineIcon,
|
||||||
|
DevicePhoneMobileIcon,
|
||||||
|
GlobeAltIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
import Layout from "@theme/Layout";
|
import Layout from "@theme/Layout";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
@ -145,9 +151,10 @@ function Home() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main className="flex flex-col gap-4">
|
|
||||||
|
<main className="flex flex-col gap-8">
|
||||||
<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
|
<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
|
||||||
<h3 className="text-xl font-bold">Connect with us.</h3>
|
<h3 className="text-xl font-bold">Join the Conversation</h3>
|
||||||
<div className="flex w-full overflow-x-auto gap-2 flex-wrap justify-center">
|
<div className="flex w-full overflow-x-auto gap-2 flex-wrap justify-center">
|
||||||
{SocialCards.map((card) => (
|
{SocialCards.map((card) => (
|
||||||
<SocialCard
|
<SocialCard
|
||||||
|
|
@ -161,61 +168,169 @@ function Home() {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="container mx-auto flex w-auto flex-col gap-8">
|
||||||
<div className="container mx-auto flex w-auto flex-col">
|
<h3 className="text-xl font-bold">Getting Started</h3>
|
||||||
<h2 className="mb-2 text-xl font-medium">
|
<div className="flex flex-wrap justify-center gap-6">
|
||||||
Getting started with Meshtastic is as easy as 1, 2, 3!
|
<div className="flex flex-col items-center">
|
||||||
</h2>
|
<div className="flex items-center gap-2">
|
||||||
<ul
|
<CheckCircleIcon
|
||||||
className="mx-auto relative grid gap-6"
|
className="h-8 w-8"
|
||||||
style={{
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
/>
|
||||||
}}
|
<h4 className="text-lg font-bold">Step 1</h4>
|
||||||
>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card__header flex justify-between">
|
|
||||||
<h3>1. Purchase Supported Hardware</h3>
|
|
||||||
</div>
|
|
||||||
<div className="card__body flex justify-center">
|
|
||||||
<p>
|
|
||||||
Hardware you will want to consider:
|
|
||||||
<ul>
|
|
||||||
<li>Radio</li>
|
|
||||||
<li>Battery</li>
|
|
||||||
<li>Case</li>
|
|
||||||
<li>Antenna</li>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Link
|
||||||
|
to="/docs/hardware/devices/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Choose a Device →
|
||||||
|
</Link>
|
||||||
|
<p className="text-center max-w-xs">
|
||||||
|
Meshtastic devices are available in a variety of configurations
|
||||||
|
to suit your needs.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card">
|
<div className="flex flex-col items-center">
|
||||||
<div className="card__header flex justify-between">
|
<div className="flex items-center gap-2">
|
||||||
<h3>2. Flash & Configure Node</h3>
|
<CheckCircleIcon
|
||||||
</div>
|
className="h-8 w-8"
|
||||||
<div className="card__body flex justify-center">
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
<p>
|
/>
|
||||||
The Meshtastic Web Flasher & Clients can assist you in
|
<h4 className="text-lg font-bold">Step 2</h4>
|
||||||
flashing the firmware and configuring settings.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Link
|
||||||
|
to="/docs/getting-started/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Flash and Configure your Device →
|
||||||
|
</Link>
|
||||||
|
<p className="text-center max-w-xs">
|
||||||
|
Flash your device with the latest version of Meshtastic and
|
||||||
|
configure it to your liking.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card">
|
<div className="flex flex-col items-center">
|
||||||
<div className="card__header flex justify-between">
|
<div className="flex items-center gap-2">
|
||||||
<h3>3. Connect to Node</h3>
|
<CheckCircleIcon
|
||||||
</div>
|
className="h-8 w-8"
|
||||||
<div className="card__body flex justify-center">
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
<p>
|
/>
|
||||||
Applications are available for the following systems:
|
<h4 className="text-lg font-bold">Step 3</h4>
|
||||||
<ul>
|
|
||||||
<li>Android</li>
|
|
||||||
<li>iOS</li>
|
|
||||||
<li>Mac</li>
|
|
||||||
<li>Web Browser</li>
|
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Link
|
||||||
|
to="/docs/getting-started/initial-config/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Connect to your Device →
|
||||||
|
</Link>
|
||||||
|
<p className="text-center max-w-xs">
|
||||||
|
Connect to your device via any of our clients to start sending
|
||||||
|
and receiving messages!
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="container mx-auto flex w-auto flex-col gap-4">
|
||||||
|
<h3 className="text-xl font-bold">Get Connected</h3>
|
||||||
|
<p>
|
||||||
|
Connect and control your Meshtastic devices through various
|
||||||
|
platforms. Choose the client that best fits your needs and device
|
||||||
|
ecosystem.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="container mx-auto flex w-auto flex-wrap justify-center gap-6">
|
||||||
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
||||||
|
<div className="card__header flex justify-between">
|
||||||
|
<h4 className="text-lg font-bold">iOS App</h4>
|
||||||
|
<DevicePhoneMobileIcon
|
||||||
|
className="h-8 w-8"
|
||||||
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card__body flex justify-center">
|
||||||
|
<p>
|
||||||
|
Manage your Meshtastic network on-the-go with our iOS
|
||||||
|
application.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card__footer flex justify-center mt-4">
|
||||||
|
<Link
|
||||||
|
to="/docs/software/apple/installation/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Try it out →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
||||||
|
<div className="card__header flex justify-between">
|
||||||
|
<h4 className="text-lg font-bold">Android App</h4>
|
||||||
|
<DevicePhoneMobileIcon
|
||||||
|
className="h-8 w-8"
|
||||||
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card__body flex justify-center">
|
||||||
|
<p>
|
||||||
|
Connect and control your Meshtastic devices using our Android
|
||||||
|
application.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card__footer flex justify-center mt-4">
|
||||||
|
<Link
|
||||||
|
to="/docs/software/android/installation/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Try it out →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
||||||
|
<div className="card__header flex justify-between">
|
||||||
|
<h4 className="text-lg font-bold">Web Client</h4>
|
||||||
|
<GlobeAltIcon
|
||||||
|
className="h-8 w-8"
|
||||||
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card__body flex justify-center">
|
||||||
|
<p>
|
||||||
|
Access your Meshtastic network from any device with our
|
||||||
|
web-based client.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card__footer flex justify-center mt-4">
|
||||||
|
<Link
|
||||||
|
to="https://client.meshtastic.org"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Try it out →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
||||||
|
<div className="card__header flex justify-between">
|
||||||
|
<h4 className="text-lg font-bold">Python CLI/SDK</h4>
|
||||||
|
<CommandLineIcon
|
||||||
|
className="h-8 w-8"
|
||||||
|
style={{ color: "var(--ifm-color-primary)" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card__body flex justify-center">
|
||||||
|
<p>
|
||||||
|
Command-line interface and software development kit for Python
|
||||||
|
developers and power users.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="card__footer flex justify-center mt-4">
|
||||||
|
<Link
|
||||||
|
to="/docs/software/python/cli/installation/"
|
||||||
|
className="mt-1 underline hover:no-underline font-semibold"
|
||||||
|
>
|
||||||
|
Try it out →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue