Web 3 contact (#1)

* feat: contact page

* feat: add animation in contact page

* refactor: pnpm format

* style: contact header

* refactor: pnpm format

* fix: try to add experimental assets: true

* fix: remove experimental

* chore: add sharp

* refactor: remove screens in tailwind config

package.json

@@ -23,6 +23,7 @@
     "@fontsource-variable/space-grotesk": "5.0.16",
     "@fontsource/noto-sans-thai-looped": "5.0.8",
     "astro": "4.0.7",
+    "sharp": "0.33.1",
     "svelte": "4.2.8",
     "tailwindcss": "3.4.0",
     "typescript": "5.3.3"

src/pages/contact/index.astro

@@ -0,0 +1,40 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { Image } from "astro:assets";
+import isdlogo from "../../assets/isd-logo.png";
+---
+
+<Layout title="Contact">
+  <main
+    class="min-h-screen w-full items-center justify-center bg-[#0F0F0F] px-[8%] py-7 lg:px-[3%] lg:py-12"
+  >
+    <p class="animate-sliding-left text-2xl font-bold text-white lg:text-4xl">
+      Contact
+    </p>
+    <div class="mt-7 grid place-items-stretch lg:mt-16 lg:grid-cols-2">
+      <div class="flex justify-center lg:justify-start">
+        <Image
+          class="w-[55%] animate-sliding-right rounded-full lg:w-[80%] lg:animate-sliding-left"
+          src={isdlogo}
+          alt="isd-logo"
+        />
+      </div>
+
+      <div
+        class="flex animate-sliding-right flex-col space-y-48 pt-20 text-right lg:h-full lg:justify-between lg:space-y-0 lg:py-10"
+      >
+        <div
+          class="space-y-4 text-xl font-light text-white lg:space-y-12 lg:text-4xl"
+        >
+          <p>[email protected]</p>
+          <p>Instagram</p>
+        </div>
+        <div
+          class="text-6xl font-bold tracking-[.64rem] text-white lg:text-8xl"
+        >
+          Get In<br />Touch
+        </div>
+      </div>
+    </div>
+  </main>
+</Layout>

tailwind.config.mjs

@@ -2,7 +2,24 @@
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        slideLeft: {
+          "0%": { transform: "translateX(-100%)" },
+          "70%": { transform: "translateX(2%)" },
+          "100%": { transform: "translateX(0)" },
+        },
+        slideRight: {
+          "0%": { transform: "translateX(100%)" },
+          "70%": { transform: "translateX(-2%)" },
+          "100%": { transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        "sliding-left": "slideLeft 1.5s",
+        "sliding-right": "slideRight 1.5s",
+      },
+    },
   },
   plugins: [],
 };