first commit

2025-12-04 15:07:59 +07:00 · 2025-12-04 15:07:59 +07:00 · 140428b9bd
commit 140428b9bd
48 changed files with 6398 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,17 @@
 import js from '@eslint/js'
 import pluginVue from 'eslint-plugin-vue'
 export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },
  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },
  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
 ]
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <title>Solnus | Legal Service Solutions</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
 {
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix"
  },
  "dependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "vite": "^6.0.5",
    "vite-plugin-vue-devtools": "^7.6.8"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,22 @@
 <script setup>
 import BackToTop from "./components/button/BackToTop.vue";
 import Footer from "./components/footer/Footer.vue";
 import Navigation from "./components/Navigation.vue";
 </script>
 <template>
  <header>
    <Navigation />
  </header>
  <router-view />
  <footer id="kontak">
    <Footer />
  </footer>
  <BackToTop />
 </template>
 <style scoped>
 </style>
--- a/src/assets/background-hero.png
+++ b/src/assets/background-hero.png
--- a/src/assets/background_hero.png
+++ b/src/assets/background_hero.png
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -0,0 +1,5 @@
 body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", serif;
 }
--- a/src/assets/business-hero.png
+++ b/src/assets/business-hero.png
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/icon-check.png
+++ b/src/assets/icon-check.png
--- a/src/assets/icon-pt.png
+++ b/src/assets/icon-pt.png
--- a/src/assets/icon-question.png
+++ b/src/assets/icon-question.png
--- a/src/assets/icon_check.png
+++ b/src/assets/icon_check.png
--- a/src/assets/icon_law.png
+++ b/src/assets/icon_law.png
--- a/src/assets/logo-solnus.png
+++ b/src/assets/logo-solnus.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,4 @@
@import './base.css';
--- a/src/assets/salad.jpg
+++ b/src/assets/salad.jpg
--- a/src/assets/service_legal.jpg
+++ b/src/assets/service_legal.jpg
--- a/src/assets/spaghetti.jpg
+++ b/src/assets/spaghetti.jpg
--- a/src/assets/steak.jpg
+++ b/src/assets/steak.jpg
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@ -0,0 +1,315 @@
 <template>
  <header>
    <nav class="navbar">
      <div class="left">
        <router-link to="/">
          <img src="@/assets/logo-solnus.png" class="logo" />
        </router-link>
      </div>
      <div class="right">
        <ul class="nav-links" :class="{ active: isMenuOpen }">
          <li><a href="#solusi" @click.prevent="scrollToSection('solusi')" :class="{ 'active-link': activeSection === 'solusi' }">Solusi</a></li>
          <li class="dropdown" ref="dropdownRef">
            <button type="button" class="dropdown-toggle" @click="toggleDropdown" :class="{ 'active-link': $route.path.startsWith('/packages') }">
              Paket Layanan
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 4px; transition: transform 0.2s;" :style="{ transform: showDropdown ? 'rotate(180deg)' : 'rotate(0deg)' }">
                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <div class="dropdown-menu" :class="{ show: showDropdown }">
              <router-link to="/packages" @click="closeMenu">Semua Paket</router-link>
              <router-link to="/packages/pendirian" @click="closeMenu">Paket Pendirian</router-link>
              <router-link to="/packages/perubahan" @click="closeMenu">Paket Perubahan & Pembubaran</router-link>
              <router-link to="/packages/property" @click="closeMenu">Paket Property</router-link>
              <router-link to="/packages/khusus" @click="closeMenu">Paket Khusus</router-link>
              <router-link to="/packages/umum" @click="closeMenu">Paket Umum</router-link>
            </div>
          </li>
          <li><a href="#kontak" @click.prevent="scrollToSection('kontak')" :class="{ 'active-link': activeSection === 'kontak' }">Kontak Kami</a></li>
          <li>
            <a href="#konsultasi" @click.prevent="scrollToSection('konsultasi')" class="consult-btn" :class="{ 'active-link': activeSection === 'konsultasi' }">Konsultasi Gratis</a>
          </li>
        </ul>
        <div class="hamburger" @click="toggleMenu">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
      </div>
    </nav>
  </header>
 </template>
 <script>
 export default {
  data() {
    return {
      isMenuOpen: false,
      activeSection: '',
      showDropdown: false,
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    },
    closeMenu() {
      this.isMenuOpen = false;
      this.showDropdown = false;
    },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    scrollToSection(sectionId) {
      this.closeMenu();
      // If not on home page, navigate to home first
      if (this.$route.path !== '/') {
        this.$router.push('/').then(() => {
          // Wait for DOM to be fully rendered
          setTimeout(() => {
            this.performScroll(sectionId);
          }, 100);
        });
      } else {
        this.performScroll(sectionId);
      }
    },
    performScroll(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    },
    handleScroll() {
      // Only track sections on home page
      if (this.$route.path !== '/') {
        this.activeSection = '';
        return;
      }
      const sections = ['solusi', 'konsultasi', 'kontak'];
      const scrollPosition = window.scrollY + 100;
      for (const sectionId of sections) {
        const element = document.getElementById(sectionId);
        if (element) {
          const offsetTop = element.offsetTop;
          const offsetBottom = offsetTop + element.offsetHeight;
          if (scrollPosition >= offsetTop && scrollPosition < offsetBottom) {
            this.activeSection = sectionId;
            return;
          }
        }
      }
      this.activeSection = '';
    }
  },
  mounted() {
    // Close menu when clicking on any nav link
    const navLinks = this.$el.querySelectorAll('.nav-links a');
    navLinks.forEach(link => {
      link.addEventListener('click', () => {
        this.closeMenu();
      });
    });
    // Track scroll position for active section
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
 };
 </script>
 <style scoped>
 .navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: visible;
 }
 .logo {
  width: 140px;
  cursor: pointer;
 }
 .right {
  display: flex;
  align-items: center;
  gap: 48px;
  overflow: visible;
 }
 .nav-links {
  list-style: none;
  display: flex;
  gap: 50px;
  align-items: center;
  margin-right: 20px;
  overflow: visible;
 }
 .nav-links li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-weight: 500;
 }
 .nav-links li a:hover {
  color: #FF6640;
 }
 .nav-links li a.router-link-active,
 .nav-links li a.router-link-exact-active,
 .nav-links li a.active-link {
  color: #FF6640;
 }
 .dropdown {
  position: relative;
 }
 .dropdown-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
 }
 .dropdown-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  margin: 0;
  min-width: 260px;
  z-index: 99999;
 }
 .dropdown-menu.show {
  display: block;
 }
 .dropdown-menu a {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
 }
 .dropdown-menu a:hover {
  background: #f9fafb;
  color: #FF6640;
 }
 .dropdown-menu a.router-link-active,
 .dropdown-menu a.router-link-exact-active {
  color: #FF6640;
  background: #fff5f3;
 }
 .consult-btn {
  padding: 10px 22px;
  border: 2px solid #FF6640;
  border-radius: 8px;
  font-weight: bold;
  color: #FF6640;
  white-space: nowrap; /* prevent wrapping */
 }
 .consult-btn:hover {
  background: #FF6640;
  color: white !important;
 }
 .hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-left: 20px;
 }
 .bar {
  width: 28px;
  height: 3px;
  background: #333;
 }
 /* Mobile */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    background: white;
    width: 100%;
    padding: 20px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    gap: 0;
  }
  .nav-links.active {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
  .dropdown {
    width: 100%;
  }
  .dropdown-toggle {
    padding: 12px 20px;
    width: 100%;
    justify-content: space-between;
  }
  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border-left: 3px solid #FF6640;
    background: #f9fafb;
    margin: 0;
  }
  .nav-links > li > a {
    display: block;
    padding: 12px 20px;
  }
 }
 </style>
--- a/src/components/button/BackToTop.vue
+++ b/src/components/button/BackToTop.vue
@ -0,0 +1,46 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 const showButton = ref(false);
 const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
 };
 const handleScroll = () => {
  showButton.value = window.scrollY > 0;
 };
 onMounted(() => {
  window.addEventListener("scroll", handleScroll);
 });
 onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
 });
 </script>
 <template>
  <button v-if="showButton" @click="scrollToTop">&#x2191;</button>
 </template>
 <style scoped>
 button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color:  #f8b400;;
  color: black;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 20px;
 }
 button:hover {
  background-color: #c39004;;
 }
 </style>
--- a/src/components/footer/Footer.vue
+++ b/src/components/footer/Footer.vue
@ -0,0 +1,83 @@
 <template>
  <footer class="footer">
    <div class="footer-wrapper">
    <div class="container">
      <div class="grid">
        <div class="col brand">
          <div class="logo">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="28" height="28" rx="6" fill="#FF6640"/>
              <path d="M8 10h12M8 14h12M8 18h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span class="logo-text">Solnus</span>
          </div>
          <p class="tagline">Urus Legalitas Bisnis Tanpa Ribet.<br/>Dari pendirian PT, CV, hingga Yayasan,<br/>semua proses hukum kini lebih cepat,<br/>aman, dan transparan bersama tim<br/>profesional berpengalaman.</p>
          <div class="contact">+62 821 xxxx xxxx</div>
          <div class="social">
            <a href="#" aria-label="LinkedIn">
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
            </a>
            <a href="#" aria-label="Instagram">
              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
            </a>
          </div>
        </div>
        <div class="col">
          <h3 class="title">Navigasi</h3>
          <ul class="links">
            <li><a href="#">Solusi</a></li>
            <li><a href="#">Kenapa Solnus?</a></li>
            <li><a href="#">Layanan Solnus</a></li>
            <li><a href="#">Cara Kerja</a></li>
            <li><a href="#">Testimoni</a></li>
          </ul>
        </div>
        <div class="col">
          <h3 class="title">Layanan</h3>
          <ul class="links">
            <li><a href="#">Pendirian PT (Perseroan Terbatas)</a></li>
            <li><a href="#">Pendirian CV (Commanditaire Vennootschap)</a></li>
            <li><a href="#">Pendirian Yayasan</a></li>
          </ul>
        </div>
      </div>
    </div>
    </div>
    <div class="bottom">
      <div class="container">
        <div class="bottom-content">
          <span>© 2025 All Rights Reserved | PT Solusi Legal Nusantara</span>
          <a href="#" class="privacy">Privacy Policy</a>
        </div>
      </div>
    </div>
  </footer>
 </template>
 <style scoped>
 .footer { background: #fff;  border-top: 1px solid #e5e7eb; }
 .footer-wrapper { padding: 60px 20px 0; }
 .container { max-width: 1200px; margin: 0 auto; }
 .grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid { grid-template-columns: 1.5fr 1fr 1fr; } }
 .col { }
 .brand { }
 .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
 .logo-text { font-size: 24px; font-weight: 800; color: #FF6640; }
 .tagline { font-size: 14px; line-height: 1.7; color: #6b7280; margin: 0 0 20px; }
 .contact { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 16px; }
 .social { display: flex; gap: 12px; }
 .social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #6b7280; transition: color .2s; }
 .social a:hover { color: #111827; }
 .title { font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 16px; }
 .links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
 .links a { color: #6b7280; text-decoration: none; font-size: 14px; transition: color .2s; }
 .links a:hover { color: #111827; }
 .bottom { background: #111827; margin-top: 48px; padding: 20px; }
 .bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: #9ca3af; font-size: 14px; }
 .privacy { color: #9ca3af; text-decoration: none; }
 .privacy:hover { color: #fff; }
@media (max-width: 640px) { .bottom-content { flex-direction: column; text-align: center; } }
 </style>
--- a/src/components/main/CallToAction.vue
+++ b/src/components/main/CallToAction.vue
@ -0,0 +1,39 @@
 <script setup>
 const props = defineProps({
  title: { type: String, default: 'Jangan biarkan bisnis hanya Anda berdiri di atas dokumen yang lemah.' },
  buttonText: { type: String, default: 'Konsultasi Gratis' }
 })
 </script>
 <template>
  <section class="cta">
    <div class="overlay"></div>
    <div class="container">
      <h2 class="title">{{ title }}</h2>
      <button class="btn">{{ buttonText }}</button>
    </div>
  </section>
 </template>
 <style scoped>
 .cta { 
  padding: 80px 20px; 
  text-align: center; 
  position: relative;
  background-image: url('@/assets/business-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 }
 .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
 }
 .container { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
 .title { color: #fff; font-size: 28px; font-weight: 700; line-height: 1.4; margin: 0 0 24px; }
 .btn { padding: 14px 32px; background: #FF6640; color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s; }
 .btn:hover { background: #e85a30; }
@media (min-width: 768px) { .title { font-size: 36px; } }
 </style>
--- a/src/components/main/ContactUs.vue
+++ b/src/components/main/ContactUs.vue
@ -0,0 +1,174 @@
 <template>
  <section class="contact">
    <h2 class="contact-title">{{ heading }}</h2>
    <p class="contact-description">
      {{ subheading }}
    </p>
    <div class="contact-items">
      <article
        v-for="item in contactItems"
        :key="item.id"
        class="item"
      >
        <i aria-hidden="true">{{ item.icon }}</i>
        <div class="details">
          <h3>{{ item.title }}</h3>
          <p class="detail-text">{{ item.detail }}</p>
          <p
            v-if="item.description"
            class="detail-subtext"
          >
            {{ item.description }}
          </p>
        </div>
      </article>
    </div>
  </section>
 </template>
 <script setup>
 const heading = "Hubungi Solnus";
 const subheading =
  "Tim kami siap mendampingi legalitas bisnis Anda melalui jalur komunikasi yang paling nyaman.";
 const contactItems = [
  {
    id: "phone",
    icon: "📞",
    title: "Telepon",
    detail: "+62 811-2233-4455",
    description: "Senin - Jumat, 09.00 - 18.00 WIB"
  },
  {
    id: "email",
    icon: "✉️",
    title: "Email",
    detail: "support@solnus.id",
    description: "Kami membalas dalam 1x24 jam kerja"
  },
  {
    id: "office",
    icon: "📍",
    title: "Kantor",
    detail: "Green Office Park, BSD City",
    description: "Silakan buat janji sebelum kunjungan"
  }
 ];
 </script>
 <style scoped>
 .contact {
  padding: 80px 20px;
 }
 .contact-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--color-heading);
 }
 .contact-description {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--color-text);
  line-height: 1.6;
 }
 .contact-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
 }
 .item {
  margin-top: 2rem;
  display: flex;
  position: relative;
 }
 .details {
  flex: 1;
  margin-left: 1rem;
 }
 i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text);
  background: var(--color-background-mute);
  border-radius: 50%;
 }
 h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
 }
 .detail-text {
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
 }
 .detail-subtext {
  margin: 0.2rem 0 0;
  color: var(--color-text);
 }
@media (min-width: 1024px) {
  .contact-items {
    gap: 0;
  }
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }
  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }
  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }
  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }
  .item:first-of-type:before {
    display: none;
  }
  .item:last-of-type:after {
    display: none;
  }
 }
 </style>
--- a/src/components/main/Hero.vue
+++ b/src/components/main/Hero.vue
@ -0,0 +1,209 @@
 <template>
  <section
    class="hero"
    :style="heroStyle"
  >
    <div class="overlay">
      <div class="hero-content">
        <h1 class="headline">{{ headline }}</h1>
        <div class="badges">
          <button
            v-for="badge in badges"
            :key="badge.id"
            class="badge"
            :class="badge.variant"
            type="button"
          >
            <img
              :src="badge.icon"
              :alt="badge.alt"
              class="icon"
            />
            {{ badge.label }}
          </button>
        </div>
        <p class="description">
          {{ description }}
        </p>
        <div class="cta-buttons">
          <button
            v-for="button in ctaButtons"
            :key="button.id"
            class="cta-button"
            :class="button.variant"
            type="button"
          >
            {{ button.label }}
          </button>
        </div>
      </div>
    </div>
  </section>
 </template>
 <script setup>
 import heroBackground from "@/assets/background_hero.png";
 import iconLaw from "@/assets/icon_law.png";
 import iconCheck from "@/assets/icon_check.png";
 const headline = "Urus Legalitas Bisnis Tanpa Ribet";
 const description =
  "Dari pendirian PT, CV, hingga Yayasan, semua proses hukum lebih cepat, aman, dan transparan bersama tim profesional berpengalaman Solnus secara online.";
 const heroStyle = {
  backgroundImage: `url(${heroBackground})`
 };
 const badges = [
  {
    id: "law-support",
    label: "Didampingi Tim Hukum",
    variant: "primary",
    icon: iconLaw,
    alt: "Ikon tim hukum"
  },
  {
    id: "verified-partner",
    label: "Legal Partner Terverifikasi",
    variant: "secondary",
    icon: iconCheck,
    alt: "Ikon verifikasi legal"
  }
 ];
 const ctaButtons = [
  { id: "consult", label: "Jadwalkan Konsultasi Gratis", variant: "primary" },
  { id: "services", label: "Lihat Layanan Solnus", variant: "secondary" }
 ];
 </script>
 <style scoped>
 .hero {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  color: white;
  text-align: center;
 }
 .overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .hero-content {
  max-width: 900px;
  margin-top: -40px;
 }
 .headline {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 30px;
 }
 .badges {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
 }
 .badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: default;
  font-size: 1rem;
 }
 .badge.primary {
  background-color: #b71c1c;
 }
 .badge.secondary {
  background-color: #5e0000;
 }
 .icon {
  width: 20px;
  height: 20px;
 }
 .description {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 40px;
 }
 .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
 }
 .cta-button {
  padding: 14px 28px;
  font-size: 1.1rem;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
 }
 .cta-button.primary {
  background-color: #FF6640;
  color: black;
  border-color: #FF6640;
 }
 .cta-button.primary:hover {
  background-color: #FF6640;
  border-color: #FF6640;
 }
 .cta-button.secondary {
  background-color: transparent;
  color: white;
  border-color: white;
 }
 .cta-button.secondary:hover {
  background-color: white;
  color: #222;
 }
@media (max-width: 768px) {
  .headline {
    font-size: 2.4rem;
  }
  .description {
    font-size: 1.05rem;
  }
  .hero-content {
    margin-top: 0;
  }
 }
 </style>
--- a/src/components/main/Menu.vue
+++ b/src/components/main/Menu.vue
@ -0,0 +1,170 @@
 <template>
  <section id="menu" class="featured">
    <h2>Popular Dishes</h2>
    <div class="dishes">
      <div
        v-for="dish in dishes"
        :key="dish.id"
        class="dish"
      >
        <img
          :src="dish.image"
          width="280"
          height="280"
          :alt="dish.alt"
        />
        <h3>{{ dish.name }}</h3>
        <p>{{ dish.description }}</p>
        <div class="card-actions">
          <a
            :href="dish.whatsappLink"
            class="whatsapp-button"
            target="_blank"
            rel="noopener"
          >
            WhatsApp
          </a>
          <button
            class="detail-button"
            type="button"
          >
            {{ dish.detailLabel }}
          </button>
        </div>
      </div>
    </div>
  </section>
 </template>
 <script setup>
 import spaghettiImg from "@/assets/spaghetti.jpg";
 import steakImg from "@/assets/steak.jpg";
 import saladImg from "@/assets/salad.jpg";
 const whatsappLink = "https://wa.me/1234567890";
 const dishes = [
  {
    id: "spaghetti",
    name: "Spaghetti Carbonara",
    description: "Classic Italian pasta with creamy sauce and pancetta.",
    image: spaghettiImg,
    alt: "Spaghetti Carbonara",
    whatsappLink,
    detailLabel: "Detail"
  },
  {
    id: "steak",
    name: "Grilled Steak",
    description: "Perfectly grilled steak served with mashed potatoes.",
    image: steakImg,
    alt: "Grilled Steak",
    whatsappLink,
    detailLabel: "Detail"
  },
  {
    id: "salad",
    name: "Caesar Salad",
    description: "Fresh greens tossed in Caesar dressing.",
    image: saladImg,
    alt: "Caesar Salad",
    whatsappLink,
    detailLabel: "Detail"
  }
 ];
 </script>
 <style scoped>
 #menu {
  box-sizing: border-box;
  padding: 100px 0;
 }
 h2 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
 }
 .dishes {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 80px;
  justify-content: space-evenly;
 }
 .dish {
  background-color: white;
  width: 280px;
  height: 400px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.3);
  transition: 300ms;
  padding: 0 0 20px;
 }
 .dish:hover {
  margin-top: -10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 1);
 }
 img {
  border-radius: 20px 20px 0 0;
  height: 220px;
  object-fit: cover;
 }
 p {
  width: 230px;
 }
 .card-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  width: 230px;
  padding-top: 10px;
 }
 .detail-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
 }
 .detail-button:hover {
  background-color: #0056b3;
 }
 .whatsapp-button {
  background-color: #25d366;
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
 }
 .whatsapp-button:hover {
  background-color: #1ebe5d;
 }
@media (max-width: 1024px) {
  .dishes {
    flex-direction: column;
    align-items: center;
  }
  .dish {
    margin-bottom: 20px;
  }
 }
 </style>
--- a/src/components/main/ReasonsSection.vue
+++ b/src/components/main/ReasonsSection.vue
@ -0,0 +1,53 @@
 <script setup>
 const steps = [
  {
    number: '1.',
    title: 'Konsultasi & Pemilihan Layanan',
    description: 'Pilih layanan yang sesuai dengan kebutuhan usaha Anda.'
  },
  {
    number: '2.',
    title: 'Upload & Verifikasi Dokumen',
    description: 'Kirim dokumen yang dibutuhkan, kami bantu cek kelengkapannya.'
  },
  {
    number: '3.',
    title: 'Proses oleh Tim Legal',
    description: 'Dokumen Anda diurus oleh notaris & konsultan hukum terpercaya.'
  },
  {
    number: '4.',
    title: 'Dokumen Selesai & Dikirim',
    description: 'Terima semua dokumen resmi dalam bentuk digital dan fisik.'
  }
 ]
 </script>
 <template>
  <section class="reasons">
    <div class="container">
      <h2 class="headline">Bagaimana Kami Membantu Anda</h2>
      <div class="grid">
        <article v-for="(step, i) in steps" :key="i" class="card">
          <div class="number-badge">{{ step.number }}</div>
          <h3 class="card-title">{{ step.title }}</h3>
          <p class="card-desc">{{ step.description }}</p>
        </article>
      </div>
    </div>
  </section>
 </template>
 <style scoped>
 .reasons { padding: 80px 20px; background: #f9fafb; }
 .container { max-width: 1200px; margin: 0 auto; }
 .headline { font-size: 36px; font-weight: 800; text-align: center; margin: 0 0 56px; color: #111827; }
 .grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
 .card { background: #fff; padding: 32px 24px;  box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-align: left; }
 .number-badge { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #6b7280; margin-bottom: 16px; }
 .card-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: #111827; line-height: 1.4; }
 .card-desc { font-size: 14px; line-height: 1.6; color: #6b7280; margin: 0; }
@media (min-width: 768px) { .headline { font-size: 40px; } }
 </style>
--- a/src/components/main/Service.vue
+++ b/src/components/main/Service.vue
@ -0,0 +1,192 @@
 <template>
  <div class="service-card">
    <div class="diamond-wrapper">
      <div class="diamond-bg"></div>
      <img
        :src="image"
        :alt="title"
        class="service-image"
      />
      <div class="icon-badge">
        <svg v-if="!primary" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 9H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <path d="M9 13H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <path d="M9 17H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <!-- Tags -->
      <div v-if="tags && tags.length > 0" class="tags">
        <div v-for="(tag, i) in tags" :key="i" class="tag">
          {{ tag }}
        </div>
      </div>
    </div>
    <h3 class="service-title">{{ title }}</h3>
    <p class="service-desc">
      {{ description }}
    </p>
    <button
      class="service-btn"
      :class="{ primary }"
      type="button"
    >
      {{ buttonText }}
    </button>
  </div>
 </template>
 <script setup>
 const { image, title, description, buttonText, primary, tags } = defineProps({
  image: { type: String, required: true },
  title: { type: String, required: true },
  description: { type: String, required: true },
  buttonText: { type: String, required: true },
  primary: { type: Boolean, default: false },
  tags: { type: Array, default: () => [] }
 });
 </script>
 <style scoped>
 .service-card {
  background: #f9fafb;
  padding: 32px 24px;
  text-align: center;
  transition: 0.2s ease-in-out;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .service-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
 }
 /* Diamond wrapper */
 .diamond-wrapper {
  position: relative;
  width: 260px;
  height: 240px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .diamond-bg {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #FF6640 0%, #e85a30 100%);
  transform: rotate(45deg);
  z-index: 1;
  border-radius: 0;
 }
 .service-image {
  position: relative;
  width: 180px;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 .icon-badge {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  z-index: 3;
  color: #FF6640;
 }
 /* Tags */
 .tags {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 220px;
 }
 .tag {
  background: rgba(75, 85, 99, 0.88);
  color: #fff;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  line-height: 1.2;
 }
 /* Title */
 .service-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111827;
 }
 /* Description */
 .service-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
 }
 /* Button */
 .service-btn {
  border: 2px solid #FF6640;
  padding: 12px 28px;
  color: #FF6640;
  font-weight: 600;
  background: white;
  cursor: pointer;
  transition: 0.2s;
  font-size: 14px;
 }
 .service-btn:hover {
  background: #FF6640;
  color: white;
 }
 /* Primary style */
 .service-btn.primary {
  background: #FF6640;
  color: white;
  border-color: #FF6640;
 }
 .service-btn.primary:hover {
  background: #e85a30;
  border-color: #e85a30;
 }
 </style>
--- a/src/components/main/ServiceSection.vue
+++ b/src/components/main/ServiceSection.vue
@ -0,0 +1,118 @@
 <template>
  <section class="services-wrapper">
    <div class="container">
      <div class="eyebrow">SOLUSI LEGAL</div>
      <h2 class="headline">Semua Urusan Legal Anda,<br/>Kami Bantu Selesaikan</h2>
      <p class="description">
        Solnus membantu individu dan perusahaan mengurusberbagai kebutuhan hukum, dari pendirian badan usaha, pengurusan izin, hingga konsultasi legal. Kami menghadirkan kemudahan, transparansi, dan kepastian dalam setiap proses legal yang Anda butuhkan.
      </p>
      <div class="services-container">
        <Service
          v-for="service in services"
          :key="service.id"
          :image="service.image"
          :title="service.title"
          :description="service.description"
          :button-text="service.buttonText"
          :primary="service.primary"
          :tags="service.tags"
        />
      </div>
    </div>
  </section>
 </template>
 <script setup>
 import Service from "./Service.vue";
 const services = [
  {
    id: "business-formation",
    image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop',
    title: "Pendirian Badan Usaha",
    description: "Buat PT, CV, atau Yayasan secara online, dengan dokumen resmi Kemenkumham.",
    buttonText: "Lihat Detail Layanan",
    primary: false,
    tags: ['PT', 'CV', 'Yayasan']
  },
  {
    id: "license-nib",
    image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop',
    title: "Perizinan & NIB",
    description: "Dapatkan Nomor Induk Berusaha (NIB) dan izin OSS dengan cepat & aman.",
    buttonText: "Lihat Detail Layanan",
    primary: false,
    tags: []
  },
  {
    id: "legal-consultation",
    image: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop',
    title: "Konsultasi Hukum",
    description: "Konsultasikan masalah hukum bisnis Anda dengan ahli berpengalaman.",
    buttonText: "Jadwalkan Konsultasi Gratis",
    primary: true,
    tags: ['Lebih baik PT atau CV ya?', 'Ini masih bisa daftar NIB?']
  }
 ];
 </script>
 <style scoped>
 .services-wrapper {
  padding: 80px 20px;
  background: #fff;
 }
 .container {
  max-width: 1200px;
  margin: 0 auto;
 }
 .eyebrow {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #FF6640;
  letter-spacing: 1px;
  margin-bottom: 16px;
 }
 .headline {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  color: #111827;
  margin: 0 0 20px;
  line-height: 1.3;
 }
 .description {
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
 }
 .services-container {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
 }
@media (min-width: 768px) {
  .services-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .headline {
    font-size: 42px;
  }
 }
@media (max-width: 767px) {
  .headline {
    font-size: 28px;
  }
 }
 </style>
--- a/src/components/main/ServicesMenu.vue
+++ b/src/components/main/ServicesMenu.vue
@ -0,0 +1,159 @@
 <script setup>
 const services = [
  {
    id: 'pendirian',
    title: 'Paket Pendirian',
    icon: '🏢',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=400&h=300&fit=crop'
  },
  {
    id: 'perubahan',
    title: 'Paket Perubahan\n& Pembubaran',
    icon: '📄',
    image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=400&h=300&fit=crop'
  },
  {
    id: 'property',
    title: 'Paket Property',
    icon: '🏠',
    image: 'https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=400&h=300&fit=crop'
  },
  {
    id: 'khusus',
    title: 'Paket Khusus',
    icon: '⚖️',
    image: 'https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=300&fit=crop'
  },
  {
    id: 'umum',
    title: 'Paket Umum',
    icon: '🔨',
    image: 'https://images.unsplash.com/photo-1505664194779-8beaceb93744?w=400&h=300&fit=crop'
  }
 ]
 </script>
 <template>
  <section class="services-menu">
    <div class="overlay"></div>
    <div class="container">
      <h2 class="headline">Layanan Legal Solnus</h2>
      <div class="cards">
        <a
          v-for="service in services"
          :key="service.id"
          :href="`#${service.id}`"
          class="card"
        >
          <div class="card-icon">{{ service.icon }}</div>
          <h3 class="card-title">{{ service.title }}</h3>
        </a>
      </div>
    </div>
  </section>
 </template>
 <style scoped>
 .services-menu {
  position: relative;
  padding: 80px 20px;
  background-image: url('@/assets/service_legal.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
 }
 .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
 }
 .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
 }
 .headline {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 48px;
  color: #fff;
 }
 .cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 1100px;
  margin: 0 auto;
 }
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
 }
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
 }
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(5, 1fr);
  }
 }
 .card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 }
 .card-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 12px;
 }
 .card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  text-align: center;
  line-height: 1.4;
  white-space: pre-line;
 }
@media (min-width: 768px) {
  .headline {
    font-size: 42px;
  }
 }
 </style>
--- a/src/components/main/Testimonial.vue
+++ b/src/components/main/Testimonial.vue
@ -0,0 +1,92 @@
 <script setup>
 import { ref } from 'vue'
 const testimonials = [
  {
    name: 'Imam Santosa',
    role: 'Owner Nona Craft Studio',
    text: 'Saya sempat ragu bikin PT karena takut ribet dan mahal. Tapi ternyata lewat Solnus, semua prosesnya transparan, cepat, dan saya bisa pantau dari HP. Dalam 7 hari, SK dan NIB saya sudah keluar. Sekarang bisnis saya bisa kerja sama dengan brand besar.',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop'
  }
 ]
 const current = ref(0)
 function prev() {
  current.value = (current.value - 1 + testimonials.length) % testimonials.length
 }
 function next() {
  current.value = (current.value + 1) % testimonials.length
 }
 </script>
 <template>
  <section class="testimonial">
    <div class="container">
      <div class="eyebrow">1500+ Pengusaha Telah Buktikan</div>
      <h2 class="headline">Sekarang Giliran Anda!</h2>
      <div class="card">
        <div class="author">
          <img :src="testimonials[current].avatar" :alt="testimonials[current].name" class="avatar" />
          <div class="meta">
            <div class="name">{{ testimonials[current].name }}</div>
            <div class="role">{{ testimonials[current].role }}</div>
          </div>
        </div>
        <blockquote class="quote">
          "{{ testimonials[current].text }}"
        </blockquote>
        <div class="stats">
          <div class="stat">
            <div class="stat-value">100%</div>
            <div class="stat-label">Kepuasan pelanggan</div>
          </div>
          <div class="stat">
            <div class="stat-value">4x</div>
            <div class="stat-label">Lebih cepat dari proses manual</div>
          </div>
        </div>
        <div class="nav">
          <button @click="prev" class="nav-btn" aria-label="Previous">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <button @click="next" class="nav-btn" aria-label="Next">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </section>
 </template>
 <style scoped>
 .testimonial { padding: 80px 20px; background: #fff; }
 .container { max-width: 1200px; margin: 0 auto; }
 .eyebrow { font-size: 16px; font-weight: 600; color: #FF6640; text-align: center; margin: 0 0 12px; letter-spacing: .5px; }
 .headline { font-size: 40px; font-weight: 800; text-align: center; margin: 0 0 56px; color: #111827; line-height: 1.2; }
 .card { padding: 48px; background: #f9fafb; border-radius: 16px; position: relative; max-width: 1000px; margin: 0 auto; }
 .author { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
 .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
 .meta { display: flex; flex-direction: column; gap: 4px; }
 .name { font-weight: 700; font-size: 18px; color: #111827; }
 .role { font-size: 15px; color: #9ca3af; font-style: italic; }
 .quote { margin: 0 0 32px; font-size: 20px; line-height: 1.7; color: #374151; font-weight: 400; }
 .stats { display: flex; gap: 48px; margin-bottom: 0; }
 .stat { }
 .stat-value { font-size: 28px; font-weight: 800; color: #111827; margin-bottom: 4px; }
 .stat-label { font-size: 14px; color: #6b7280; }
 .nav { position: absolute; bottom: 48px; right: 48px; display: flex; gap: 12px; }
 .nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; color: #6b7280; }
 .nav-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; }
@media (min-width: 768px) { .headline { font-size: 48px; } }
@media (max-width: 768px) { .card { padding: 32px 24px; } .nav { position: static; margin-top: 24px; justify-content: center; } .stats { flex-direction: column; gap: 20px; } }
 </style>
--- a/src/components/main/WhyChoose.vue
+++ b/src/components/main/WhyChoose.vue
@ -0,0 +1,67 @@
 <script setup>
 const features = [
  {
    icon: 'lightning',
    title: 'Proses Cepat & Efisien',
    description: 'Semua layanan dilakukan online dengan deadline jelas untuk efisiensi.'
  },
  {
    icon: 'lock',
    title: 'Aman & Terpercaya',
    description: 'Dokumen diverifikasi langsung oleh notaris dan instansi resmi.'
  },
  {
    icon: 'star',
    title: 'Tim Profesional',
    description: 'Didukung pengacara dan konsultan hukum berpengalaman.'
  },
  {
    icon: 'message',
    title: 'Proses Transparan',
    description: 'Anda bisa pantau status dokumen kapan pun.'
  }
 ]
 </script>
 <template>
  <section class="why-choose">
    <div class="container">
      <h2 class="headline">Kenapa Bisnis Memilih Solusi Kami</h2>
      <div class="grid">
        <article v-for="(feature, i) in features" :key="i" class="card">
          <div class="icon-wrapper">
            <svg v-if="feature.icon === 'lightning'" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-else-if="feature.icon === 'lock'" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" stroke-width="2"/>
              <path d="M7 11V7C7 4.79086 8.79086 3 11 3H13C15.2091 3 17 4.79086 17 7V11" stroke="currentColor" stroke-width="2"/>
            </svg>
            <svg v-else-if="feature.icon === 'star'" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-else-if="feature.icon === 'message'" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3 class="card-title">{{ feature.title }}</h3>
          <p class="card-desc">{{ feature.description }}</p>
        </article>
      </div>
    </div>
  </section>
 </template>
 <style scoped>
 .why-choose { padding: 80px 20px; background: #111827; }
 .container { max-width: 1200px; margin: 0 auto; }
 .headline { font-size: 36px; font-weight: 800; text-align: center; margin: 0 0 56px; color: #fff; line-height: 1.2; }
 .grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
 .card { text-align: center; }
 .icon-wrapper { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); color: #fff; }
 .card-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: #fff; }
 .card-desc { font-size: 14px; line-height: 1.6; color: #9ca3af; margin: 0; }
@media (min-width: 768px) { .headline { font-size: 40px; } }
 </style>
--- a/src/components/packages/PackageCard.vue
+++ b/src/components/packages/PackageCard.vue
@ -0,0 +1,60 @@
 <script setup>
 const props = defineProps({
  title: { type: String, required: true },
  price: { type: String, required: true },
  subtitle: { type: String, default: '' },
  image: { type: String, default: '' },
  features: { type: Array, default: () => [] },
  ctaText: { type: String, default: 'Jadwalkan Konsultasi Gratis' }
 })
 </script>
 <template>
  <article class="card">
    <div class="media" v-if="image">
      <img :src="image" :alt="title" />
      <div class="overlay"></div>
      <div class="media-text">
        <h3>{{ title }}</h3>
        <p>{{ subtitle }}</p>
      </div>
    </div>
    <div class="body">
      <div class="price">{{ price }}</div>
      <ul class="features">
        <li v-for="(f, i) in features" :key="i">
          <svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="8" cy="8" r="8" fill="#10b981"/>
            <path d="M11 6L7 10L5 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ f }}</span>
        </li>
      </ul>
      <button class="cta">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 6px;">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" fill="currentColor"/>
        </svg>
        {{ ctaText }}
      </button>
    </div>
  </article>
 </template>
 <style scoped>
 .card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .2s; }
 .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
 .media { position: relative; height: 160px; overflow: hidden; }
 .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%); }
 .media-text { position: absolute; bottom: 12px; left: 16px; right: 16px; color: #fff; }
 .media-text h3 { margin: 0; font-size: 18px; font-weight: 700; }
 .media-text p { margin: 4px 0 0; opacity: 0.95; font-size: 13px; }
 .body { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
 .price { font-weight: 800; color: #EE3000; font-size: 24px; }
 .features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
 .features li { display: flex; align-items: flex-start; gap: 10px; color: #374151; font-size: 14px; line-height: 1.5; }
 .icon { flex-shrink: 0; margin-top: 2px; }
 .cta { width: 100%; padding: 12px 16px; background: #111827; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
 .cta:hover { background: #000; }
 </style>
--- a/src/components/packages/PackagesGrid.vue
+++ b/src/components/packages/PackagesGrid.vue
@ -0,0 +1,29 @@
 <script setup>
 import PackageCard from './PackageCard.vue'
 const props = defineProps({
  items: { type: Array, default: () => [] }
 })
 </script>
 <template>
  <div class="grid">
    <PackageCard
      v-for="(p, i) in items"
      :key="i"
      :title="p.title"
      :subtitle="p.subtitle"
      :price="p.price"
      :image="p.image"
      :features="p.features"
      :cta-text="p.ctaText"
    />
  </div>
 </template>
 <style scoped>
 .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
@media (min-width: 0px) { .grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
 </style>
--- a/src/components/packages/PackagesSection.vue
+++ b/src/components/packages/PackagesSection.vue
@ -0,0 +1,44 @@
 <script setup>
 import { TABS as tabs, DATA_BY_TAB as dataByTab } from './data.js'
 import { computed } from 'vue'
 import PackagesGrid from './PackagesGrid.vue'
 const props = defineProps({
  initialCategory: { type: String, default: null }
 })
 // If no category specified, show all packages
 const currentCategory = computed(() => props.initialCategory || null)
 const currentData = computed(() => {
  if (!currentCategory.value) {
    // Show all packages from all categories
    return Object.values(dataByTab).flat()
  }
  return dataByTab[currentCategory.value] || []
 })
 const headline = computed(() => {
  if (!currentCategory.value) {
    return 'Semua Paket Layanan'
  }
  const tab = tabs.find(t => t.key === currentCategory.value)
  return tab ? tab.label : 'Paket Layanan'
 })
 </script>
 <template>
  <section class="packages">
    <div class="container">
      <h2 class="headline">{{ headline }}</h2>
      <PackagesGrid :items="currentData" />
    </div>
  </section>
 </template>
 <style scoped>
 .packages { padding: 80px 0; background: #fff; margin-top: 60px; }
 .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
 .headline { font-size: 32px; font-weight: 800; text-align: center; margin: 0 0 40px; color: #111827; }
@media (min-width: 768px) { .headline { font-size: 40px; margin-bottom: 48px; } }
 </style>
--- a/src/components/packages/data.js
+++ b/src/components/packages/data.js
@ -0,0 +1,169 @@
 export const TABS = [
  { key: 'pendirian', label: 'Paket Pendirian' },
  { key: 'perubahan', label: 'Paket Perubahan & Pembubaran' },
  { key: 'property', label: 'Paket Property' },
  { key: 'khusus', label: 'Paket Khusus' },
  { key: 'umum', label: 'Paket Umum' }
 ]
 const commonFeatures = [
  'Akta Pendirian',
  'SK Pendirian AHU (Kemenkum)',
  'NIB',
  'Akun OSS',
  'K3L',
  'SPPL',
  'Pernyataan Mandiri',
  'Sertifikat Standar (untuk KBLI tertentu)',
  'NPWP',
  'Akun Coretax',
  'SKT Pajak',
  'Surat Penerbitan Akun Pajak',
  'Bukti Penerimaan Surat Pendaftaran Wajib Pajak',
  'Email Badan',
  'Stempel/Cap Badan',
  'Free Pengecekan Nama',
  'Free Konsultasi'
 ]
 const img = (q) => `https://images.unsplash.com/${q}&auto=format&fit=crop&w=1200&q=60`
 export const DATA_BY_TAB = {
  pendirian: [
    {
      title: 'Pendirian PT',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 3,850 K',
      image: img('photo-1520975916090-3105956dac38?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Paket Level Up',
      subtitle: 'Saatnya Naik Kelas & Siap Dapat Klien Besar',
      price: 'Rp 3,200 K',
      image: img('photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian Yayasan',
      subtitle: 'Yayasan Resmi, Siap Operasional Penuh',
      price: 'Rp 3,800 K',
      image: img('photo-1515165562835-c3b8b2c9288b?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian Firma',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 3,500 K',
      image: img('photo-1525182008055-f88b95ff7980?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian Perkumpulan',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 5,000 K',
      image: img('photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian Persekutuan Perdata',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 3,500 K',
      image: img('photo-1538688423619-a81d3f23454b?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian Koperasi',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 8,500 K',
      image: img('photo-1520974722070-6a669e3f0de7?ixlib=rb-4.0.3'),
      features: commonFeatures
    },
    {
      title: 'Pendirian PT Perseorangan',
      subtitle: 'Mulai Langkah Pertama Bisnis Resmi Anda',
      price: 'Rp 1,200 K',
      image: img('photo-1519340241574-2cec6aef0c01?ixlib=rb-4.0.3'),
      features: [
        'Sertifikat Pendaftaran Pendirian Perseorangan (Kemenkum)',
        'Pernyataan Pendirian Kemenkum',
        'NIB', 'Akun OSS', 'K3L', 'SPPL', 'Pernyataan Mandiri',
        'Sertifikat Standar (untuk KBLI tertentu)', 'NPWP', 'Akun Coretax', 'SKT Pajak',
        'Surat Penerbitan Akun Pajak', 'Bukti Penerimaan Surat Pendaftaran Wajib Pajak',
        'Email Badan', 'Stempel/Cap Badan', 'Free Pengecekan Nama', 'Free Konsultasi'
      ]
    }
  ],
  perubahan: [
    {
      title: 'Perubahan Data PT',
      subtitle: 'Ubah nama, alamat, modal, pengurus',
      price: 'Konsultasi Dulu',
      image: img('photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3'),
      features: [
        'Analisis kebutuhan perubahan',
        'Penyusunan akta perubahan',
        'Pengesahan AHU (jika perlu)',
        'Update OSS dan perpajakan',
        'Dokumentasi lengkap',
        'Free Konsultasi'
      ]
    },
    {
      title: 'Pembubaran Badan Usaha',
      subtitle: 'Aman sesuai regulasi',
      price: 'Konsultasi Dulu',
      image: img('photo-1521791136064-7986c2920216?ixlib=rb-4.0.3'),
      features: [
        'Konsultasi dan strategi pembubaran',
        'Penyusunan akta pembubaran',
        'Pencabutan perizinan terkait',
        'Penutupan perpajakan (jika perlu)',
        'Dokumentasi lengkap',
        'Free Konsultasi'
      ]
    }
  ],
  property: [
    {
      title: 'Legalitas Property Dasar',
      subtitle: 'Cek sertifikat dan dokumen',
      price: 'Konsultasi Dulu',
      image: img('photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3'),
      features: [
        'Review dokumen kepemilikan',
        'Cek keabsahan sertifikat',
        'Rekomendasi langkah lanjutan',
        'Free Konsultasi'
      ]
    }
  ],
  khusus: [
    {
      title: 'Paket Khusus Tender',
      subtitle: 'Lengkap untuk kebutuhan pengadaan',
      price: 'Customize',
      image: img('photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3'),
      features: [
        'Dokumen administrasi lengkap',
        'Perizinan spesifik KBLI',
        'Pendampingan kelengkapan dokumen',
        'Free Konsultasi'
      ]
    }
  ],
  umum: [
    {
      title: 'Virtual Office + Legal',
      subtitle: 'Hemat dan fleksibel',
      price: 'Start from Rp 1 Jt',
      image: img('photo-1487014679447-9f8336841d58?ixlib=rb-4.0.3'),
      features: [
        'Alamat legal bisnis',
        'Forwarding surat',
        'Konsultasi legal dasar',
        'Free Konsultasi'
      ]
    }
  ]
 }
--- a/src/components/ui/Tabs.vue
+++ b/src/components/ui/Tabs.vue
@ -0,0 +1,72 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 const props = defineProps({
  tabs: { type: Array, required: true },
  modelValue: { type: String, default: '' },
  ariaLabel: { type: String, default: 'Sections' }
 })
 const emit = defineEmits(['update:modelValue', 'change'])
 const internal = ref(props.modelValue || (props.tabs[0] && props.tabs[0].key) || '')
 watch(() => props.modelValue, (v) => {
  if (v && v !== internal.value) internal.value = v
 })
 watch(internal, (v) => {
  emit('update:modelValue', v)
  emit('change', v)
 })
 const activeIndex = computed(() => props.tabs.findIndex(t => t.key === internal.value))
 function selectByIndex(idx) {
  if (idx < 0 || idx >= props.tabs.length) return
  internal.value = props.tabs[idx].key
 }
 function onKeydown(e) {
  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return
  e.preventDefault()
  if (e.key === 'ArrowLeft') selectByIndex((activeIndex.value - 1 + props.tabs.length) % props.tabs.length)
  if (e.key === 'ArrowRight') selectByIndex((activeIndex.value + 1) % props.tabs.length)
  if (e.key === 'Home') selectByIndex(0)
  if (e.key === 'End') selectByIndex(props.tabs.length - 1)
 }
 </script>
 <template>
  <div class="tabs">
    <div class="tablist" role="tablist" :aria-label="ariaLabel" @keydown="onKeydown">
      <button
        v-for="(t, i) in tabs"
        :key="t.key"
        class="tab"
        :class="{ active: t.key === internal }"
        role="tab"
        :id="`tab-${t.key}`"
        :aria-selected="t.key === internal"
        :tabindex="t.key === internal ? 0 : -1"
        @click="internal = t.key"
      >
        {{ t.label }}
      </button>
    </div>
    <div class="tabpanel">
      <slot :active="internal"></slot>
    </div>
  </div>
 </template>
 <style scoped>
 .tabs { width: 100%; }
 .tablist { display: flex; justify-content: center; gap: 32px; border-bottom: 1px solid #e5e7eb; overflow-x: auto; }
 .tab { appearance: none; background: transparent; border: none; padding: 14px 4px; cursor: pointer; color: #6b7280; font-weight: 600; font-size: 14px; letter-spacing: .25px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .18s, border-color .18s; }
 .tab.active { color: #111827; border-bottom-color: #FF6640; }
 .tab:hover { color: #111827; }
 .tabpanel { padding-top: 24px; }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,7 @@
 import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 createApp(App).use(router).mount('#app')
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -0,0 +1,25 @@
 <script setup>
 import Hero from "@/components/main/Hero.vue";
 import ServicesMenu from "@/components/main/ServicesMenu.vue";
 import ServicesSection from "@/components/main/ServiceSection.vue";
 import WhyChoose from "@/components/main/WhyChoose.vue";
 import CallToAction from "@/components/main/CallToAction.vue";
 import ReasonsSection from "@/components/main/ReasonsSection.vue";
 import Testimonial from "@/components/main/Testimonial.vue";
 </script>
 <template>
  <main>
    <Hero />
    <ServicesMenu id="solusi" />
    <!-- FIX: use section, not single card -->
    <ServicesSection />
    <WhyChoose />
    <CallToAction id="konsultasi" />
    <ReasonsSection />
    <Testimonial />
  </main>
 </template>
 <style scoped>
 </style>
--- a/src/pages/Packages.vue
+++ b/src/pages/Packages.vue
@ -0,0 +1,17 @@
 <script setup>
 import PackagesSection from "../components/packages/PackagesSection.vue";
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 const route = useRoute();
 const category = computed(() => route.meta.category || null);
 </script>
 <template>
  <main>
    <PackagesSection id="paket" :initialCategory="category" />
  </main>
 </template>
 <style scoped>
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,65 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '@/pages/Home.vue'
 import Packages from '@/pages/Packages.vue'
 const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/packages',
    name: 'Packages',
    component: Packages
  },
  {
    path: '/packages/pendirian',
    name: 'PackagesPendirian',
    component: Packages,
    meta: { category: 'pendirian' }
  },
  {
    path: '/packages/perubahan',
    name: 'PackagesPerubahan',
    component: Packages,
    meta: { category: 'perubahan' }
  },
  {
    path: '/packages/property',
    name: 'PackagesProperty',
    component: Packages,
    meta: { category: 'property' }
  },
  {
    path: '/packages/khusus',
    name: 'PackagesKhusus',
    component: Packages,
    meta: { category: 'khusus' }
  },
  {
    path: '/packages/umum',
    name: 'PackagesUmum',
    component: Packages,
    meta: { category: 'umum' }
  }
 ]
 const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    } else if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
 })
 export default router
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,18 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
 })
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`