@@ -0,0 +1,8 @@
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'green',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
})
|
||||
+12
@@ -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>
|
||||
Reference in New Issue
Block a user