first commit

2026-05-10 15:53:34 +07:00
commit 5730978b9c
20 changed files with 11030 additions and 0 deletions
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
@@ -0,0 +1,34 @@
+name: ci
+
+on: push
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Typecheck
+        run: pnpm run typecheck
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nuxt UI Templates
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,64 @@
+# Nuxt Starter Template
+
+[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
+
+Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly.
+
+- [Live demo](https://starter-template.nuxt.dev/)
+- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
+
+<a href="https://starter-template.nuxt.dev/" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png">
+    <img alt="Nuxt Starter Template" src="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png" width="830" height="466">
+  </picture>
+</a>
+
+> The starter template for Vue is on https://github.com/nuxt-ui-templates/starter-vue.
+
+## Quick Start
+
+```bash [Terminal]
+npm create nuxt@latest -- -t ui
+```
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=starter&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fstarter&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fstarter-dark.png&demo-url=https%3A%2F%2Fstarter-template.nuxt.dev%2F&demo-title=Nuxt%20Starter%20Template&demo-description=A%20minimal%20template%20to%20get%20started%20with%20Nuxt%20UI.)
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Renovate integration
+
+Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate'
+    }
+  }
+})
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Navbar from "./components/layout/Navbar.vue";
+import Footer from "./components/layout/Footer.vue";
+</script>
+
+<template>
+  <div>
+    <Navbar />
+    <NuxtPage />
+    <Footer />
+  </div>
+</template>
@@ -0,0 +1,46 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: "Inter", sans-serif;
+
+  --color-green-50: #effdf5;
+  --color-green-100: #d9fbe8;
+  --color-green-200: #b3f5d1;
+  --color-green-300: #75edae;
+  --color-green-400: #00dc82;
+  --color-green-500: #00c16a;
+  --color-green-600: #00a155;
+  --color-green-700: #007f45;
+  --color-green-800: #016538;
+  --color-green-900: #0a5331;
+  --color-green-950: #052e16;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #f8fafc;
+  color: #0f172a;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.dark body {
+  background-color: #020617;
+  color: #f8fafc;
+}
+
+::selection {
+  background: rgba(34, 197, 94, 0.2);
+  color: #0f172a;
+}
+
+.dark {
+  ::selection {
+    background: rgba(34, 197, 94, 0.3);
+    color: #f8fafc;
+  }
+}
@@ -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>
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import ProductCard from "~/components/ui/ProductCard.vue";
+
+const products = [
+  {
+    title: "Minimal Chair",
+    price: "$120",
+    image:
+      "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop",
+  },
+  {
+    title: "Modern Lamp",
+    price: "$89",
+    image:
+      "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=1200&auto=format&fit=crop",
+  },
+  {
+    title: "Wood Table",
+    price: "$250",
+    image:
+      "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=1200&auto=format&fit=crop",
+  },
+];
+</script>
+
+<template>
+  <div class="bg-gray-50 text-gray-900">
+
+    <main>
+      <section class="relative overflow-hidden">
+        <div
+          class="container mx-auto grid items-center gap-10 px-4 py-24 md:grid-cols-2"
+        >
+          <div>
+            <span
+              class="mb-4 inline-flex rounded-full border px-4 py-2 text-sm font-medium"
+            >
+              New Collection 2026
+            </span>
+
+            <h1 class="mb-6 text-5xl font-bold leading-tight md:text-6xl">
+              Build Your Dream Shopping Experience
+            </h1>
+
+            <p class="mb-8 text-lg text-gray-600">
+              Discover premium products with modern design and best quality for
+              your lifestyle.
+            </p>
+
+            <div class="flex gap-4">
+              <UButton size="xl"> Shop Now </UButton>
+
+              <UButton size="xl" color="neutral" variant="outline">
+                Learn More
+              </UButton>
+            </div>
+          </div>
+
+          <div class="relative">
+            <img
+              src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=1200&auto=format&fit=crop"
+              alt="Hero"
+              class="rounded-3xl shadow-2xl"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section id="products" class="container mx-auto px-4 py-24">
+        <div class="mb-12 flex items-end justify-between">
+          <div>
+            <p
+              class="mb-2 text-sm font-semibold uppercase tracking-widest text-primary"
+            >
+              Featured Products
+            </p>
+
+            <h2 class="text-4xl font-bold">Best Seller Products</h2>
+          </div>
+
+          <UButton color="neutral" variant="outline"> View All </UButton>
+        </div>
+
+        <div class="grid gap-8 md:grid-cols-3">
+          <ProductCard
+            v-for="(product, index) in products"
+            :key="index"
+            :title="product.title"
+            :price="product.price"
+            :image="product.image"
+          />
+        </div>
+      </section>
+    </main>
+
+  </div>
+</template>
@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)
@@ -0,0 +1,28 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/ui'
+  ],
+
+  devtools: {
+    enabled: true
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  routeRules: {
+    '/': { prerender: true }
+  },
+
+  compatibilityDate: '2025-01-15',
+
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
+  }
+})
@@ -0,0 +1,27 @@
+{
+  "name": "e-commerce",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.105",
+    "@iconify-json/simple-icons": "^1.2.80",
+    "@nuxt/ui": "^4.7.1",
+    "nuxt": "^4.4.4",
+    "tailwindcss": "^4.2.4"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.15.2",
+    "eslint": "^10.3.0",
+    "typescript": "^6.0.3",
+    "vue-tsc": "^3.2.7"
+  },
+  "packageManager": "pnpm@10.33.2"
+}
@@ -0,0 +1,6 @@
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - unrs-resolver
+  - vue-demi
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "github>nuxt/renovate-config-nuxt"
+  ],
+  "lockFileMaintenance": {
+    "enabled": true
+  },
+  "packageRules": [{
+    "matchDepTypes": ["resolutions"],
+    "enabled": false
+  }],
+  "postUpdateOptions": ["pnpmDedupe"]
+}
@@ -0,0 +1,10 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
+}