frontend
This commit is contained in:
Farhaan4
parent
6c25538e49
commit
9aead42283
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -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
|
||||
5
app/app.vue
Normal file
5
app/app.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
1
app/assets/css/main.css
Normal file
1
app/assets/css/main.css
Normal file
@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
78
app/components/landing-page/header.vue
Normal file
78
app/components/landing-page/header.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<header class="main-header">
|
||||
<nav class="container">
|
||||
<div class="logo">
|
||||
<img src="/logo1.png" alt="Abbauf Tech Logo" class="logo-icon">
|
||||
<span>ABBAUF TECH</span>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li v-for="link in navLinks" :key="link.name">
|
||||
<a :href="link.path">{{ link.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const navLinks = ref([
|
||||
{ name: 'Beranda', path: '#' },
|
||||
{ name: 'Tentang Kami', path: '#' },
|
||||
{ name: 'Templat', path: '#' },
|
||||
{ name: 'Panduan', path: '#' },
|
||||
{ name: 'Keistimewaan', path: '#' },
|
||||
{ name: 'Testimoni', path: '#' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-header {
|
||||
background-color: #eaf2ff; /* Warna biru muda */
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #d4e3ff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
color: #0d6efd; /* Biru Primer */
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 40px; /* Sesuaikan ukuran logo */
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 30px; /* Jarak antar menu */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #0d6efd; /* Warna biru saat di-hover */
|
||||
}
|
||||
</style>
|
||||
130
app/components/landing-page/hero.vue
Normal file
130
app/components/landing-page/hero.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<section class="hero-section">
|
||||
<div class="container hero-layout">
|
||||
<div class="hero-text">
|
||||
<h1>
|
||||
Buat Undangan Digital Praktis
|
||||
<span class="highlight">Untuk Semua</span>
|
||||
Tanpa Ribet
|
||||
</h1>
|
||||
<p>
|
||||
Coba undangan digital PRAKTIS untuk berbagai acara. Pilih template praktis atau premium sesuai kebutuhanmu. Praktis, cepat, dan bisa langsung digunakan.
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#" class="btn btn-whatsapp">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5C5.9249 1.5 0.9999 6.425 0.9999 12.5C0.9999 14.717 1.6219 16.814 2.7669 18.57L1.4179 22.582L5.5949 21.274C7.2729 22.3 9.2279 22.9 11.2999 22.9H11.9999C18.0749 22.9 22.9999 17.975 22.9999 11.9C22.9999 9.24 21.7819 6.734 19.7239 4.676L19.2239 4.7761Z" fill="#25D366"/>
|
||||
<path d="M16.7441 14.968C16.5331 15.538 15.4211 16.039 14.8811 16.191C14.3411 16.342 13.6261 16.355 13.0611 16.151C12.4961 15.947 11.7581 15.688 10.1581 14.18C8.2541 12.378 7.0981 10.217 6.8481 9.689C6.5991 9.16 5.8611 7.78 5.8611 6.94C5.8611 6.103 6.3051 5.689 6.5541 5.452C6.8031 5.215 7.2021 5.122 7.5121 5.122C7.6561 5.122 7.7951 5.132 7.9251 5.143C8.2851 5.179 8.4711 5.196 8.6511 5.568C8.8611 6.004 9.4211 7.42 9.4911 7.572C9.5611 7.724 9.6111 7.928 9.5111 8.132C9.4111 8.336 9.3521 8.428 9.2111 8.58C9.0711 8.732 8.9411 8.855 8.7911 9.006C8.6711 9.129 8.5511 9.253 8.6811 9.48C8.8111 9.707 9.3011 10.512 10.1211 11.332C11.1611 12.372 11.9611 12.75 12.3011 12.911C12.6411 13.072 12.9861 13.03 13.2361 12.78C13.5611 12.455 13.8861 12.01 14.3061 11.59C14.5411 11.355 14.8361 11.29 15.1361 11.39C15.4361 11.49 16.6361 12.09 16.9961 12.26C17.3561 12.43 17.5761 12.53 17.6561 12.65C17.7361 12.77 17.7411 13.06 17.7111 13.16L17.7161 14.008C17.7161 14.008 17.7111 14.003 17.6811 14.038C17.5911 14.128 17.3011 14.24 16.9511 14.39L16.7441 14.968Z" fill="white"/>
|
||||
</svg>
|
||||
<span>Hubungi Kami</span>
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary">Lihat Templat</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-image-wrapper">
|
||||
<img src="/logo2.png" alt="Tampilan Undangan Digital di Ponsel">
|
||||
<div class="testimonial">
|
||||
<p>"Abadikan momen indahmu dengan undangan digital yang elegan."</p>
|
||||
<p>"Satu aplikasi untuk semua momen spesialmu."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Script bisa dikosongkan jika tidak ada logika dinamis
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero-section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
flex: 1; /* Mengambil ruang yang tersedia */
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 3.5rem; /* Ukuran font besar */
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-text h1 .highlight {
|
||||
color: #0d6efd; /* Warna biru untuk "Untuk Semua" */
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 1.1rem;
|
||||
color: #555;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 15px 30px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-whatsapp {
|
||||
background-color: #fff;
|
||||
border: 2px solid #25D366; /* Warna hijau WhatsApp */
|
||||
color: #222;
|
||||
}
|
||||
.btn-whatsapp svg {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0d6efd; /* Warna biru */
|
||||
color: #fff;
|
||||
border: 2px solid #0d6efd;
|
||||
}
|
||||
|
||||
.hero-image-wrapper {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-image-wrapper img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
margin-top: 20px;
|
||||
font-style: italic;
|
||||
color: #444;
|
||||
}
|
||||
</style>
|
||||
11
app/pages/index.vue
Normal file
11
app/pages/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<LandingPageHeader />
|
||||
<LandingPageHero />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LandingPageHeader from '~/components/landing-page/header.vue';
|
||||
import LandingPageHero from '~/components/landing-page/hero.vue';
|
||||
</script>
|
||||
BIN
app/public/logo1.png
Normal file
BIN
app/public/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
app/public/logo2.png
Normal file
BIN
app/public/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
6
eslint.config.mjs
Normal file
6
eslint.config.mjs
Normal file
@ -0,0 +1,6 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
)
|
||||
23
nuxt.config.ts
Normal file
23
nuxt.config.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: [
|
||||
'@nuxt/fonts',
|
||||
'@nuxt/icon',
|
||||
'@nuxt/image',
|
||||
'@nuxt/eslint',
|
||||
|
||||
],
|
||||
css: [
|
||||
'~/assets/css/main.css'
|
||||
],
|
||||
vite: {
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
],
|
||||
},
|
||||
|
||||
})
|
||||
15702
package-lock.json
generated
Normal file
15702
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "^1.9.0",
|
||||
"@nuxt/fonts": "^0.11.4",
|
||||
"@nuxt/icon": "^2.0.0",
|
||||
"@nuxt/image": "^1.11.0",
|
||||
"@tailwindcss/vite": "^4.1.12",
|
||||
"eslint": "^9.34.0",
|
||||
"nuxt": "^4.0.3",
|
||||
"tailwindcss": "^4.1.12",
|
||||
"vue": "^3.5.20",
|
||||
"vue-router": "^4.5.1"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
18
tsconfig.json
Normal file
18
tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
// 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user