mirror of
https://github.com/meshtastic/meshtastic.git
synced 2024-12-25 21:54:20 -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}
|
||||
<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}
|
||||
rel={isMeLink ? "me noreferrer" : "noreferrer"}
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@ import Head from "@docusaurus/Head";
|
|||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
CommandLineIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
GlobeAltIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
import {
|
||||
|
|
@ -145,9 +151,10 @@ function Home() {
|
|||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
{SocialCards.map((card) => (
|
||||
<SocialCard
|
||||
|
|
@ -161,61 +168,169 @@ function Home() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto flex w-auto flex-col">
|
||||
<h2 className="mb-2 text-xl font-medium">
|
||||
Getting started with Meshtastic is as easy as 1, 2, 3!
|
||||
</h2>
|
||||
<ul
|
||||
className="mx-auto relative grid gap-6"
|
||||
style={{
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||||
}}
|
||||
>
|
||||
<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 className="container mx-auto flex w-auto flex-col gap-8">
|
||||
<h3 className="text-xl font-bold">Getting Started</h3>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleIcon
|
||||
className="h-8 w-8"
|
||||
style={{ color: "var(--ifm-color-primary)" }}
|
||||
/>
|
||||
<h4 className="text-lg font-bold">Step 1</h4>
|
||||
</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 className="card">
|
||||
<div className="card__header flex justify-between">
|
||||
<h3>2. Flash & Configure Node</h3>
|
||||
</div>
|
||||
<div className="card__body flex justify-center">
|
||||
<p>
|
||||
The Meshtastic Web Flasher & Clients can assist you in
|
||||
flashing the firmware and configuring settings.
|
||||
</p>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleIcon
|
||||
className="h-8 w-8"
|
||||
style={{ color: "var(--ifm-color-primary)" }}
|
||||
/>
|
||||
<h4 className="text-lg font-bold">Step 2</h4>
|
||||
</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 className="card">
|
||||
<div className="card__header flex justify-between">
|
||||
<h3>3. Connect to Node</h3>
|
||||
</div>
|
||||
<div className="card__body flex justify-center">
|
||||
<p>
|
||||
Applications are available for the following systems:
|
||||
<ul>
|
||||
<li>Android</li>
|
||||
<li>iOS</li>
|
||||
<li>Mac</li>
|
||||
<li>Web Browser</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleIcon
|
||||
className="h-8 w-8"
|
||||
style={{ color: "var(--ifm-color-primary)" }}
|
||||
/>
|
||||
<h4 className="text-lg font-bold">Step 3</h4>
|
||||
</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>
|
||||
</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>
|
||||
<br />
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue