{"id":5935,"date":"2025-08-01T13:23:45","date_gmt":"2025-08-01T12:23:45","guid":{"rendered":"https:\/\/thamarusa.com\/?page_id=5935"},"modified":"2025-08-02T02:12:50","modified_gmt":"2025-08-02T01:12:50","slug":"website-creation","status":"publish","type":"page","link":"https:\/\/thamarusa.com\/fr\/website-creation\/","title":{"rendered":"Cr\u00e9ation de sites web"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5935\" class=\"elementor elementor-5935\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-8ede675 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"8ede675\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1d2505 elementor-widget elementor-widget-html\" data-id=\"f1d2505\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"ma-professional-container\">\r\n    <!-- Main Header -->\r\n    <div class=\"ma-header animate-slide-down\">\r\n        <h1 class=\"animate-pop-in\">Cr\u00e9ation de sites web<\/h1>\r\n        <p class=\"ma-subtitle animate-pop-in\" style=\"animation-delay: 0.3s\">Nous concevons et d\u00e9veloppons des sites web modernes et performants, optimis\u00e9s pour l'exp\u00e9rience des utilisateurs, qu'il s'agisse d'un site divergent ou d'une plateforme de commerce \u00e9lectronique complexe.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Service Support Section -->\r\n    <div class=\"ma-section\">\r\n        <h2 class=\"ma-section-title animate-slide-left\">Soutien aux services<\/h2>\r\n        <div class=\"ma-feature-boxes\">\r\n            <!-- Needs Analysis -->\r\n            <div class=\"ma-feature-box animate-fade-in\" style=\"animation-delay: 0.2s\">\r\n                <div class=\"ma-icon-container\">\r\n                    <i class=\"fas fa-search\"><\/i>\r\n                <\/div>\r\n                <h3>Analyse des besoins<\/h3>\r\n                <p>\u00c9tudiez votre secteur, vos objectifs et votre public pour concevoir un site parfait.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Design and Development -->\r\n            <div class=\"ma-feature-box animate-fade-in\" style=\"animation-delay: 0.4s\">\r\n                <div class=\"ma-icon-container\">\r\n                    <i class=\"fas fa-code\"><\/i>\r\n                <\/div>\r\n                <h3>Conception et d\u00e9veloppement<\/h3>\r\n                <p>Cr\u00e9ation d'un design moderne et optimisation du d\u00e9veloppement technique.<\/p>\r\n            <\/div>\r\n            \r\n            <!-- Training -->\r\n            <div class=\"ma-feature-box animate-fade-in\" style=\"animation-delay: 0.6s\">\r\n                <div class=\"ma-icon-container\">\r\n                    <i class=\"fas fa-graduation-cap\"><\/i>\r\n                <\/div>\r\n                <h3>Formation<\/h3>\r\n                <p>Gestion du site et soutien post-lancement pour votre r\u00e9ussite.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Service Details Section -->\r\n    <div class=\"ma-section\">\r\n        <h2 class=\"ma-section-title animate-slide-right\">D\u00e9tails du service<\/h2>\r\n        <div class=\"ma-service-grid\">\r\n            <!-- WordPress\/HTML\/CSS\/JS\/PHP -->\r\n            <div class=\"ma-service-item animate-fade-in\" style=\"animation-delay: 0.2s\">\r\n                <div class=\"ma-service-icon\">\r\n                    <i class=\"fab fa-wordpress\"><\/i>\r\n                <\/div>\r\n                <h3>WordPress\/HTML\/CSS\/JS\/PHP<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- E-commerce -->\r\n            <div class=\"ma-service-item animate-fade-in\" style=\"animation-delay: 0.3s\">\r\n                <div class=\"ma-service-icon\">\r\n                    <i class=\"fas fa-shopping-cart\"><\/i>\r\n                <\/div>\r\n                <h3>Site de commerce \u00e9lectronique<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- Responsive Design -->\r\n            <div class=\"ma-service-item animate-fade-in\" style=\"animation-delay: 0.4s\">\r\n                <div class=\"ma-service-icon\">\r\n                    <i class=\"fas fa-mobile-alt\"><\/i>\r\n                <\/div>\r\n                <h3>Conception adapt\u00e9e<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- Content Writing -->\r\n            <div class=\"ma-service-item animate-fade-in\" style=\"animation-delay: 0.5s\">\r\n                <div class=\"ma-service-icon\">\r\n                    <i class=\"fas fa-pen-fancy\"><\/i>\r\n                <\/div>\r\n                <h3>R\u00e9daction de contenu<\/h3>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Professional Styling with Green Color Scheme *\/\r\n.ma-professional-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 40px 20px;\r\n    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;\r\n    color: #2d3748;\r\n}\r\n\r\n.ma-header {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n}\r\n\r\n.ma-header h1 {\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    color: #056335;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.ma-subtitle {\r\n    font-size: 1.1rem;\r\n    color: #4a5568;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n    line-height: 1.6;\r\n}\r\n\r\n.ma-section {\r\n    margin-bottom: 60px;\r\n}\r\n\r\n.ma-section-title {\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    font-weight: 600;\r\n    color: #056335;\r\n    margin-bottom: 40px;\r\n    position: relative;\r\n}\r\n\r\n.ma-section-title:after {\r\n    content: '';\r\n    display: block;\r\n    width: 60px;\r\n    height: 3px;\r\n    background: #056335;\r\n    margin: 15px auto 0;\r\n}\r\n\r\n\/* Feature Boxes *\/\r\n.ma-feature-boxes {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 30px;\r\n}\r\n\r\n.ma-feature-box {\r\n    flex: 1;\r\n    min-width: 280px;\r\n    background: white;\r\n    border-radius: 8px;\r\n    padding: 30px;\r\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    border-top: 3px solid #056335;\r\n}\r\n\r\n.ma-feature-box:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.ma-icon-container {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: #e6f7ed;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n    color: #056335;\r\n    font-size: 24px;\r\n}\r\n\r\n.ma-feature-box h3 {\r\n    font-size: 1.3rem;\r\n    font-weight: 600;\r\n    margin-bottom: 15px;\r\n    color: #056335;\r\n}\r\n\r\n.ma-feature-box p {\r\n    color: #4a5568;\r\n    line-height: 1.6;\r\n    font-size: 1rem;\r\n}\r\n\r\n\/* Service Grid *\/\r\n.ma-service-grid {\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n}\r\n\r\n.ma-service-item {\r\n    flex: 1;\r\n    min-width: 200px;\r\n    max-width: 220px;\r\n    background: white;\r\n    border-radius: 8px;\r\n    padding: 30px 20px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n    transition: all 0.3s ease;\r\n    border-top: 3px solid #056335;\r\n}\r\n\r\n.ma-service-item:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.ma-service-icon {\r\n    width: 50px;\r\n    height: 50px;\r\n    margin: 0 auto 15px;\r\n    background: #e6f7ed;\r\n    border-radius: 10px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #056335;\r\n    font-size: 20px;\r\n}\r\n\r\n.ma-service-item h3 {\r\n    font-size: 1.1rem;\r\n    font-weight: 600;\r\n    color: #056335;\r\n}\r\n\r\n\/* Animation Styles *\/\r\n@keyframes slideDown {\r\n    from {\r\n        transform: translateY(-50px);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes popIn {\r\n    from {\r\n        transform: scale(0.8);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: scale(1);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes slideLeft {\r\n    from {\r\n        transform: translateX(-50px);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: translateX(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes slideRight {\r\n    from {\r\n        transform: translateX(50px);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: translateX(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes fadeIn {\r\n    from {\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n.animate-slide-down {\r\n    animation: slideDown 0.8s ease-out forwards;\r\n}\r\n\r\n.animate-pop-in {\r\n    animation: popIn 0.6s cubic-bezier(0.26, 0.54, 0.32, 1) forwards;\r\n}\r\n\r\n.animate-slide-left {\r\n    animation: slideLeft 0.6s ease-out forwards;\r\n}\r\n\r\n.animate-slide-right {\r\n    animation: slideRight 0.6s ease-out forwards;\r\n}\r\n\r\n.animate-fade-in {\r\n    animation: fadeIn 0.8s ease-out forwards;\r\n    opacity: 0;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n@media (max-width: 768px) {\r\n    .ma-feature-boxes {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .ma-feature-box {\r\n        min-width: 100%;\r\n    }\r\n    \r\n    .ma-service-grid {\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n    \r\n    .ma-service-item {\r\n        min-width: 80%;\r\n        max-width: 100%;\r\n    }\r\n    \r\n    .ma-header h1 {\r\n        font-size: 2rem;\r\n    }\r\n    \r\n    .ma-section-title {\r\n        font-size: 1.5rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ This ensures animations play when elements are in viewport\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const animateElements = document.querySelectorAll('[class*=\"animate-\"]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.visibility = 'visible';\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, {threshold: 0.1});\r\n    \r\n    animateElements.forEach(el => {\r\n        el.style.visibility = 'hidden';\r\n        el.style.animationPlayState = 'paused';\r\n        observer.observe(el);\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Website Creation We design and develop modern, high-performing websites optimized for &#8230; <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-5935","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/pages\/5935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/comments?post=5935"}],"version-history":[{"count":14,"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/pages\/5935\/revisions"}],"predecessor-version":[{"id":6003,"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/pages\/5935\/revisions\/6003"}],"wp:attachment":[{"href":"https:\/\/thamarusa.com\/fr\/wp-json\/wp\/v2\/media?parent=5935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}