Alain Afflelou Design System

Socials Countries 

<div class="container">
    <div class="flex justify-between lg:items-center flex-col lg:flex-row py-10 md:py-16 border-b border-b-neutral-600 gap-10">
        <div>
            <h2 class="text-light-white font-semibold text-lg mb-6">Suivez-nous sur les réseaux !</h2>
            <div class="flex items-center gap-4 flex-wrap">
                <a href="https://www.instagram.com/afflelou/" target="_blank" rel="noopenner noreferer" class=" btn btn-light-ghost btn-size-sm btn-icons">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M19.952 15.2983C19.8206 18.2069 18.2011 19.8183 15.2994 19.952C14.4457 19.9909 14.1726 20 12 20C9.82743 20 9.55543 19.9909 8.70171 19.952C5.79429 19.8183 4.18171 18.2046 4.048 15.2983C4.00914 14.4457 4 14.1726 4 12C4 9.82743 4.00914 9.55543 4.048 8.70171C4.18171 5.79429 5.79543 4.18171 8.70171 4.04914C9.55543 4.00914 9.82743 4 12 4C14.1726 4 14.4457 4.00914 15.2994 4.04914C18.208 4.18286 19.8217 5.8 19.952 8.70171C19.9909 9.55543 20 9.82743 20 12C20 14.1726 19.9909 14.4457 19.952 15.2983ZM15.2331 5.488C14.3897 5.44914 14.136 5.44229 12 5.44229C9.864 5.44229 9.61143 5.45029 8.768 5.488C6.59771 5.58743 5.58743 6.61486 5.488 8.768C5.45029 9.61143 5.44114 9.864 5.44114 12C5.44114 14.136 5.45029 14.3886 5.488 15.2331C5.58743 17.3806 6.59314 18.4137 8.768 18.5131C9.61029 18.5509 9.864 18.56 12 18.56C14.1371 18.56 14.3897 18.552 15.2331 18.5131C17.4034 18.4149 18.4126 17.384 18.5131 15.2331C18.5509 14.3897 18.5589 14.136 18.5589 12C18.5589 9.864 18.5509 9.61143 18.5131 8.768C18.4126 6.616 17.4011 5.58743 15.2331 5.488ZM15.3108 7.73029C15.3108 8.26057 15.7405 8.69029 16.2708 8.69029C16.801 8.69029 17.2308 8.25943 17.2308 7.73029C17.2308 7.2 16.801 6.77029 16.2708 6.77029C15.7405 6.77029 15.3108 7.2 15.3108 7.73029ZM7.89136 12C7.89136 14.2697 9.73136 16.1086 11.9999 16.1086C14.2685 16.1086 16.1085 14.2686 16.1085 12C16.1085 9.73144 14.2685 7.89258 11.9999 7.89258C9.73136 7.89258 7.89136 9.73144 7.89136 12ZM11.9999 14.6663C10.5279 14.6663 9.33367 13.4731 9.33367 12C9.33367 10.5269 10.5279 9.33372 11.9999 9.33372C13.4719 9.33372 14.6662 10.5269 14.6662 12C14.6662 13.4731 13.4719 14.6663 11.9999 14.6663Z" fill="currentColor" />
                    </svg>
                    Instagram

                </a>
                <a href="https://www.tiktok.com/@afflelou" target="_blank" rel="noopenner noreferer" class=" btn btn-light-ghost btn-size-sm btn-icons">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6101 6.52749C16.6216 5.8832 15.9088 4.85187 15.686 3.65027C15.6382 3.39072 15.6115 3.12334 15.6115 2.84998H12.4572L12.4522 15.4909C12.3992 16.9065 11.234 18.0428 9.80597 18.0428C9.36187 18.0428 8.944 17.9319 8.57583 17.7381C7.73181 17.294 7.15426 16.4095 7.15426 15.3915C7.15426 13.9294 8.34389 12.7398 9.8055 12.7398C10.0784 12.7398 10.3403 12.7849 10.5879 12.8622V9.64216C10.3315 9.60719 10.071 9.58556 9.8055 9.58556C6.60431 9.58556 4 12.1899 4 15.3915C4 17.3557 4.98116 19.0939 6.47867 20.145C7.42164 20.8072 8.56893 21.197 9.80597 21.197C13.0072 21.197 15.6115 18.5927 15.6115 15.3915V8.98131C16.8485 9.86904 18.3644 10.3923 20 10.3923V7.23804C19.1192 7.23804 18.2986 6.97619 17.6101 6.52749Z" fill="currentColor" />
                    </svg>
                    TikTok

                </a>
                <a href="https://x.com/Afflelou" target="_blank" rel="noopenner noreferer" class=" btn btn-light-ghost btn-size-sm btn-icons">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5222 10.9238L19.4785 4H18.0671L12.8952 10.0118L8.76437 4H4L10.2466 13.0909L4 20.3516H5.41155L10.8732 14.0029L15.2356 20.3516H20L13.5222 10.9238ZM11.5889 13.171L10.956 12.2658L5.92015 5.06259H8.0882L12.1522 10.8758L12.7851 11.7811L18.0677 19.3373H15.8997L11.5889 13.171Z" fill="currentColor" />
                    </svg>
                    Twitter

                </a>
                <a href="https://www.facebook.com/alainafflelou" target="_blank" rel="noopenner noreferer" class=" btn btn-light-ghost btn-size-sm btn-icons">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.476 17.524 2 12 2C6.476 2 2 6.476 2 12C2 16.688 5.228 20.624 9.584 21.704V15.056H7.52V12H9.584V10.684C9.584 7.28 11.124 5.704 14.464 5.704C15.096 5.704 16.192 5.828 16.636 5.952V8.72C16.4 8.696 15.992 8.684 15.48 8.684C13.84 8.684 13.208 9.304 13.208 10.92V12H16.476L15.916 15.056H13.212V21.928C18.164 21.328 22 17.112 22 12Z" fill="currentColor" />
                    </svg>
                    Facebook

                </a>
            </div>
        </div>
        <div class="lg:text-right">
            <h2 class="text-light-white font-semibold text-lg mb-6">Changez de pays ou de langue</h2>
            <div class="dropdown  dropdown-size-sm" x-data="{show:false}">
                <button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons  btn btn-light-ghost btn-size-sm btn-icons">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.42322 11.3023H7.59855C7.73678 8.49302 8.7069 5.79564 10.3734 3.54887C6.6214 4.26671 3.73464 7.42122 3.42322 11.3023ZM12 3.74171C10.2029 5.86705 9.14755 8.52214 8.99577 11.3023H15.0042C14.8525 8.52214 13.7971 5.86705 12 3.74171ZM15.0042 12.6977H8.99577C9.14755 15.4779 10.2029 18.133 12 20.2583C13.7971 18.133 14.8525 15.4779 15.0042 12.6977ZM10.3734 20.4511C8.7069 18.2044 7.73678 15.507 7.59855 12.6977H3.42322C3.73464 16.5788 6.6214 19.7333 10.3734 20.4511ZM13.6266 20.4511C17.3786 19.7333 20.2654 16.5788 20.5768 12.6977H16.4015C16.2632 15.507 15.2931 18.2044 13.6266 20.4511ZM20.5768 11.3023C20.2654 7.42122 17.3786 4.26671 13.6266 3.54887C15.2931 5.79564 16.2632 8.49302 16.4015 11.3023H20.5768ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor" />
                    </svg>
                    France - FR

                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                    </svg>

                </button>

                <div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
                    <!-- Link item -->
                    <a href="https://www.afflelou.com/" class="dropdown-item ">
                        France - FR
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.es/" class="dropdown-item ">
                        Espagne - ES
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.be/" class="dropdown-item ">
                        Belgique - FR
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.be/nl-be" class="dropdown-item ">
                        Belgique - NL
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.ch/" class="dropdown-item ">
                        Suisse - FR
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.ma/" class="dropdown-item ">
                        Maroc - FR
                    </a>
                    <!-- Link item -->
                    <a href="https://www.afflelou.pt/" class="dropdown-item ">
                        Portugal - PT
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="flex justify-between lg:items-center flex-col lg:flex-row py-10 md:py-16 border-b border-b-neutral-600 gap-10">
        <div>
            <h2 class="text-light-white font-semibold text-lg mb-6">Suivez-nous sur les réseaux !</h2>
            <div class="flex items-center gap-4 flex-wrap">
                {% render "@template-button" with {
                    href:"https://www.instagram.com/afflelou/", external:true,color: "light-ghost", type:"leading-icon", size:"sm", label:"Instagram",
                    icon: {
                        name: "social--instagram",
                    }
                } %}
                {% render "@template-button" with {
                    href:"https://www.tiktok.com/@afflelou", external:true,color: "light-ghost", type:"leading-icon", size:"sm", label:"TikTok",
                    icon: {
                        name: "social--tiktok",
                    }
                } %}
                {% render "@template-button" with {
                    href:"https://x.com/Afflelou", external:true,color: "light-ghost", type:"leading-icon", size:"sm", label:"Twitter",
                    icon: {
                        name: "social--twitter",
                    }
                } %}
                {% render "@template-button" with {
                    href:"https://www.facebook.com/alainafflelou", external:true, color: "light-ghost", type:"leading-icon", size:"sm", label:"Facebook",
                    icon: {
                        name: "social--facebook",
                    }
                } %}
            </div>
        </div>
        <div class="lg:text-right">
            <h2 class="text-light-white font-semibold text-lg mb-6">Changez de pays ou de langue</h2>
            {% render "@template-dropdown" with {
                color: "light-ghost",
                type:"leading-icon",
                size:"sm",
                label:"France - FR",
                icon: {
                    name: "library--world",
                },
                items: [
                    {
                        label: 'France - FR',
                        href: 'https://www.afflelou.com/',
                    },
                    {
                        label: 'Espagne - ES',
                        href: 'https://www.afflelou.es/',
                    },
                    {
                        label: 'Belgique - FR',
                        href: 'https://www.afflelou.be/',
                    },
                    {
                        label: 'Belgique - NL',
                        href: 'https://www.afflelou.be/nl-be',
                    },
                    {
                        label: 'Suisse - FR',
                        href: 'https://www.afflelou.ch/',
                    },
                    {
                        label: 'Maroc - FR',
                        href: 'https://www.afflelou.ma/',
                    },
                    {
                        label: 'Portugal - PT',
                        href: 'https://www.afflelou.pt/',
                    }
                ]
            } %}
        </div>
    </div>
</div>
 
/* No context defined. */

No notes defined.