feat: design qa (#36)

* feat: meta data

* feat: text style

* feat: video controls

* feat: video controls

Author: syhgpd

app/_components/home/HowItWorks.tsx

@@ -10,7 +10,7 @@ export default function HowItWorks() {
   return (
     <section className="flex w-full max-w-[1440px] flex-col gap-5 px-4 py-24 text-[#002424] md:px-8 md:py-40">
       <p className="text-base">Coming soon</p>
-      <h2 className="font-oceanic text-[40px] whitespace-pre-line md:text-[48px]">
+      <h2 className="font-oceanic text-[40px] leading-[46px] whitespace-pre-line md:text-[48px] md:leading-[56px] ">
         {"Unchain your potential\nwith Wrtn Agent OS"}
       </h2>
       <p className="text-base whitespace-pre-line">

app/_components/home/LatestArticles.tsx

@@ -43,7 +43,7 @@ export default async function LatestArticles() {
                   {tags.map((tag: string) => (
                     <div
                       key={tag}
-                      className="rounded-sm bg-gray-200 px-2 py-1 text-sm text-black"
+                      className="rounded-sm bg-[#ECF9F3] px-2 py-1 text-sm text-[#002424]"
                     >
                       {tag}
                     </div>

app/_components/home/OpenSource.tsx

@@ -7,9 +7,9 @@ import { addBasePath } from "@/app/_lib/add-base-path";
 
 export default function OpenSource() {
   return (
-    <div className="flex flex-col bg-black items-center gap-20 pt-[200px]">
-      <div className="flex flex-col items-center gap-6 text-center">
-        <h2 className="font-oceanic text-[32px] text-[#E6FDFC] md:text-5xl md:whitespace-pre-line">
+    <div className="flex w-full flex-col bg-black items-center gap-20 pb-[100px] pt-[200px] md:pb-0 px-8">
+      <div className="flex flex-col md:items-center md:text-center gap-6">
+        <h2 className="font-oceanic text-[40px] leading-[46px] text-[#E6FDFC] md:whitespace-pre-line">
           {"Based on powerful\nOpen Source Ecosystem"}
         </h2>
         <p className="text-base text-[#BEBEBE] md:text-lg md:whitespace-pre-line">
@@ -29,9 +29,12 @@ export default function OpenSource() {
           autoPlay
           loop
           muted
+          controls
+          controlsList="nodownload"
+          disablePictureInPicture
           playsInline
           className="h-full w-full object-cover"
-          preload="none"
+          preload="auto"
           src={addBasePath("/videos/open-source.MP4")}
         />
       </div>

app/_components/home/Roadmap.tsx

@@ -9,7 +9,7 @@ export default function Roadmap() {
       <div className="flex w-full max-w-[1440px] flex-col items-center justify-between gap-6 md:flex-row">
         <div className="flex flex-col gap-6">
           <p className="text-base text-[#E6FDFC]">Roadmap</p>
-          <h2 className="font-oceanic text-5xl whitespace-pre-line text-[#E6FDFC]">
+          <h2 className="font-oceanic text-[40px] leading-[46px] whitespace-pre-line text-[#E6FDFC]">
             {"Built from the ground up\nfor every layer of AI Agents"}
           </h2>
           <p className="text-lg whitespace-pre-line text-[#A7B4B3]">
@@ -28,7 +28,7 @@ export default function Roadmap() {
           </Link>
         </div>
 
-        <div className="flex w-full flex-col gap-4 md:w-auto">
+        <div className="flex w-full flex-col gap-4 drop-shadow-[0_0_100px_rgba(134,255,217,0.40)] md:w-auto">
           {ROADMAP.map(({ title, keywords, className, itemClassName }) => (
             <div
               key={title}

app/_components/home/Welcome.tsx

@@ -2,7 +2,7 @@ export default function Welcome() {
   return (
     <section className="flex flex-col gap-24 pt-40 px-8 md:px-40">
       <div className="flex flex-col items-center justify-center gap-9 text-center">
-        <h1 className="font-oceanic text-3xl leading-[42px] whitespace-pre-line text-[#002424] md:text-[64px] md:leading-[69px]">
+        <h1 className="font-oceanic text-[32px] leading-[38px] whitespace-pre-line text-[#002424] md:text-[64px] md:leading-[69px]">
           {"The Foundation for\nEvery Business Agent"}
         </h1>
         <p className="text-sm whitespace-pre-line text-[#757575] md:text-lg">
@@ -15,9 +15,14 @@ export default function Welcome() {
       <div className="max-x-[1440px] aspect-[1.7/1]">
         <video
           src="https://studio-pro-fe.s3.ap-northeast-2.amazonaws.com/preview.mp4"
-          muted
-          loop
           autoPlay
+          loop
+          muted
+          controls
+          controlsList="nodownload"
+          disablePictureInPicture
+          playsInline
+          preload="auto"
           className="w-full rounded-3xl"
         />
       </div>

app/favicon.ico

@@ -9,7 +9,7 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: "Wrtnlabs",
-  description: "Wrtnlabs Landing Page",
+  description: "The Foundation for Every Business Agent",
 };
 
 export default function RootLayout({