✨ Solar Network product page

src/pages/index.astro

@@ -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}

src/pages/products/solar-network.astro

@@ -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>
+<SiteLayout>
-  <div class="flex gap-4" slot="header">
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-3 px-12 py-5">
-    <Image src={SolianIcon} alt="Solar Network" class="w-[56px] h-[56px]" />
+    <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>
+      <section>
-      <h2 class="card-title">Solar Network</h2>
+        <h2 class="card-title">Open-source</h2>
-      <p>Link the entire Solar System together, forever.</p>
+        <p>Entire project has been open-sourced under <b>AGPLv3</b> license.</p>
-    </section>
+      </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>
+
+      <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>
 
-  <article class="prose">
+  <div class="px-12 pb-5 flex gap-3 justify-center items-center">
-    <h1>Woah</h1>
+    <a
-  </article>
+      class="btn btn-primary"
-</ProductLayout>
+      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>