first commit

2026-05-10 15:53:34 +07:00
commit 5730978b9c
20 changed files with 11030 additions and 0 deletions
@@ -0,0 +1,71 @@
+<template>
+  <footer class="border-t bg-white">
+    <div class="container mx-auto grid gap-10 px-4 py-12 md:grid-cols-4">
+      <div>
+        <h2 class="mb-4 text-2xl font-bold">
+          MyStore
+        </h2>
+
+        <p class="text-sm text-gray-600">
+          Modern e-commerce platform built with Nuxt 4 and Nuxt UI.
+        </p>
+      </div>
+
+      <div>
+        <h3 class="mb-4 font-semibold">
+          Company
+        </h3>
+
+        <ul class="space-y-2 text-sm text-gray-600">
+          <li>
+            <a href="#">About</a>
+          </li>
+
+          <li>
+            <a href="#">Careers</a>
+          </li>
+
+          <li>
+            <a href="#">Blog</a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-4 font-semibold">
+          Support
+        </h3>
+
+        <ul class="space-y-2 text-sm text-gray-600">
+          <li>
+            <a href="#">Help Center</a>
+          </li>
+
+          <li>
+            <a href="#">Terms</a>
+          </li>
+
+          <li>
+            <a href="#">Privacy</a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-4 font-semibold">
+          Contact
+        </h3>
+
+        <ul class="space-y-2 text-sm text-gray-600">
+          <li>Email: hello@mystore.com</li>
+          <li>Phone: +62 812 3456 7890</li>
+          <li>Indonesia</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="border-t py-4 text-center text-sm text-gray-500">
+      © 2026 MyStore. All rights reserved.
+    </div>
+  </footer>
+</template>
@@ -0,0 +1,55 @@
+<template>
+  <header class="sticky top-0 z-50 border-b bg-zinc-100 backdrop-blur">
+    <div class="container mx-auto flex items-center justify-between px-4 py-4">
+      <NuxtLink
+        to="/"
+        class="text-2xl font-bold text-primary"
+      >
+        MyStore
+      </NuxtLink>
+
+      <nav class="hidden items-center gap-6 md:flex">
+        <NuxtLink
+          to="/"
+          class="text-sm font-medium text-gray-700 transition hover:text-primary"
+        >
+          Home
+        </NuxtLink>
+
+        <a
+          href="#products"
+          class="text-sm font-medium text-gray-700 transition hover:text-primary"
+        >
+          Products
+        </a>
+
+        <a
+          href="#about"
+          class="text-sm font-medium text-gray-700 transition hover:text-primary"
+        >
+          About
+        </a>
+
+        <a
+          href="#contact"
+          class="text-sm font-medium text-gray-700 transition hover:text-primary"
+        >
+          Contact
+        </a>
+      </nav>
+
+      <div class="flex items-center gap-3">
+        <UButton
+          color="neutral"
+          variant="ghost"
+        >
+          Login
+        </UButton>
+
+        <UButton>
+          Get Started
+        </UButton>
+      </div>
+    </div>
+  </header>
+</template>
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  price: string
+  image: string
+}>()
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-2xl border bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
+    <img
+      :src="image"
+      :alt="title"
+      class="h-64 w-full object-cover"
+    >
+
+    <div class="space-y-4 p-5">
+      <div>
+        <h3 class="text-lg font-semibold text-gray-900">
+          {{ title }}
+        </h3>
+
+        <p class="mt-1 text-sm text-gray-500">
+          Premium product for your daily needs.
+        </p>
+      </div>
+
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-bold text-primary">
+          {{ price }}
+        </span>
+
+        <UButton>
+          Buy Now
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>