Template Next.js, version 1.0.0, publiée le

Tracé, site vitrine pour un studio de tatouage

49 €

Un site vitrine pour studio de tatouage, en Next.js, React et Tailwind CSS 4 : flashs dessinés en SVG avec bascule Flash et Sur peau, artistes, processus, soin après tatouage et formulaire de réservation. Deux scènes 3D optionnelles (une seringue d'encre, un nuage d'encre) avec la bibliothèque three : elles ne démarrent ni sur téléphone, ni avec un mouvement réduit, ni sur un appareil faible, et une image fixe les remplace. Une goutte d'encre part de la seringue et descend avec le défilement jusqu'au bouton de réservation. Le formulaire de réservation n'envoie rien : vous branchez votre propre envoi. La démo en ligne tourne sur le même code.

  • Accueil complet : hero, studio, galerie de flashs, artistes, processus en quatre temps, soin après tatouage, réservation
  • Galerie horizontale à défilement par paliers, inclinaison selon la vitesse, tache d'encre au survol, bascule Flash et Sur peau
  • Flashs, seringue et motifs dessinés en SVG ou générés par le code, à remplacer par vos dessins
  • Animations CSS : titre révélé mot à mot, traits qui se dessinent au défilement, curseur-aiguille et boutons magnétiques à la souris seulement
  • Deux scènes 3D (seringue procédurale, nuage d'encre) chargées après le premier rendu, coupées en mouvement réduit, sans WebGL et sur appareil faible
  • Goutte d'encre pilotée par le défilement : elle trace un trait de section en section, s'étale sur un flash puis sur le bouton de réservation
  • Formulaire de réservation de démonstration, accessible au clavier, avec erreurs liées aux champs
  • Next.js 16, React 19, Tailwind CSS 4, TypeScript strict, three en version fixée
  • README d'installation et de personnalisation, licence pour un projet

Le paiement n'est pas encore ouvert. Laissez votre email pour être prévenu.

Essayer la démo avant d'acheter
Studio de tatouage, flashs en traitDémo en ligne : galerie, scènes 3D et formulaire de démonstration

Sous le capot

Framework
Next.js 16, React 19
Langage
TypeScript strict
Style
Tailwind CSS 4, thème en variables dans trace.css
Police
Schibsted Grotesk, via next/font
3D
three 0.187.0, chargé uniquement par la page, sans autre bibliothèque 3D
Node.js
20.19 ou plus récent
Hébergement
Export statique : Netlify, IONOS, OVH ou FTP ; Vercel sans réglage

Ce que contient l'archive

README.md
installation et personnalisation
LICENSE.md
licence pour un projet
src/app/(shop)/page.tsx
accueil : toutes les sections
src/app/(shop)/_components/
flashs SVG, galerie, formulaire, scène 3D, motifs
src/app/(shop)/_lib/
contenu (flashs, artistes, étapes, soins) et réglages
src/app/(shop)/scenes/
seringue et nuage d'encre (three)
src/app/(shop)/trace.css
Tailwind, thème et animations

Qui l'a écrit

Alexandre Keolasy, développeur front-end indépendant derrière Keodev. Le template est écrit avec la même exigence que les sites livrés aux clients du studio, et c'est moi qui réponds au support.

En savoir plus sur Keodev

Questions avant d'acheter

La réservation en ligne est-elle incluse ?

Non. Le formulaire valide les champs mais n'envoie rien. Vous branchez l'envoi de votre choix (email, agenda en ligne) à l'endroit indiqué dans le README.

La 3D est-elle obligatoire ?

Non. Chaque scène a une image fixe (AVIF pour la seringue, SVG pour le nuage) qui reste affichée si la 3D ne démarre pas, et le README explique comment la retirer avec la dépendance three.

Puis-je mettre mes propres dessins à la place des flashs ?

Oui. Les flashs sont des tracés SVG décrits dans un seul fichier de données ; remplacez-les par vos dessins en SVG ou par des images avec next/image.

Les mentions légales sont-elles fournies ?

Non. Le pied de page indique où ajouter l'adresse, les horaires et les mentions légales de votre studio. Les conseils de soin sont généraux : faites-les valider par vos artistes.

Puis-je l'utiliser pour un client ?

Oui, pour un projet final par achat : votre site, ou celui d'un client pour qui vous travaillez. Un deuxième projet demande un deuxième achat.

Et si quelque chose ne fonctionne pas ?

Pendant 30 jours, tout bug reproductible dans le code fourni est corrigé gratuitement : écrivez à contact@keodev.eu avec votre référence de commande.

Après le paiement

Le code tout de suite

Polar vous envoie la facture et l'accès : archive ZIP à télécharger et invitation au dépôt GitHub privé, qui reçoit les mises à jour.

Une licence par projet

Usage commercial perpétuel pour un projet final : votre boutique, ou celle d'un client. Détails dans les conditions générales de vente.

30 jours de support

Un bug reproductible dans le code fourni ? Écrivez à contact@keodev.eu.