Skylake Computers — frontend

Moderní frontend pro Laravel + Inertia (Vue 3) s GSAP scroll animacemi. Koncept „Silicon Telemetry": web působí jako telemetrický HUD dobře postaveného stroje (teploty, takty, PCB stopy, stress-test).

Stack

• Vue 3 + TypeScript
• Inertia.js (@inertiajs/vue3)
• Tailwind CSS v4 (CSS-first tokeny v resources/css/app.css)
• GSAP + ScrollTrigger, Lenis (smooth scroll)

Standalone preview (bez PHP)

npm install
npm run dev      # http://localhost:5173 — celý web s routingem přes vue-router
npm run build    # typecheck (vue-tsc) + produkční build

Preview používá resources/js/preview.ts + router.ts. Slouží jen k náhledu — do Laravelu se nekopíruje.

Napojení na Laravel

1. Zkopíruj do své Laravel appky:

   • resources/js/** (kromě preview.ts, router.ts, PreviewApp.vue)
   • resources/css/app.css

2. Ostrý vstupní bod je resources/js/app.ts (createInertiaApp).

3. Nainstaluj balíčky a laravel-vite-plugin, uprav vite.config.ts:

   import laravel from 'laravel-vite-plugin'
   import vue from '@vitejs/plugin-vue'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [
       laravel({ input: 'resources/js/app.ts', refresh: true }),
       vue(),
       tailwindcss(),
     ],
   })

4. Do Blade šablony přidej fonty (Space Grotesk / Inter / JetBrains Mono — viz <link> v index.html) a @vite(['resources/js/app.ts']) + @inertiaHead.

5. Kontroler vrací Inertia::render('Home') → mapuje na Pages/Home.vue. Persistentní layout (SiteLayout) se přiřazuje automaticky v app.ts.

Kde je jaký obsah

• resources/js/data/site.ts — veškerý textový obsah, sestavy, služby, kontakt. Uprav tady, nebo přepiš přes Inertia props z kontrolerů.
• resources/css/app.css — @theme blok = celá paleta a typografie.

Navigace pro obě prostředí

Stránky/komponenty nikdy neimportují Inertii ani vue-router napřímo — používají <AppLink> + useNav() (viz lib/nav.ts). Runtime (Inertia vs. preview) dodá správný <Link> a aktuální cestu přes provide.

Přístupnost & výkon

• Respektuje prefers-reduced-motion (animace i smooth-scroll se vypnou).
• Viditelný focus, skip-link, sémantické main/nav/footer.
• Reveal prvky jsou bez JS viditelné (progresivní vylepšení).