mobile experience improvements
This commit is contained in:
parent
ca41990710
commit
dfbc3cade9
6 changed files with 163 additions and 158 deletions
|
|
@ -2,81 +2,86 @@ import { Nav } from "@/components/core/nav";
|
|||
import { GiStoneWheel } from "react-icons/gi";
|
||||
import { TbUserSquareRounded } from "react-icons/tb";
|
||||
import { RiTelegram2Line } from "react-icons/ri";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main>
|
||||
<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">
|
||||
<TbUserSquareRounded size={36} />
|
||||
<h1 className="text-4xl font-bold">
|
||||
<TbUserSquareRounded size={32} className="sm:w-9 sm:h-9" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">
|
||||
About
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3">
|
||||
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-between gap-3 px-4">
|
||||
<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
|
||||
<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 className="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>.
|
||||
<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>
|
||||
</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.
|
||||
</h2>
|
||||
</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">
|
||||
<GiStoneWheel size={60} />
|
||||
<h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<GiStoneWheel size={50} className="sm:w-15 sm:h-15" />
|
||||
<h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
we don't reinvent the wheel,
|
||||
</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.
|
||||
</h2>
|
||||
</div>
|
||||
<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.
|
||||
</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>
|
||||
<span className="font-bold">your experience should be valued.</span>
|
||||
</p>
|
||||
</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">
|
||||
<RiTelegram2Line size={60} />
|
||||
<h2 className="text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<RiTelegram2Line size={50} className="sm:w-15 sm:h-15" />
|
||||
<h2 className="text-2xl sm:text-3xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
let's talk.
|
||||
</h2>
|
||||
<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're always looking for new people to help out.
|
||||
</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're here for everything else, too! account support, deployment, service, and more.
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex 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">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 my-3">
|
||||
<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} />
|
||||
<span className="text-md">
|
||||
contact
|
||||
<span className="text-sm sm:text-base">
|
||||
contact
|
||||
</span>
|
||||
</button>
|
||||
<button className="flex flex-row items-center justify-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-md">
|
||||
</button>
|
||||
</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} />
|
||||
<span className="text-md">
|
||||
join group
|
||||
<span className="text-sm sm:text-base">
|
||||
join channel
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
60
app/page.tsx
60
app/page.tsx
|
|
@ -7,82 +7,82 @@ export default function Home() {
|
|||
return (
|
||||
<main>
|
||||
<Nav />
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-20">
|
||||
<h1 className="text-4xl font-bold">
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-center">
|
||||
p0ntus
|
||||
</h1>
|
||||
<h3 className="text-2xl">
|
||||
<h3 className="text-xl sm:text-2xl text-center">
|
||||
open source at your fingertips
|
||||
</h3>
|
||||
</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="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">
|
||||
<h2 className="text-3xl font-bold text-center w-full whitespace-nowrap">Services</h2>
|
||||
<h3 className="text-xl italic text-center w-full">what can we offer you?</h3>
|
||||
<div className="grid grid-cols-3 gap-10 my-8">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Services</h2>
|
||||
<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-14 sm:gap-10 my-6 sm:my-8">
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/git" className="flex flex-col items-center gap-2">
|
||||
<SiForgejo size={50} />
|
||||
<h3 className="text-lg font-bold">git</h3>
|
||||
<SiForgejo size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">git</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/mail" className="flex flex-col items-center gap-2">
|
||||
<TbMail size={50} />
|
||||
<h3 className="text-lg font-bold">mail</h3>
|
||||
<TbMail size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">mail</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/ai" className="flex flex-col items-center gap-2">
|
||||
<SiOllama size={50} />
|
||||
<h3 className="text-lg font-bold">ai</h3>
|
||||
<SiOllama size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">ai</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/tv" className="flex flex-col items-center gap-2">
|
||||
<SiJellyfin size={50} />
|
||||
<h3 className="text-lg font-bold">tv</h3>
|
||||
<SiJellyfin size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">tv</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/keybox" className="flex flex-col items-center gap-2">
|
||||
<TbKey size={50} />
|
||||
<h3 className="text-lg font-bold">keybox</h3>
|
||||
<TbKey size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">keybox</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-3">
|
||||
<Link href="/services/keybox" className="flex flex-col items-center gap-2">
|
||||
<TbServer size={50} />
|
||||
<h3 className="text-lg font-bold">hosting</h3>
|
||||
<Link href="/services/hosting" className="flex flex-col items-center gap-2">
|
||||
<TbServer size={40} className="sm:w-12 sm:h-12" />
|
||||
<h3 className="text-base sm:text-lg font-bold">hosting</h3>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<h3 className="text-xl italic text-center w-full">how can you find us?</h3>
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Where we are</h2>
|
||||
<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">
|
||||
<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.
|
||||
</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.
|
||||
</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} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<h3 className="text-xl italic text-center w-full">what's the point?</h3>
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-center w-full">Why is p0ntus free?</h2>
|
||||
<h3 className="hidden sm:block text-lg sm:text-xl italic text-center w-full">what's the point?</h3>
|
||||
<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.
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,43 +6,43 @@ export default function Servers() {
|
|||
return (
|
||||
<main>
|
||||
<Nav />
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-20">
|
||||
<div className="flex flex-row items-center justify-between gap-2">
|
||||
<TbServer size={36} />
|
||||
<h1 className="text-4xl font-bold">
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-2">
|
||||
<TbServer size={32} className="sm:w-9 sm:h-9" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-center">
|
||||
servers and infrastructure
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-20">
|
||||
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 px-4">
|
||||
<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
|
||||
</h2>
|
||||
<div className="grid grid-cols-3 gap-4 my-4">
|
||||
<p className="flex flex-row items-center justify-between gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="US" className="w-6 h-6" /> usa
|
||||
<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-center gap-2 text-base sm:text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="US" className="w-5 h-5 sm:w-6 sm:h-6" /> usa
|
||||
</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">
|
||||
<Flag code="CA" className="w-6 h-6" /> canada
|
||||
<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-5 h-5 sm:w-6 sm:h-6" /> canada
|
||||
</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">
|
||||
<Flag code="DE" className="mr-4 w-6 h-6" /> germany
|
||||
<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="w-5 h-5 sm:w-6 sm:h-6" /> germany
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3">
|
||||
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-between gap-3 px-4">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
hardware
|
||||
</h2>
|
||||
<div className="grid grid-cols-3 gap-4 my-4 w-5xl">
|
||||
<div className="flex flex-col gap-2 text-lg bg-blue-400 text-white px-8 py-8 rounded-4xl">
|
||||
<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-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">
|
||||
<TbServer size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbServer size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
NY-1
|
||||
</span>
|
||||
</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">RAM:</span> 256GB (8x Samsung 32GB DDR4)</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>
|
||||
</p>
|
||||
</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">
|
||||
<TbServer size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbServer size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
CA-1
|
||||
</span>
|
||||
</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">RAM:</span> 2GB</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>
|
||||
</p>
|
||||
</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">
|
||||
<TbServer size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbServer size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
DE-1
|
||||
</span>
|
||||
</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">RAM:</span> 1GB</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>
|
||||
</p>
|
||||
</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">
|
||||
<TbServer size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbServer size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
DE-2
|
||||
</span>
|
||||
</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">RAM:</span> 1GB</span>
|
||||
<span><span className="font-bold">Storage:</span> 47GB</span>
|
||||
|
|
@ -102,25 +102,25 @@ export default function Servers() {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-20">
|
||||
<h2 className="text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
<div className="flex flex-col items-center justify-between gap-3 my-12 sm:my-20 w-full">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-center w-full flex flex-wrap items-center justify-center">
|
||||
our ip addresses
|
||||
</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.
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-4 my-4">
|
||||
<p className="flex flex-row items-center gap-2 text-lg bg-blue-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="US" className="w-6 h-6" /> <span className="font-bold">NY1:</span> 192.3.178.206
|
||||
<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 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-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">NY1:</span> 192.3.178.206
|
||||
</p>
|
||||
<p className="flex flex-row items-center gap-2 text-lg bg-red-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="CA" className="w-6 h-6" /> <span className="font-bold">CA1:</span> 209.209.9.109
|
||||
<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-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">CA1:</span> 209.209.9.109
|
||||
</p>
|
||||
<p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE1:</span> 138.2.154.209
|
||||
<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-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE1:</span> 138.2.154.209
|
||||
</p>
|
||||
<p className="flex flex-row items-center gap-2 text-lg bg-orange-400 text-white px-4 py-2 rounded-full">
|
||||
<Flag code="DE" className="w-6 h-6" /> <span className="font-bold">DE2:</span> 158.180.60.92
|
||||
<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-4 h-4 sm:w-5 sm:h-5" /> <span className="font-bold">DE2:</span> 158.180.60.92
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,75 +7,75 @@ export default function Services() {
|
|||
return (
|
||||
<main>
|
||||
<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">
|
||||
<TbTool size={36} />
|
||||
<h1 className="text-4xl font-bold">
|
||||
<TbTool size={32} className="sm:w-9 sm:h-9" />
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">
|
||||
services
|
||||
</h1>
|
||||
</div>
|
||||
<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.
|
||||
</h2>
|
||||
</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">
|
||||
<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">
|
||||
<SiForgejo size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<SiForgejo size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
git
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<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">
|
||||
<TbMail size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbMail size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
email
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<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">
|
||||
<SiOllama size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<SiOllama size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
ai
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<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">
|
||||
<SiJellyfin size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<SiJellyfin size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
tv
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<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">
|
||||
<TbKey size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbKey size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
keybox
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<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">
|
||||
<TbServer size={36} />
|
||||
<span className="text-2xl font-bold">
|
||||
<TbServer size={28} className="sm:w-9 sm:h-9" />
|
||||
<span className="text-xl sm:text-2xl font-bold">
|
||||
hosting
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@ import Link from "next/link";
|
|||
|
||||
export function Nav() {
|
||||
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="/">
|
||||
<h1 className="text-3xl font-bold font-mono">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold font-mono">
|
||||
p0ntus
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex flex-row gap-4">
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/about">About</Link>
|
||||
<Link href="/servers">Servers</Link>
|
||||
<Link href="/services">Services</Link>
|
||||
<div className="flex flex-row flex-wrap items-center justify-center gap-3 sm:gap-4 text-sm sm:text-base">
|
||||
<Link href="/" className="hover:underline">Home</Link>
|
||||
<Link href="/about" className="hover:underline">About</Link>
|
||||
<Link href="/servers" className="hover:underline">Servers</Link>
|
||||
<Link href="/services" className="hover:underline">Services</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -43,14 +43,14 @@ export function ServicesShell({ slug }: { slug: string }) {
|
|||
return (
|
||||
<main>
|
||||
<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">
|
||||
{Icon && <Icon size={36} />}
|
||||
<h1 className="text-4xl font-bold">
|
||||
{Icon && <Icon size={32} className="sm:w-9 sm:h-9" />}
|
||||
<h1 className="text-3xl sm:text-4xl font-bold">
|
||||
{service?.name}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg">
|
||||
<p className="text-base sm:text-lg text-center">
|
||||
{service?.description}
|
||||
</p>
|
||||
<Link href={`/services`}>
|
||||
|
|
@ -60,28 +60,28 @@ export function ServicesShell({ slug }: { slug: string }) {
|
|||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 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-row items-center justify-between gap-2 w-full my-2">
|
||||
<h2 className="text-2xl font-semibold text-white">
|
||||
<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-6 sm:px-8 py-4 ${HumanPriceStatusColor(service?.priceStatus as "open" | "invite-only" | "by-request")}`}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 w-full my-2">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-white">
|
||||
{HumanPriceStatus(service?.priceStatus as "open" | "invite-only" | "by-request")}
|
||||
</h2>
|
||||
{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!
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
</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)}
|
||||
</p>
|
||||
</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">
|
||||
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
|
||||
<TbEye size={32} />
|
||||
<h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
|
||||
<TbEye size={28} className="sm:w-8 sm:h-8" />
|
||||
What admins can see
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -92,26 +92,26 @@ export function ServicesShell({ slug }: { slug: string }) {
|
|||
.filter(([, value]) => value !== undefined)
|
||||
.map(([key, value], 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}
|
||||
</p>
|
||||
<p className="text-sm text-black">
|
||||
<p className="text-xs sm:text-sm text-black">
|
||||
{value.description}
|
||||
</p>
|
||||
</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">
|
||||
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
|
||||
<TbShieldLock size={32} />
|
||||
<h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
|
||||
<TbShieldLock size={28} className="sm:w-8 sm:h-8" />
|
||||
Our commitment to privacy
|
||||
</h2>
|
||||
</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's why we:
|
||||
</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 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>
|
||||
|
|
@ -120,14 +120,14 @@ export function ServicesShell({ slug }: { slug: string }) {
|
|||
</ul>
|
||||
</div>
|
||||
{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">
|
||||
<h2 className="flex flex-row items-center gap-2 text-2xl font-semibold text-black">
|
||||
<TbLink size={32} />
|
||||
<h2 className="flex flex-row items-center gap-2 text-xl sm:text-2xl font-semibold text-black">
|
||||
<TbLink size={28} className="sm:w-8 sm:h-8" />
|
||||
Quick Links
|
||||
</h2>
|
||||
</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) => (
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue