Website — Project Structure

semalink-website/
├── public/                     # Static assets served as-is
│   ├── favicon.svg             # SVG favicon
│   ├── favicon-32.png          # 32×32 PNG favicon
│   ├── apple-touch-icon.png    # 180×180 iOS home screen icon
│   ├── icon-192.png            # PWA icon (192×192)
│   ├── icon-512.png            # PWA icon (512×512)
│   ├── og-image.png            # Open Graph / social share image
│   ├── site.webmanifest        # PWA manifest
│   ├── robots.txt              # Search engine crawler rules
│   └── sitemap.xml             # XML sitemap for SEO
│
├── src/
│   ├── main.js                 # App entry point — vite-ssg setup
│   ├── App.vue                 # Root component (RouterView + AppHeader/Footer)
│   ├── seo.js                  # Per-page SEO metadata (title, description, canonical)
│   │
│   ├── router/
│   │   └── index.js            # Route definitions
│   │
│   ├── views/                  # Page-level components (one per route)
│   │   ├── HomeView.vue
│   │   ├── PricingView.vue
│   │   ├── DocsView.vue        # Public API docs page (/api)
│   │   ├── AboutView.vue
│   │   ├── NotFoundView.vue    # 404 page
│   │   └── legal/
│   │       ├── PrivacyView.vue
│   │       ├── TermsView.vue
│   │       ├── AcceptableUseView.vue
│   │       └── GdprView.vue
│   │
│   ├── components/
│   │   ├── home/               # Sections used only on the home page
│   │   │   ├── HeroSection.vue
│   │   │   ├── ProblemSection.vue
│   │   │   ├── SolutionSection.vue
│   │   │   ├── StatsSection.vue
│   │   │   ├── DeveloperSection.vue
│   │   │   └── CtaSection.vue
│   │   ├── layout/             # Site-wide layout components
│   │   │   ├── AppHeader.vue
│   │   │   └── AppFooter.vue
│   │   └── shared/             # Reusable UI primitives
│   │       └── BaseButton.vue
│   │
│   └── assets/
│       └── styles/
│           ├── variables.css   # CSS custom properties (colours, spacing, typography)
│           ├── global.css      # Global reset and base styles
│           └── legal.css       # Shared styles for legal pages
│
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Actions — build and deploy on push to prod
│
├── index.html                  # HTML entry point (favicon tags, meta viewport)
├── vite.config.js              # Vite config — Vue plugin, @ alias
└── package.json

Key Conventions

• Views are page-level components mapped 1:1 to a route. They import and compose section/layout components — no business logic lives in views.
• Home section components (src/components/home/) are used only on the home page. Each section is self-contained with its own styles scoped inside the component.
• Shared components (src/components/shared/) are reusable across any page — currently just BaseButton.
• CSS variables are defined in variables.css and used throughout. Colours, font sizes, and spacing should always reference a variable, never a hardcoded value.
• SEO is centralised in seo.js — see SEO & Meta Tags for details.