✨ Solar Network product page
This commit is contained in:
parent
4ae2f0954f
commit
08308bc720
@ -11,7 +11,7 @@ import SolianIcon from "../assets/solian.png";
|
||||
<div class="landing-slide">
|
||||
<div class="landing-slide-first">
|
||||
<div
|
||||
class="aspect-square w-[128px] bg-white shadow-2xl rounded-xl mb-4 flex justify-center items-center"
|
||||
class="aspect-square w-[128px] bg-white shadow-2xl rounded-xl mb-6 ml-[-1rem] flex justify-center items-center"
|
||||
>
|
||||
<Image
|
||||
src={SolarIcon}
|
||||
|
||||
@ -1,21 +1,281 @@
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import ProductLayout from "../../layouts/ProductLayout.astro";
|
||||
import SiteLayout from "../../layouts/SiteLayout.astro";
|
||||
import SolianIcon from "../../assets/solian.png";
|
||||
---
|
||||
|
||||
<ProductLayout>
|
||||
<div class="flex gap-4" slot="header">
|
||||
<Image src={SolianIcon} alt="Solar Network" class="w-[56px] h-[56px]" />
|
||||
<SiteLayout>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-3 px-12 py-5">
|
||||
<div class="feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">Solar Network</h2>
|
||||
<h2 class="card-title">Open-source</h2>
|
||||
<p>Entire project has been open-sourced under <b>AGPLv3</b> license.</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">Large Attachments</h2>
|
||||
<p>Up to <b>1024MB</b> per attachment upload limit.</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="lg:col-span-2 feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">Freedom of Speech</h2>
|
||||
<p>
|
||||
According to our principles, your freedom of speech cannot be taken
|
||||
away by anyone.
|
||||
<b>
|
||||
We will never delete any post from any user, even if we are coerced
|
||||
by others.
|
||||
</b>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="lg:row-span-2 feature-card horizontal-layout lg:vertical-layout"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">100% Recyclable</h2>
|
||||
<p>
|
||||
All of our code are completely recyclable. All of them written by
|
||||
child labor and without salary. We even already achieved the goal of
|
||||
<b>Carbon Neutral</b>. Because we didn't produce any of them at all.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div
|
||||
class="lg:col-span-2 max-lg:order-last keypoint-card horizontal-layout items-center"
|
||||
>
|
||||
<Image
|
||||
src={SolianIcon}
|
||||
alt="Solar Network"
|
||||
class="w-[64px] h-[64px] lg:ml-12"
|
||||
/>
|
||||
|
||||
<section class="lg:mr-12">
|
||||
<h2 class="card-title text-3xl">Solar Network</h2>
|
||||
<p>Link the entire Solar System together, forever.</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<article class="prose">
|
||||
<h1>Woah</h1>
|
||||
</article>
|
||||
</ProductLayout>
|
||||
<section>
|
||||
<h2 class="card-title">Reaction</h2>
|
||||
<p>
|
||||
No more like and dislike, now you can express your emotion with our
|
||||
brand new reaction system!
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="lg:col-span-2 feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">Blazing Fast</h2>
|
||||
<p>
|
||||
Our server proudly powered by Golang and App made with flutter. All of
|
||||
these stuff make your scrolling, clicking and typing smooth like
|
||||
butter. Without any lagging.
|
||||
<i>By the way, we cannot eliminate the network delay.</i>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="feature-card horizontal-layout">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="icon"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<section>
|
||||
<h2 class="card-title">Safe and uninspectable</h2>
|
||||
<p>
|
||||
All your data has been <b>encrypted</b> during the network transmission.
|
||||
No more goverment and internet provider inspect.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-12 pb-5 flex gap-3 justify-center items-center">
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
href="https://git.solsynth.dev/Hydrogen/Solian/releases"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
Download now
|
||||
</a>
|
||||
<a class="btn btn-secondary" href="https://lian.solsynth.dev">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
Open in browser
|
||||
</a>
|
||||
<a class="btn btn-accent" href="#">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</SiteLayout>
|
||||
|
||||
<style>
|
||||
.feature-card {
|
||||
@apply p-5 rounded-2xl bg-base-200;
|
||||
}
|
||||
|
||||
.keypoint-card {
|
||||
@apply p-5 bg-neutral text-neutral-content rounded-2xl shadow-lg;
|
||||
}
|
||||
|
||||
.horizontal-layout {
|
||||
@apply flex gap-4;
|
||||
}
|
||||
|
||||
.vertical-layout {
|
||||
@apply flex-col gap-4;
|
||||
}
|
||||
.vertical-layout section {
|
||||
@apply px-2.5 mt-3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply w-[48px] h-[48px] m-[8px] flex-shrink-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user