pontus/pontus-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile experience improvements

Browse source
This commit is contained in:
Aidan 2025-07-06 21:58:28 -04:00
parent ca41990710
commit dfbc3cade9
6 changed files with 163 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

65
app/about/page.tsx
View file

@ -2,81 +2,86 @@ import { Nav } from "@/components/core/nav";
import { GiStoneWheel } from "react-icons/gi"; import { GiStoneWheel } from "react-icons/gi";
import { TbUserSquareRounded } from "react-icons/tb"; import { TbUserSquareRounded } from "react-icons/tb";
import { RiTelegram2Line } from "react-icons/ri"; import { RiTelegram2Line } from "react-icons/ri";
import Link from "next/link";
export default function About() { export default function About() {
return ( return (
<main> <main>
<Nav /> <Nav />
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbUserSquareRounded size={36} /> <TbUserSquareRounded size={32} className="sm:w-9 sm:h-9" />
<h1 className="text-4xl font-bold"> <h1 className="text-3xl sm:text-4xl font-bold">
About About
</h1> </h1>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3"> <div className="flex flex-col items-center justify-between gap-3 px-4">
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
p0ntus is a small team of developers working towards p0ntus is a small team of developers working towards
<span className="bg-red-400 text-white rounded-full italic ml-2 px-3 pr-4 py-1">one goal</span>. <span className="bg-red-400 text-white rounded-full italic ml-2 px-3 pr-4 py-1">one goal</span>
</h2> </h2>
<h2 className="text-xl text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-lg sm:text-xl text-center w-full flex flex-wrap items-center justify-center">
we want to make the cloud accessible to <span className="ml-1 italic">everyone</span>. we want to make the cloud accessible to <span className="ml-1 italic">everyone</span>
</h2> </h2>
<h2 className="text-lg text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-base sm:text-lg text-center w-full flex flex-wrap items-center justify-center">
no corporate sponsors, no closed source, no microtransactions. no corporate sponsors, no closed source, no microtransactions.
</h2> </h2>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<div className="flex flex-col items-center justify-between gap-3"> <div className="flex flex-col items-center justify-between gap-3">
<GiStoneWheel size={60} /> <GiStoneWheel size={50} className="sm:w-15 sm:h-15" />
<h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
we don&apos;t reinvent the wheel, we don&apos;t reinvent the wheel,
</h2> </h2>
<h2 className="text-2xl text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-xl sm:text-2xl text-center w-full flex flex-wrap items-center justify-center">
but we get the job done. but we get the job done.
</h2> </h2>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3 my-2 max-w-3xl"> <div className="flex flex-col items-center justify-between gap-3 my-2 max-w-3xl">
<p className="text-md text-center w-full flex flex-wrap items-center justify-center"> <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
we put effort into finding, creating, and building on the best tools avaliable to bring the magic of the cloud to you. we put effort into finding, creating, and building on the best tools avaliable to bring the magic of the cloud to you.
</p> </p>
<p className="text-md text-center w-full flex flex-wrap items-center justify-center"> <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
we believe using cloud services is <span className="ml-1 italic">more than just a way to store your data.</span> we believe using cloud services is <span className="ml-1 italic">more than just a way to store your data.</span>
<span className="font-bold">your experience should be valued.</span> <span className="font-bold">your experience should be valued.</span>
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<div className="flex flex-col items-center justify-between gap-3"> <div className="flex flex-col items-center justify-between gap-3">
<RiTelegram2Line size={60} /> <RiTelegram2Line size={50} className="sm:w-15 sm:h-15" />
<h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
let&apos;s talk. let&apos;s talk.
</h2> </h2>
<div className="flex flex-col items-center justify-between gap-2"> <div className="flex flex-col items-center justify-between gap-2">
<p className="text-md text-center w-full flex flex-wrap items-center justify-center"> <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
we&apos;re always looking for new people to help out. we&apos;re always looking for new people to help out.
</p> </p>
<p className="text-md text-center w-full flex flex-wrap items-center justify-center"> <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
we&apos;re here for everything else, too! account support, deployment, service, and more. we&apos;re here for everything else, too! account support, deployment, service, and more.
</p> </p>
<p className="text-md text-center w-full flex flex-wrap items-center justify-center"> <p className="text-sm sm:text-base text-center w-full flex flex-wrap items-center justify-center">
join us on telegram for support, questions, chatting, and more. join us on telegram for support, questions, chatting, and more.
</p> </p>
</div> </div>
<div className="flex flex-row items-center justify-center gap-4 my-3"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4 my-3">
<button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md"> <Link href="https://t.me/p0ntu5">
<button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md w-full sm:w-auto">
<RiTelegram2Line size={24} /> <RiTelegram2Line size={24} />
<span className="text-md"> <span className="text-sm sm:text-base">
contact contact
</span> </span>
</button> </button>
<button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md"> </Link>
<Link href="https://t.me/pontushub">
<button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md w-full sm:w-auto">
<RiTelegram2Line size={24} /> <RiTelegram2Line size={24} />
<span className="text-md"> <span className="text-sm sm:text-base">
join group join channel
</span> </span>
</button> </button>
</Link>
</div> </div>
</div> </div>
</div> </div>

60
app/page.tsx
View file

@ -7,82 +7,82 @@ export default function Home() {
return ( return (
<main> <main>
<Nav /> <Nav />
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<h1 className="text-4xl font-bold"> <h1 className="text-3xl sm:text-4xl font-bold text-center">
p0ntus p0ntus
</h1> </h1>
<h3 className="text-2xl"> <h3 className="text-xl sm:text-2xl text-center">
open source at your fingertips open source at your fingertips
</h3> </h3>
</div> </div>
<hr className="border-black mt-24 mb-24" /> <hr className="border-black dark:border-white mt-16 mb-16 sm:mt-24 sm:mb-24" />
<div className="max-w-6xl mx-auto w-full px-4 md:px-10"> <div className="max-w-6xl mx-auto w-full px-4 md:px-10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-x-38 gap-y-16"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 gap-y-16 lg:gap-16">
<div className="flex flex-col items-center justify-start gap-6 h-full"> <div className="flex flex-col items-center justify-start gap-6 h-full">
<h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Services</h2> <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Services</h2>
<h3 className="text-xl italic text-center w-full">what can we offer you?</h3> <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">what can we offer you?</h3>
<div className="grid grid-cols-3 gap-10 my-8"> <div className="grid grid-cols-3 gap-14 sm:gap-10 my-6 sm:my-8">
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/git" className="flex flex-col items-center gap-2"> <Link href="/services/git" className="flex flex-col items-center gap-2">
<SiForgejo size={50} /> <SiForgejo size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">git</h3> <h3 className="text-base sm:text-lg font-bold">git</h3>
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/mail" className="flex flex-col items-center gap-2"> <Link href="/services/mail" className="flex flex-col items-center gap-2">
<TbMail size={50} /> <TbMail size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">mail</h3> <h3 className="text-base sm:text-lg font-bold">mail</h3>
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/ai" className="flex flex-col items-center gap-2"> <Link href="/services/ai" className="flex flex-col items-center gap-2">
<SiOllama size={50} /> <SiOllama size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">ai</h3> <h3 className="text-base sm:text-lg font-bold">ai</h3>
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/tv" className="flex flex-col items-center gap-2"> <Link href="/services/tv" className="flex flex-col items-center gap-2">
<SiJellyfin size={50} /> <SiJellyfin size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">tv</h3> <h3 className="text-base sm:text-lg font-bold">tv</h3>
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/keybox" className="flex flex-col items-center gap-2"> <Link href="/services/keybox" className="flex flex-col items-center gap-2">
<TbKey size={50} /> <TbKey size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">keybox</h3> <h3 className="text-base sm:text-lg font-bold">keybox</h3>
</Link> </Link>
</div> </div>
<div className="flex flex-col items-center justify-center gap-3"> <div className="flex flex-col items-center justify-center gap-3">
<Link href="/services/keybox" className="flex flex-col items-center gap-2"> <Link href="/services/hosting" className="flex flex-col items-center gap-2">
<TbServer size={50} /> <TbServer size={40} className="sm:w-12 sm:h-12" />
<h3 className="text-lg font-bold">hosting</h3> <h3 className="text-base sm:text-lg font-bold">hosting</h3>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-start gap-6 h-full"> <div className="flex flex-col items-center justify-start gap-6 h-full">
<h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Where we are</h2> <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Where we are</h2>
<h3 className="text-xl italic text-center w-full">how can you find us?</h3> <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">how can you find us?</h3>
<div className="flex flex-col items-center gap-6 mt-6"> <div className="flex flex-col items-center gap-6 mt-6">
<p className="text-lg text-center"> <p className="text-base sm:text-lg text-center">
p0ntus is fully on the public internet! our servers are mainly located in the united states. p0ntus is fully on the public internet! our servers are mainly located in the united states.
</p> </p>
<p className="text-lg text-center"> <p className="text-base sm:text-lg text-center">
we also operate servers in the united states, canada and germany. we also operate servers in the united states, canada and germany.
</p> </p>
<Link href="/servers" className="flex flex-row items-center gap-2 text-lg text-center text-blue-500 hover:underline"> <Link href="/servers" className="flex flex-row items-center gap-2 text-base sm:text-lg text-center text-blue-500 hover:underline">
our servers <TbArrowRight size={20} /> our servers <TbArrowRight size={20} />
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-start gap-6 h-full"> <div className="flex flex-col items-center justify-start gap-6 h-full">
<h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Why is p0ntus free?</h2> <h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Why is p0ntus free?</h2>
<h3 className="text-xl italic text-center w-full">what&apos;s the point?</h3> <h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">what&apos;s the point?</h3>
<div className="flex flex-col items-center gap-6 mt-6"> <div className="flex flex-col items-center gap-6 mt-6">
<p className="text-lg text-center"> <p className="text-base sm:text-lg text-center">
everything today includes microtransactions, and we were fed up with it. everything today includes microtransactions, and we were fed up with it.
</p> </p>
<p className="text-lg text-center"> <p className="text-base sm:text-lg text-center">
p0ntus exists to show that it is possible to have a free and open set of services that people have fun using. p0ntus exists to show that it is possible to have a free and open set of services that people have fun using.
</p> </p>
</div> </div>

88
app/servers/page.tsx
View file

@ -6,43 +6,43 @@ export default function Servers() {
return ( return (
<main> <main>
<Nav /> <Nav />
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-col sm:flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={32} className="sm:w-9 sm:h-9" />
<h1 className="text-4xl font-bold"> <h1 className="text-3xl sm:text-4xl font-bold text-center">
servers and infrastructure servers and infrastructure
</h1> </h1>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
where we host out of where we host out of
</h2> </h2>
<div className="grid grid-cols-3 gap-4 my-4"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 my-4 w-full max-w-md">
<p className="flex flex-row items-center justify-between gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
<Flag code="US" className="w-6 h-6" /> usa <Flag code="US" className="w-5 h-5 sm:w-6 sm:h-6" /> usa
</p> </p>
<p className="flex flex-row items-center justify-between gap-2 text-lg bg-red-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-red-400 text-white px-4 py-2 rounded-full">
<Flag code="CA" className="w-6 h-6" /> canada <Flag code="CA" className="w-5 h-5 sm:w-6 sm:h-6" /> canada
</p> </p>
<p className="flex flex-row items-center justify-between gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-base sm:text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
<Flag code="DE" className="mr-4 w-6 h-6" /> germany <Flag code="DE" className="w-5 h-5 sm:w-6 sm:h-6" /> germany
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3"> <div className="flex flex-col items-center justify-between gap-3 px-4">
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
hardware hardware
</h2> </h2>
<div className="grid grid-cols-3 gap-4 my-4 w-5xl"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 my-4 w-full max-w-7xl">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
NY-1 NY-1
</span> </span>
</div> </div>
<p className="flex flex-col text-sm my-2 gap-4"> <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
<span><span className="font-bold">CPU:</span> 2x Intel Xeon E5-2699 v4 @ 3.60 GHz</span> <span><span className="font-bold">CPU:</span> 2x Intel Xeon E5-2699 v4 @ 3.60 GHz</span>
<span><span className="font-bold">RAM:</span> 256GB (8x Samsung 32GB DDR4)</span> <span><span className="font-bold">RAM:</span> 256GB (8x Samsung 32GB DDR4)</span>
<span><span className="font-bold">Boot Drive:</span> Samsung Evo 850 250GB</span> <span><span className="font-bold">Boot Drive:</span> Samsung Evo 850 250GB</span>
@ -52,14 +52,14 @@ export default function Servers() {
<span><span className="font-bold">Provider:</span> ColoCrossing</span> <span><span className="font-bold">Provider:</span> ColoCrossing</span>
</p> </p>
</div> </div>
<div className="flex flex-col gap-2 text-lg bg-red-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-red-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
CA-1 CA-1
</span> </span>
</div> </div>
<p className="flex flex-col text-sm my-2 gap-4"> <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
<span><span className="font-bold">CPU:</span> 2 cores shared</span> <span><span className="font-bold">CPU:</span> 2 cores shared</span>
<span><span className="font-bold">RAM:</span> 2GB</span> <span><span className="font-bold">RAM:</span> 2GB</span>
<span><span className="font-bold">Disk:</span> 3.5TB Raidz2</span> <span><span className="font-bold">Disk:</span> 3.5TB Raidz2</span>
@ -69,14 +69,14 @@ export default function Servers() {
<span><span className="font-bold">Provider:</span> Serverica</span> <span><span className="font-bold">Provider:</span> Serverica</span>
</p> </p>
</div> </div>
<div className="flex flex-col gap-2 text-lg bg-orange-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-orange-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
DE-1 DE-1
</span> </span>
</div> </div>
<p className="flex flex-col text-sm my-2 gap-4"> <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
<span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span> <span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span>
<span><span className="font-bold">RAM:</span> 1GB</span> <span><span className="font-bold">RAM:</span> 1GB</span>
<span><span className="font-bold">Storage:</span> 153GB</span> <span><span className="font-bold">Storage:</span> 153GB</span>
@ -85,14 +85,14 @@ export default function Servers() {
<span><span className="font-bold">Provider:</span> Oracle Cloud</span> <span><span className="font-bold">Provider:</span> Oracle Cloud</span>
</p> </p>
</div> </div>
<div className="flex flex-col gap-2 text-lg bg-orange-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-orange-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
DE-2 DE-2
</span> </span>
</div> </div>
<p className="flex flex-col text-sm my-2 gap-4"> <p className="flex flex-col text-xs sm:text-sm my-2 gap-3 sm:gap-4">
<span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span> <span><span className="font-bold">CPU:</span> 1vCPU AMD EPYC</span>
<span><span className="font-bold">RAM:</span> 1GB</span> <span><span className="font-bold">RAM:</span> 1GB</span>
<span><span className="font-bold">Storage:</span> 47GB</span> <span><span className="font-bold">Storage:</span> 47GB</span>
@ -102,25 +102,25 @@ export default function Servers() {
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-between gap-3 my-20"> <div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 w-full">
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
our ip addresses our ip addresses
</h2> </h2>
<p className="text-center text-md my-2"> <p className="text-center text-sm sm:text-base my-2 px-4">
if you own a mail server/service, please consider whitelisting our ip addresses. if you own a mail server/service, please consider whitelisting our ip addresses.
</p> </p>
<div className="grid grid-cols-3 gap-4 my-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 my-4 w-full max-w-4xl px-4">
<p className="flex flex-row items-center gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-blue-400 text-white px-3 sm:px-4 py-2 rounded-full">
<Flag code="US" className="w-6 h-6" /> <span className="font-bold">NY1:</span> 192.3.178.206 <Flag code="US" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">NY1:</span> 192.3.178.206
</p> </p>
<p className="flex flex-row items-center gap-2 text-lg bg-red-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-red-400 text-white px-3 sm:px-4 py-2 rounded-full">
<Flag code="CA" className="w-6 h-6" /> <span className="font-bold">CA1:</span> 209.209.9.109 <Flag code="CA" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">CA1:</span> 209.209.9.109
</p> </p>
<p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-orange-400 text-white px-3 sm:px-4 py-2 rounded-full">
<Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE1:</span> 138.2.154.209 <Flag code="DE" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE1:</span> 138.2.154.209
</p> </p>
<p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full"> <p className="flex flex-row items-center justify-center gap-2 text-sm sm:text-base bg-orange-400 text-white px-3 sm:px-4 py-2 rounded-full">
<Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE2:</span> 158.180.60.92 <Flag code="DE" className="w-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE2:</span> 158.180.60.92
</p> </p>
</div> </div>
</div> </div>

46
app/services/page.tsx
View file

@ -7,75 +7,75 @@ export default function Services() {
return ( return (
<main> <main>
<Nav /> <Nav />
<div className="flex flex-col items-center justify-between gap-10 my-16"> <div className="flex flex-col items-center justify-between gap-6 sm:gap-10 my-12 sm:my-16 px-4">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbTool size={36} /> <TbTool size={32} className="sm:w-9 sm:h-9" />
<h1 className="text-4xl font-bold"> <h1 className="text-3xl sm:text-4xl font-bold">
services services
</h1> </h1>
</div> </div>
<div className="flex flex-col items-center justify-between gap-2"> <div className="flex flex-col items-center justify-between gap-2">
<h2 className="text-3xl font-light text-center w-full flex flex-wrap items-center justify-center"> <h2 className="text-2xl sm:text-3xl font-light text-center w-full flex flex-wrap items-center justify-center">
please select a service. please select a service.
</h2> </h2>
</div> </div>
</div> </div>
<div className="grid grid-cols-4 gap-4 my-4 w-3/4 mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 my-4 w-full max-w-6xl mx-auto px-4">
<Link href="/services/git"> <Link href="/services/git">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<SiForgejo size={36} /> <SiForgejo size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
git git
</span> </span>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/services/mail"> <Link href="/services/mail">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbMail size={36} /> <TbMail size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
email email
</span> </span>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/services/ai"> <Link href="/services/ai">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<SiOllama size={36} /> <SiOllama size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
ai ai
</span> </span>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/services/tv"> <Link href="/services/tv">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<SiJellyfin size={36} /> <SiJellyfin size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
tv tv
</span> </span>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/services/keybox"> <Link href="/services/keybox">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbKey size={36} /> <TbKey size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
keybox keybox
</span> </span>
</div> </div>
</div> </div>
</Link> </Link>
<Link href="/services/hosting"> <Link href="/services/hosting">
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl"> <div className="flex flex-col gap-2 text-base sm:text-lg bg-blue-400 text-white px-6 sm:px-8 py-6 sm:py-8 rounded-2xl sm:rounded-4xl hover:bg-blue-500 transition-colors">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
<TbServer size={36} /> <TbServer size={28} className="sm:w-9 sm:h-9" />
<span className="text-2xl font-bold"> <span className="text-xl sm:text-2xl font-bold">
hosting hosting
</span> </span>
</div> </div>

14
components/core/nav.tsx
View file

@ -2,17 +2,17 @@ import Link from "next/link";
export function Nav() { export function Nav() {
return ( return (
<div className="flex flex-row items-center justify-between px-5 py-3"> <div className="flex flex-col sm:flex-row items-center justify-between px-4 sm:px-5 py-3 gap-3 sm:gap-0">
<Link href="/"> <Link href="/">
<h1 className="text-3xl font-bold font-mono"> <h1 className="text-2xl sm:text-3xl font-bold font-mono">
p0ntus p0ntus
</h1> </h1>
</Link> </Link>
<div className="flex flex-row gap-4"> <div className="flex flex-row flex-wrap items-center justify-center gap-3 sm:gap-4 text-sm sm:text-base">
<Link href="/">Home</Link> <Link href="/" className="hover:underline">Home</Link>
<Link href="/about">About</Link> <Link href="/about" className="hover:underline">About</Link>
<Link href="/servers">Servers</Link> <Link href="/servers" className="hover:underline">Servers</Link>
<Link href="/services">Services</Link> <Link href="/services" className="hover:underline">Services</Link>
</div> </div>
</div> </div>
); );

48
components/front/services.tsx
View file

@ -43,14 +43,14 @@ export function ServicesShell({ slug }: { slug: string }) {
return ( return (
<main> <main>
<Nav /> <Nav />
<div className="flex flex-col items-center justify-between gap-4 my-20"> <div className="flex flex-col items-center justify-between gap-4 my-12 sm:my-20 px-4">
<div className="flex flex-row items-center justify-between gap-2"> <div className="flex flex-row items-center justify-between gap-2">
{Icon && <Icon size={36} />} {Icon && <Icon size={32} className="sm:w-9 sm:h-9" />}
<h1 className="text-4xl font-bold"> <h1 className="text-3xl sm:text-4xl font-bold">
{service?.name} {service?.name}
</h1> </h1>
</div> </div>
<p className="text-lg"> <p className="text-base sm:text-lg text-center">
{service?.description} {service?.description}
</p> </p>
<Link href={`/services`}> <Link href={`/services`}>
@ -60,28 +60,28 @@ export function ServicesShell({ slug }: { slug: string }) {
</button> </button>
</Link> </Link>
</div> </div>
<div className="grid grid-cols-4 gap-4 px-14"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 px-4 sm:px-8 lg:px-14">
<div className={`flex flex-col justify-between gap-4 rounded-2xl px-8 py-4 ${HumanPriceStatusColor(service?.priceStatus as "open" | "invite-only" | "by-request")}`}> <div className={`flex flex-col justify-between gap-4 rounded-2xl px-6 sm:px-8 py-4 ${HumanPriceStatusColor(service?.priceStatus as "open" | "invite-only" | "by-request")}`}>
<div className="flex flex-row items-center justify-between gap-2 w-full my-2"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 w-full my-2">
<h2 className="text-2xl font-semibold text-white"> <h2 className="text-xl sm:text-2xl font-semibold text-white">
{HumanPriceStatus(service?.priceStatus as "open" | "invite-only" | "by-request")} {HumanPriceStatus(service?.priceStatus as "open" | "invite-only" | "by-request")}
</h2> </h2>
{service?.joinLink && ( {service?.joinLink && (
<Link href={service.joinLink}> <Link href={service.joinLink}>
<button className="flex flex-row items-center justify-between gap-2 text-white bg-green-600 px-4 py-2 rounded-full hover:underline transition-all duration-300 cursor-pointer"> <button className="flex flex-row items-center justify-center gap-2 text-white bg-green-600 px-4 py-2 rounded-full hover:underline transition-all duration-300 cursor-pointer w-full sm:w-auto">
Join! Join!
</button> </button>
</Link> </Link>
)} )}
</div> </div>
<p className="text-md text-white mb-3"> <p className="text-sm sm:text-base text-white mb-3">
{PriceStatusDesc(service?.priceStatus as "open" | "invite-only" | "by-request", service?.name as string)} {PriceStatusDesc(service?.priceStatus as "open" | "invite-only" | "by-request", service?.name as string)}
</p> </p>
</div> </div>
<div className={`flex flex-col justify-between gap-4 rounded-2xl px-8 py-4 bg-gray-200`}> <div className={`flex flex-col justify-between gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200`}>
<div className="flex flex-row items-center gap-2 w-full my-2"> <div className="flex flex-row items-center gap-2 w-full my-2">
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black"> <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
<TbEye size={32} /> <TbEye size={28} className="sm:w-8 sm:h-8" />
What admins can see What admins can see
</h2> </h2>
</div> </div>
@ -92,26 +92,26 @@ export function ServicesShell({ slug }: { slug: string }) {
.filter(([, value]) => value !== undefined) .filter(([, value]) => value !== undefined)
.map(([key, value], index) => ( .map(([key, value], index) => (
<div className="flex flex-col w-full mb-2" key={index}> <div className="flex flex-col w-full mb-2" key={index}>
<p className="flex flex-row items-center gap-1 text-md font-semibold text-black"> <p className="flex flex-row items-center gap-1 text-sm sm:text-base font-semibold text-black">
<value.icon size={16} /> {key} <value.icon size={16} /> {key}
</p> </p>
<p className="text-sm text-black"> <p className="text-xs sm:text-sm text-black">
{value.description} {value.description}
</p> </p>
</div> </div>
))} ))}
</div> </div>
<div className={`flex flex-col gap-4 rounded-2xl px-8 py-4 bg-gray-200`}> <div className={`flex flex-col gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200`}>
<div className="flex flex-row items-center gap-2 w-full my-2"> <div className="flex flex-row items-center gap-2 w-full my-2">
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black"> <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
<TbShieldLock size={32} /> <TbShieldLock size={28} className="sm:w-8 sm:h-8" />
Our commitment to privacy Our commitment to privacy
</h2> </h2>
</div> </div>
<p className="text-md text-black"> <p className="text-sm sm:text-base text-black">
Privacy is a big concern to us, too. That&apos;s why we: Privacy is a big concern to us, too. That&apos;s why we:
</p> </p>
<ul className="list-disc list-inside text-sm text-black"> <ul className="list-disc list-inside text-xs sm:text-sm text-black">
<li>Never share your data to third parties.</li> <li>Never share your data to third parties.</li>
<li>Never use your data for advertising.</li> <li>Never use your data for advertising.</li>
<li>Never use your data for any other purpose than to provide you with the service you have requested.</li> <li>Never use your data for any other purpose than to provide you with the service you have requested.</li>
@ -120,14 +120,14 @@ export function ServicesShell({ slug }: { slug: string }) {
</ul> </ul>
</div> </div>
{service?.quickLinks && ( {service?.quickLinks && (
<div className="flex flex-col gap-4 rounded-2xl px-8 py-4 bg-gray-200"> <div className="flex flex-col gap-4 rounded-2xl px-6 sm:px-8 py-4 bg-gray-200">
<div className="flex flex-row items-center gap-2 w-full my-2"> <div className="flex flex-row items-center gap-2 w-full my-2">
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black"> <h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
<TbLink size={32} /> <TbLink size={28} className="sm:w-8 sm:h-8" />
Quick Links Quick Links
</h2> </h2>
</div> </div>
<ul className="list-disc list-inside text-md text-black"> <ul className="list-disc list-inside text-sm sm:text-base text-black">
{service.quickLinks.map((link, index) => ( {service.quickLinks.map((link, index) => (
<Link href={link.url} key={index}> <Link href={link.url} key={index}>
<button className="flex flex-row items-center gap-2 text-black hover:underline transition-all duration-300 cursor-pointer"> <button className="flex flex-row items-center gap-2 text-black hover:underline transition-all duration-300 cursor-pointer">