mobile experience improvements
This commit is contained in:
parent
ca41990710
commit
dfbc3cade9
6 changed files with 163 additions and 158 deletions
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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue