adding service offerings and a few styling fixes for mobile

This commit is contained in:
B
2026-07-06 16:25:14 -07:00
parent 696596068f
commit 7df9adc69a
3 changed files with 62 additions and 14 deletions
+6 -6
View File
@@ -8,9 +8,9 @@ interface NavbarProps {
const NAV_ITEMS = [
{ href: "/#aboutus", label: "About Us", activeKey: "AboutUs", text: "text-red-400", darkText: "dark:text-red-400" },
{ href: "/#whatwereupto", label: "What We're Up To", activeKey: "WhatWereUpTo", text: "text-orange-400", darkText: "dark:text-orange-400" },
{ href: "/#services", label: "Services", activeKey: "Services", text: "text-green-400", darkText: "dark:text-green-400" },
{ href: "/#bigtechalternatives", label: "Big Tech Alternatives", activeKey: "BigTechAlternatives", text: "text-purple-400", darkText: "dark:text-purple-400" },
// TODO once we have these sections done!
// { href: "", label: "Services", activeKey: "Services", text: "text-green-400", darkText: "dark:text-green-400" },
// TODO once we have this section done!
// { href: "", label: "Calendar", activeKey: "Calendar", text: "text-blue-400", darkText: "dark:text-blue-400" },
];
@@ -19,7 +19,7 @@ export default function Navbar(navbarProps: NavbarProps) {
const [isShowingHamburgerFullMenu, setIsShowingHamburgerFullMenu] = useState(false);
return (
<div className={cn("bg-white dark:bg-black")}>
<div className={cn("bg-white dark:bg-black px-4")}>
<div className={cn("flex flex-row items-center justify-between pb-4 pt-4")}>
<a href="/" onClick={() => { setActivePage("Home") }}>
<div className={cn("flex items-center gap-3")}>
@@ -33,7 +33,7 @@ export default function Navbar(navbarProps: NavbarProps) {
/> */}
<h1 className={cn(
"text-2xl md:text-4xl font-bold",
"text-2xl md:text-3xl font-bold",
activePage === "Home" && "underline",
)}>Resist Tech Monopolies</h1>
</div>
@@ -48,7 +48,7 @@ export default function Navbar(navbarProps: NavbarProps) {
setActivePage(activeKey)
}}
className={cn(
"transition-colors text-xl md:text-2xl font-bold",
"transition-colors md:text-2xl font-bold",
text,
darkText,
activePage == activeKey && "underline",
@@ -66,7 +66,7 @@ export default function Navbar(navbarProps: NavbarProps) {
</div>
</div>
{isShowingHamburgerFullMenu && <div className={cn("flex md:hidden flex-col gap-4 bg-[#ece8fc] p-2 mb-2")}>
{isShowingHamburgerFullMenu && <div className={cn("flex md:hidden flex-col gap-4 bg-white p-2 mb-2")}>
{NAV_ITEMS.map(({ href, label, activeKey, text, darkText }) => (
<a
key={href}
+47
View File
@@ -0,0 +1,47 @@
<h1 class="text-3xl font-semibold">Services</h1>
<section class="flex flex-col">
<h2 class="text-2xl font-semibold mt-4">Our Mission</h2>
We promote free and open source options with a non-judgmental attitude. We understand
that almost everyone ends up using Big Tech software sometimes. We want to help
you meet your own goals, whether it be reducing what you pay big corporations or
increasing your privacy.
<h2 class="text-2xl font-semibold mt-4">Managed Service Hosting</h2>
We offer individuals and organizations access to a suite of open-source, privacy-friendly
tools, including: • NextCloud (alternative to Google Workspace, Microsoft 365,
etc.) • Loomio (democratic, asynchronous decision-making platform) • Zulip (alternative
to Slack, Teams, Discord) • Keycloak (Single Sign-On/SSO) • Vaultwarden (password
manager) • Headscale (VPN) • Matrix (decentralized, federated alternative to Discord)
• Immich (alternative to Google Photos) Our team has decades of collective expertise
in cloud computing and open-source software. We're patient, responsive to users'
needs, and skilled at translating from tech jargon to plain language.
<h2 class="text-2xl font-semibold mt-4">Data Migration</h2>
We know a lot of people want to move away from the Big Tech ecosystem but feel
overwhelmed and don't know where to start. We've been doing this for years, and
we know how to help you move your data away from Big Tech and select appropriate,
privacy-friendly, open-source alternatives that still meet your needs. We offer
individual, organization, and family pricing.
<h2 class="text-2xl font-semibold mt-4">Training</h2>
We offer in-person events to help individuals and organizations understand the
risks of Big Tech, improve their digital security, and learn about privacy-friendly,
open-source alternatives. Here are a few of the events we've held: • DiscoTechs
(science-fair style event where you can learn about a variety of alternatives to
Big Tech) • Digital Security workshops (hands-on sessions to improve your security
posture and understand what threats are actually relevant for you and your organization)s
• Office Hours (drop-in IT help)
<h2 class="text-2xl font-semibold mt-4">Tech Consulting</h2>
Does your organization need help choosing IT tools? Need a website built or hosted?
Maybe you want to self-host your own server infrastructure, but need a little support.
Whatever your tech needs, just drop us a line, and we'll see if we can help.
<a
href="https://nextcloud.resisttechmonopolies.online/apps/forms/4LrRffxHzHqwCrgs/submit"
class="max-w-[120px] rounded-sm bg-[#4ade80] my-4 px-6 py-3 text-center font-semibold text-white transition-colors"
>
Hire us!
</a>
</section>
+9 -8
View File
@@ -5,15 +5,16 @@ import BigTechAlternatives from "@/components/BigTechAlternatives.astro";
import WhatWereUpTo from "@/components/WhatWereUpTo.astro";
import Layout from "@/layouts/Layout.astro";
import "@/styles/globals.css";
import Services from "@/components/Services.astro";
---
<Layout>
<main class="px-4">
<main>
<section class="sticky top-0">
<Navbar client:load activePage="Home"/>
<Navbar client:load activePage="Home" />
</section>
<section id="aboutus" class="scroll-m-20">
<section id="aboutus" class="scroll-m-20 px-4">
<section>
<h1 class="pb-4 text-3xl font-semibold">About Us</h1>
@@ -55,19 +56,19 @@ import "@/styles/globals.css";
</section>
</section>
<section id="whatwereupto" class="scroll-m-20 ">
<section id="whatwereupto" class="scroll-m-20 px-4">
<WhatWereUpTo />
</section>
<!-- <section id="services" class="scroll-m-20 my-8">
TODO services
</section> -->
<section id="services" class="my-8 scroll-m-20 px-4">
<Services />
</section>
<!-- <section id="calendar" class="scroll-m-20 my-8">
TODO calendar
</section> -->
<section id="bigtechalternatives" class="scroll-m-20 my-8">
<section id="bigtechalternatives" class="my-8 scroll-m-20">
<BigTechAlternatives />
</section>