# React → Vue port conventions (gigafibre website)

We are porting the React site at `../website` (React 18 + Vite + Tailwind 3 + shadcn/ui + Radix)
to this Vue 3 app (`../website-vue`, Vue 3 `<script setup>` + Vite + Tailwind 3 + shadcn-vue + reka-ui).
**Goal: pixel-identical output.** The Tailwind config, CSS tokens, fonts and custom utilities are already
copied verbatim, so **keep the exact same Tailwind class strings** on every element.

## The golden rule
Copy the JSX markup and its `className` strings **unchanged** into the Vue `<template>` (rename `className`→`class`).
The visual result comes from those classes; do not "improve" or restructure them.

## Mechanical mappings
| React | Vue |
|---|---|
| `className="..."` | `class="..."` |
| `className={cn(a, b)}` | `:class="cn(a, b)"` (import `cn` from `@/lib/utils`) |
| `{expr}` in JSX text | `{{ expr }}` |
| `{items.map(x => <Card .../>)}` | `<Card v-for="x in items" :key="x.id" ... />` |
| `{cond && <X/>}` | `<X v-if="cond" />` |
| `{cond ? <A/> : <B/>}` | `<A v-if="cond" /> <B v-else />` |
| `onClick={fn}` | `@click="fn"` |
| `onChange={e => setX(e.target.value)}` | `v-model="x"` on inputs |
| `useState(v)` | `const x = ref(v)` (`.value` in script, bare in template) |
| `useEffect(fn, [])` | `onMounted(fn)` |
| `useEffect(fn, [dep])` | `watch(() => dep, fn)` |
| `<Link to="/x">` (react-router) | `<RouterLink to="/x">` |
| `useNavigate()` → `navigate("/x")` | `const router = useRouter(); router.push("/x")` |
| `useLocation()` | `const route = useRoute()` |
| lucide-react `import { Wifi } from "lucide-react"` | `import { Wifi } from "lucide-vue-next"` (same icon names) |
| `<Icon className="h-5 w-5" />` | `<Icon class="h-5 w-5" />` |
| framer-motion `<motion.div initial=... animate=... />` | `<div v-motion :initial="..." :enter="...">` (from `@vueuse/motion`); `whileInView` → `:visible-once="..."` |
| `AnimatePresence` | usually a `<Transition>` or just `v-if` — keep it simple, match the visual |
| Toasts: `useToast()` / `toast(...)` (shadcn) | `import { useToast } from "@/components/ui/toast/use-toast"` (same API) |
| `sonner` `toast()` | `import { toast } from "vue-sonner"` |
| react-hook-form + zod | `vee-validate` + `zod` via `@/components/ui/form`, OR for simple cases just `ref`s + manual zod `.safeParse` |

## shadcn-vue components
Import from the folder index, e.g. `import { Button } from "@/components/ui/button"`,
`import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"`.
Component/prop names and the `variant`/`size` props match shadcn/ui. Slots replace React children.
`asChild` exists in reka-ui too. Available under `src/components/ui/`: accordion, alert, alert-dialog,
aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, command,
context-menu, dialog, drawer, dropdown-menu, form, hover-card, input, label, menubar, navigation-menu,
pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, skeleton,
slider, sonner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip.

## Structure of a ported page
```vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { RouterLink } from "vue-router";
import { Button } from "@/components/ui/button";
import { Wifi } from "lucide-vue-next";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
// ...page-local data/state
</script>

<template>
  <div class="min-h-screen bg-background">
    <Header />
    <!-- exact JSX markup, className→class -->
    <Footer />
  </div>
</template>
```

## Do / Don't
- DO keep every Tailwind class string identical to the React source.
- DO keep the same DOM structure, headings, copy (French text) and image URLs.
- DO reuse `Header`, `Footer`, `BusinessPageLayout`, `GlassCard`, `Logo` from `@/components/...`.
- DON'T add new colors, spacing, or restyle. DON'T invent content.
- DON'T pull in new deps; everything needed is installed.
- If a React file uses `input-otp` (not in the shadcn-vue registry), use a plain grouped `Input` set or note it.
- If something can't be perfectly matched, leave a `<!-- TODO(port): ... -->` and keep the closest visual.

## Assets
Static files live in `public/` and resolve under `/next/...` (Vite `base: '/next/'`). Copy any images the
React app references from `../website/public` into `./public` (same relative paths).