{"id":5243,"date":"2026-03-14T10:53:44","date_gmt":"2026-03-14T09:53:44","guid":{"rendered":"https:\/\/www.solutat.fr\/?page_id=5243"},"modified":"2026-03-16T08:23:27","modified_gmt":"2026-03-16T07:23:27","slug":"tattoo-tracker","status":"publish","type":"page","link":"https:\/\/www.solutat.fr\/en\/tracker-tatouage\/","title":{"rendered":"Tracker Tattoo"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  .tt-wrap {\n    font-family: 'Inter', sans-serif;\n    color: #1a1a1a;\n    background: #fff;\n    line-height: 1.6;\n  }\n\n  \/* HERO \u2014 fond blanc, accent sombre *\/\n  .tt-hero {\n    background: #fff;\n    padding: 90px 24px 100px;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .tt-hero::before {\n    content: '';\n    position: absolute;\n    top: -100px; left: 50%;\n    transform: translateX(-50%);\n    width: 700px; height: 700px;\n    background: radial-gradient(circle, rgba(212,152,10,0.08) 0%, transparent 65%);\n    pointer-events: none;\n  }\n  .tt-badge {\n    display: inline-block;\n    background: rgba(26,26,26,0.06);\n    border: 1px solid rgba(26,26,26,0.15);\n    color: #1a1a1a;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 2.5px;\n    text-transform: uppercase;\n    padding: 6px 18px;\n    border-radius: 100px;\n    margin-bottom: 32px;\n  }\n  .tt-hero h1 {\n    font-size: clamp(30px, 5vw, 56px);\n    font-weight: 900;\n    color: #1a1a1a;\n    line-height: 1.1;\n    margin-bottom: 22px;\n  }\n  .tt-hero h1 span { color: #D4980A; }\n  .tt-hero p {\n    font-size: clamp(15px, 2vw, 18px);\n    color: #666;\n    max-width: 600px;\n    margin: 0 auto 44px;\n    font-weight: 400;\n  }\n  .tt-cta {\n    display: inline-block;\n    background: #1a1a1a;\n    color: #fff;\n    font-weight: 800;\n    font-size: 15px;\n    padding: 15px 36px;\n    border-radius: 8px;\n    text-decoration: none;\n    transition: background 0.2s, transform 0.2s;\n  }\n  .tt-cta:hover { background: #333; transform: translateY(-2px); }\n\n  \/* PILLARS BAR \u2014 fond sombre (inverse du gold de Pro Solutat) *\/\n  .tt-pillars {\n    background: #1a1a1a;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  .tt-pillar {\n    flex: 1 1 160px;\n    padding: 26px 20px;\n    text-align: center;\n    border-right: 1px solid rgba(255,255,255,0.08);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n  }\n  .tt-pillar:last-child { border-right: none; }\n  .tt-pillar svg { width: 20px; height: 20px; stroke: #D4980A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n  .tt-pillar span {\n    font-size: 12px;\n    color: rgba(255,255,255,0.75);\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n  }\n\n  \/* INTRO *\/\n  .tt-intro {\n    max-width: 720px;\n    margin: 0 auto;\n    padding: 80px 24px 60px;\n    text-align: center;\n  }\n  .tt-label {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 2.5px;\n    text-transform: uppercase;\n    color: #D4980A;\n    margin-bottom: 14px;\n  }\n  .tt-intro h2 {\n    font-size: clamp(22px, 3vw, 34px);\n    font-weight: 800;\n    color: #1a1a1a;\n    margin-bottom: 18px;\n    line-height: 1.2;\n  }\n  .tt-intro p {\n    font-size: 16px;\n    color: #555;\n  }\n\n  \/* FEATURES \u2014 fond sombre (inverse du fond clair de Pro Solutat) *\/\n  .tt-features {\n    background: #111;\n    padding: 70px 24px 80px;\n  }\n  .tt-features-inner { max-width: 1100px; margin: 0 auto; }\n  .tt-section-title {\n    text-align: center;\n    font-size: clamp(20px, 3vw, 30px);\n    font-weight: 800;\n    color: #fff;\n    margin-bottom: 50px;\n  }\n  .tt-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 22px;\n  }\n  .tt-card {\n    background: #1e1e1e;\n    border-radius: 16px;\n    padding: 36px 28px;\n    border: 1px solid #2a2a2a;\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .tt-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 16px 48px rgba(0,0,0,0.4);\n  }\n  .tt-card-icon {\n    width: 48px; height: 48px;\n    background: rgba(212,152,10,0.1);\n    border-radius: 12px;\n    display: flex; align-items: center; justify-content: center;\n    margin-bottom: 20px;\n  }\n  .tt-card-icon svg { width: 22px; height: 22px; stroke: #D4980A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n  .tt-card h3 {\n    font-size: 16px;\n    font-weight: 800;\n    color: #fff;\n    margin-bottom: 10px;\n  }\n  .tt-card p {\n    font-size: 14px;\n    color: #888;\n    line-height: 1.75;\n  }\n  .tt-card ul {\n    margin-top: 12px;\n    padding-left: 0;\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .tt-card ul li {\n    font-size: 13px;\n    color: #777;\n    padding-left: 16px;\n    position: relative;\n  }\n  .tt-card ul li::before {\n    content: '';\n    position: absolute;\n    left: 0; top: 8px;\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: #D4980A;\n  }\n\n  \/* FREE BANNER \u2014 fond gold (inverse du fond sombre de Pro Solutat) *\/\n  .tt-free {\n    max-width: 720px;\n    margin: 0 auto;\n    padding: 80px 24px;\n    text-align: center;\n  }\n  .tt-free-box {\n    background: #D4980A;\n    border-radius: 20px;\n    padding: 52px 40px;\n  }\n  .tt-free-box h2 {\n    font-size: clamp(22px, 3vw, 32px);\n    font-weight: 900;\n    color: #fff;\n    margin-bottom: 14px;\n    line-height: 1.2;\n  }\n  .tt-free-box h2 span { color: #1a1a1a; }\n  .tt-free-box p {\n    font-size: 15px;\n    color: rgba(255,255,255,0.8);\n    margin-bottom: 10px;\n    max-width: 480px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .tt-free-box .tt-coming {\n    font-size: 12px;\n    color: rgba(26,26,26,0.55);\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-bottom: 32px;\n  }\n  .tt-free-cta {\n    display: inline-block;\n    background: #1a1a1a;\n    color: #fff;\n    font-weight: 800;\n    font-size: 15px;\n    padding: 15px 36px;\n    border-radius: 8px;\n    text-decoration: none;\n    transition: background 0.2s, transform 0.2s;\n  }\n  .tt-free-cta:hover { background: #333; transform: translateY(-2px); }\n\n  \/* CTA BOTTOM \u2014 fond blanc (inverse du fond sombre de Pro Solutat) *\/\n  .tt-cta-block {\n    background: #f7f6f3;\n    padding: 80px 24px;\n    text-align: center;\n    border-top: 1px solid #ececec;\n  }\n  .tt-cta-block h2 {\n    font-size: clamp(22px, 3vw, 36px);\n    font-weight: 900;\n    color: #1a1a1a;\n    margin-bottom: 16px;\n    line-height: 1.2;\n  }\n  .tt-cta-block h2 span { color: #D4980A; }\n  .tt-cta-block p {\n    color: #666;\n    font-size: 15px;\n    margin-bottom: 36px;\n    max-width: 480px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n<\/style>\n<\/head>\n<body>\n<div class=\"tt-wrap\">\n\n  <!-- HERO -->\n  <section class=\"tt-hero\">\n    <div class=\"tt-badge\">Web application \u2014 Browser access<\/div>\n    <h1>Every tattoo deserves<br><span>to be immortalized<\/span><\/h1>\n    <p>Tattoo Tracker is the tool designed for enthusiasts. Track the evolution of your collection, preserve the story of each piece, and nurture your future projects.<\/p>\n    <a href=\"https:\/\/tracker.solutat.fr\" class=\"tt-cta\" target=\"_blank\" rel=\"noopener\">Go to the app \u2192<\/a>\n  <\/section>\n\n  <!-- PILLARS -->\n  <div class=\"tt-pillars\">\n    <div class=\"tt-pillar\">\n      <svg viewbox=\"0 0 24 24\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>\n      <span>Collection<\/span>\n    <\/div>\n    <div class=\"tt-pillar\">\n      <svg viewbox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n      <span>Body coverage<\/span>\n    <\/div>\n    <div class=\"tt-pillar\">\n      <svg viewbox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n      <span>Personal gallery<\/span>\n    <\/div>\n    <div class=\"tt-pillar\">\n      <svg viewbox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><\/svg>\n      <span>Moodboard<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- INTRO -->\n  <section class=\"tt-intro\">\n    <p class=\"tt-label\">Why Tattoo Tracker<\/p>\n    <h2>Your entire collection<br>at the same place<\/h2>\n    <p>You have tattoos in places you don't always see, artists you want to keep track of, projects that are piling up... Tattoo Tracker centralizes all of this in a space that reflects who you are.<\/p>\n  <\/section>\n\n  <!-- FEATURES -->\n  <section class=\"tt-features\">\n    <div class=\"tt-features-inner\">\n      <p class=\"tt-label\" style=\"text-align:center\">Features<\/p>\n      <h2 class=\"tt-section-title\">Everything you can track<\/h2>\n      <div class=\"tt-grid\">\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\n          <\/div>\n          <h3>Body coverage<\/h3>\n          <p>Visualize the percentage of your tattooed body with precision by ink type.<\/p>\n          <ul>\n            <li>Overall coverage percentage<\/li>\n            <li>Black &amp; white \/ color distinction<\/li>\n            <li>Evolution over time<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>\n          <\/div>\n          <h3>Registration of each tattoo<\/h3>\n          <p>Photograph and archive each part with all associated information.<\/p>\n          <ul>\n            <li>Photo of the tattoo<\/li>\n            <li>Completion date<\/li>\n            <li>Artist or studio name<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n          <\/div>\n          <h3>Personal gallery<\/h3>\n          <p>Access all of your completed works in a private, organized, and always available gallery\u2014even for tattoos in areas you cannot see directly.<\/p>\n        <\/div>\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg>\n          <\/div>\n          <h3>Total budget spent<\/h3>\n          <p>Record the cost of each session and see at a glance the total amount invested in your collection.<\/p>\n        <\/div>\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\"\/><line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\"\/><\/svg>\n          <\/div>\n          <h3>Project mood board<\/h3>\n          <p>Centralize your inspirations, visual references, and ideas for future tattoos in a dedicated space. Never lose an idea again.<\/p>\n        <\/div>\n\n        <div class=\"tt-card\">\n          <div class=\"tt-card-icon\">\n            <svg viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\n          <\/div>\n          <h3>Browser access, everywhere<\/h3>\n          <p>Tracker Tatouage is accessible from any browser, on both computer and mobile. No installation required.<\/p>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FREE BANNER -->\n  <section class=\"tt-free\">\n    <div class=\"tt-free-box\">\n      <h2>Currently <span>100% Free<\/span><\/h2>\n      <p>Tracker Tatouage is available for free to all tattoo enthusiasts registered on Solutat.<\/p>\n      <p class=\"tt-coming\">Advanced features will be gradually offered to users wishing to go further.<\/p>\n      <a href=\"https:\/\/tracker.solutat.fr\" class=\"tt-free-cta\" target=\"_blank\" rel=\"noopener\">Go to the app \u2192<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- CTA BOTTOM -->\n  <section class=\"tt-cta-block\">\n    <h2>Start tracing<br><span>the story of your skin<\/span><\/h2>\n    <p>Tatouage Tracker is designed for anyone who lives their passion for tattooing with intensity.<\/p>\n    <a href=\"https:\/\/tracker.solutat.fr\" class=\"tt-cta\" target=\"_blank\" rel=\"noopener\">Access Tattoo Tracker \u2192<\/a>\n  <\/section>\n\n<\/div>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Application web \u2014 Acc\u00e8s navigateur Chaque tatouage m\u00e9rited&rsquo;\u00eatre immortalis\u00e9 Tracker Tatouage est l&rsquo;outil con\u00e7u pour les passionn\u00e9s. Suivez l&rsquo;\u00e9volution de votre collection, conservez l&rsquo;histoire de chaque pi\u00e8ce et nourrissez vos projets futurs. Acc\u00e9der \u00e0 l&rsquo;application \u2192 Collection Couverture corporelle Galerie personnelle Moodboard Pourquoi Tracker Tatouage Toute votre collectionau m\u00eame endroit Vous avez des tatouages dans&hellip;<\/p>","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5243","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/pages\/5243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/comments?post=5243"}],"version-history":[{"count":6,"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/pages\/5243\/revisions"}],"predecessor-version":[{"id":5282,"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/pages\/5243\/revisions\/5282"}],"wp:attachment":[{"href":"https:\/\/www.solutat.fr\/en\/wp-json\/wp\/v2\/media?parent=5243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}