templates/front/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block title %}Home{% endblock %}
  5. {% block body %}
  6.     <!-- Section Smart 9 -->
  7.     <section class="smart9-section">
  8.         <div class="">
  9.             <span>SMART 9</span>
  10.         </div>
  12.         <div class="sticky-header-center">
  13.             <ul class="">
  14.                 <li><a href="#"><span>Overview</a></span></li>
  15.                 <li><a href="#"><span>Specs</span></a></li>
  16.             </ul>
  17.         </div>
  19.         <div class="sticky-header-right">
  20.             <a href="{{ path('app_front_produit_list') }}"><button>Acheter maintenant</button></a>
  21.         </div>
  22.     </section>
  24.     <!-- Section avec une grande image -->
  25.     <section class="full-width-image-section">
  26.         <img src="{{ asset('build/images/bg-infinix-hd.png') }}" alt="Grande image"> <!-- Remplacez par le chemin de votre image -->
  27.     </section>
  29.     <section class="grid-section">
  30.         <div class="grid-container">
  31.             <div class="grid-item item1">
  32.                 <div class="text-grid">
  33.                     <span class="main-text">120Hz 6.7"</span>
  34.                     <br>
  35.                     <span class="medium-text">Punch-Hole Display with Dynamic Bar</span>
  36.                 </div>
  37.                 <img class="img-1" data-v-e1f7f6b0="" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/phone-grid-1.webp">
  38.                 <img class="img-2" data-v-e1f7f6b0="" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/wet-splash.webp" alt="" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/slogan/transparent_load.webp" class="lazyLoad">
  39.             </div>
  40.             <div class="grid-item item2">
  41.                 {# Helio G81 <br> Processor <br> 48 Month TUV Fluency #}
  42.                 <div class="text-grid">
  43.                     Helio G81 Processor 
  44.                     <br data-v-e1f7f6b0="">
  45.                     <span data-v-e1f7f6b0="" class="medium-text">
  46.                         <span data-v-e1f7f6b0="" class="bold-text">48 Month</span> TÜV Fluency
  47.                     </span>
  48.                 </div>
  49.                 <div data-v-e1f7f6b0="" class="tuv-container">
  50.                     <img data-v-e1f7f6b0="" alt="TUV Logo" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/tuv-logo.webp" class="lazyLoad isLoaded">
  51.                 </div>
  52.                 <img data-v-e1f7f6b0="" class="mediatek-container" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/processor.webp">
  53.             </div>
  54.             <div class="grid-item item3">
  55.                 <img data-v-e1f7f6b0="" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/soundboom.webp">
  56.                 <div class="text-grid">
  57.                     Dual Speakers 
  58.                     <br data-v-e1f7f6b0="">
  59.                     <span data-v-e1f7f6b0="" class="medium-text">300% Ultra Volume</span>
  60.                 </div>
  61.             </div>
  62.             <div class="grid-item item4">
  63.                 <div data-v-e1f7f6b0="" class="text-grid">
  64.                     <div data-v-e1f7f6b0="" class="bold-text">
  65.                         Up to 8GB 
  66.                         <br data-v-e1f7f6b0="">Extended RAM
  67.                     </div> 
  68.                     <div data-v-e1f7f6b0="" class="medium-text">
  69.                         +128GB Storage
  70.                     </div>
  71.                 </div>
  72.                 <img data-v-e1f7f6b0="" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/ram-v2.webp">
  73.             </div>
  74.             <div class="grid-item item5">
  75.                 <img data-v-e1f7f6b0="" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/13mp-bg.webp">
  76.                 <div data-v-e1f7f6b0="" class="text-grid">
  77.                     13MP
  78.                     <br data-v-e1f7f6b0="">
  79.                     <span data-v-e1f7f6b0="" class="medium-text">
  80.                         Crystal-Clear Rear Camera
  81.                     </span>
  82.                 </div>
  83.             </div>
  84.             <div class="grid-item item6">
  85.                 <div data-v-e1f7f6b0="" class="battery-container hover-element">
  86.                     <img data-v-e1f7f6b0="" alt="" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/battery-v2.webp" class="lazyLoad isLoaded"> 
  87.                     <div data-v-e1f7f6b0="" class="title bold-text">
  88.                         5000 
  89.                         <sub data-v-e1f7f6b0="" class="bold-text">mAh</sub>
  90.                     </div>
  91.                 </div>
  92.                 <div data-v-e1f7f6b0="" class="text-grid">
  93.                     Long-Lasting Battery
  94.                 </div>
  95.             </div>
  96.             <div class="grid-item item8">
  97.                 <img data-v-e1f7f6b0="" alt="" class="hover-element lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-2/flashlight-bg.webp">
  98.                 <div data-v-e1f7f6b0="" class="text-grid">
  99.                     <span data-v-e1f7f6b0="" class="bold-text">5M</span>
  100.                     <br data-v-e1f7f6b0="">
  101.                     <span data-v-e1f7f6b0="" class="bold-text">Powerful LED Flashlight</span>
  102.                 </div>
  103.             </div>
  104.             <div class="grid-item item7">
  105.                 <div data-v-e1f7f6b0="" class="text-grid">Durable and Drop Resistance Certified</div>
  106.             </div>
  107.         </div>
  108.     </section>
  110.     <section data-v-262b489a="" fragment="c5889caec1" class="section section-3">
  111.         <div data-v-262b489a="" class="warp-container"> 
  112.             <div data-v-262b489a="" class="content-pc">
  113.                 <div data-v-262b489a="" class="container-sec3">
  114.                     <div data-v-6358f34c="" fragment="9b79811896" class="page-braker">
  115.                         <div data-v-6358f34c="" class="content-pc">
  116.                             <div data-v-6358f34c="" class="container-page-braker">
  117.                                 <div data-v-6358f34c="" class="content-container">
  118.                                     <div data-v-6358f34c="" class="text-item text-1" style="color: rgb(124, 231, 73); opacity: 1;">
  119.                                         Design
  120.                                     </div>
  121.                                     <div data-v-6358f34c="" class="container-content" style="background: linear-gradient(0deg, rgb(28, 221, 155) 0%, rgb(137, 233, 33) 99%); inset: 0px;">
  122.                                         <div data-v-6358f34c="" class="container-text-1">
  123.                                             <div data-v-6358f34c="" class="text-item text-1 shadow-1" style="opacity: 1; transform: matrix(1, 0, -0.08749, 0.99999, 0, 19.2);">
  124.                                                 Design
  125.                                             </div> 
  126.                                             <div data-v-6358f34c="" class="text-item text-1 shadow-2" style="opacity: 1; transform: matrix(1, 0, -0.0998, 1, 0, 19.2);">
  127.                                                 Design
  128.                                             </div>
  129.                                         </div>
  130.                                         <div data-v-6358f34c="" class="container-text-2">
  131.                                             <div data-v-6358f34c="" class="text-item text-2 shadow-1" style="opacity: 1; transform: matrix(1, 0, -0.08749, 0.99999, 0, -19.2);">
  132.                                                 SMART
  133.                                             </div> 
  134.                                             <div data-v-6358f34c="" class="text-item text-2 shadow-2" style="opacity: 1; transform: matrix(1, 0, -0.0998, 1, 0, -19.2);">
  135.                                                 SMART
  136.                                             </div> 
  137.                                             <div data-v-6358f34c="" class="text-item text-2" style="opacity: 1;">
  138.                                                 IS SMART
  139.                                             </div>
  140.                                         </div>
  141.                                     </div> 
  142.                                     <div data-v-6358f34c="" class="overlay-pageBraker" style="background: black; transform: matrix(0.99862, 0.05233, -0.05233, 0.99862, 0, -162);">
  143.                                         <div data-v-6358f34c="" class="text-item text-1-overlay" style="opacity: 1;">
  144.                                             Design
  145.                                         </div>
  146.                                     </div>
  147.                                 </div>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </section>
  156.     <section data-v-3af3de9e="" fragment="7629c4d8d1" class="section section-4">
  157.         <div data-v-3af3de9e="" class="warp-container">
  158.             <div data-v-3af3de9e="" class="content-pc">
  159.                 <div data-v-3af3de9e="" class="content-container">
  160.                     <div data-v-3af3de9e="" class="center-container">
  161.                         <div data-v-3af3de9e="" class="main-image-container anim-up active">
  162.                             <img data-v-3af3de9e="" alt="Main Image" class="main-image main-image-titanium lazyLoad isLoaded active" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/left-picture-1.webp" key="0">
  163.                             <img data-v-3af3de9e="" alt="Main Image" class="main-image main-image-black lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/left-picture-2.webp" key="1">
  164.                             <img data-v-3af3de9e="" alt="Main Image" class="main-image main-image-gold lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/left-picture-3.webp" key="2">
  165.                             <img data-v-3af3de9e="" alt="Main Image" class="main-image main-image-green lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/left-picture-4.webp" key="3">
  166.                         </div> 
  167.                         <div data-v-3af3de9e="" class="right-content">
  168.                             <div data-v-3af3de9e="" class="phone-image-container anim-up active">
  169.                                 <img data-v-3af3de9e="" alt="Phone Image" class="phone-image phone-image-titanium lazyLoad isLoaded active" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/phone-picture-1.webp">
  170.                                 <img data-v-3af3de9e="" alt="Phone Image" class="phone-image phone-image-black lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/phone-picture-2.webp">
  171.                                 <img data-v-3af3de9e="" alt="Phone Image" class="phone-image phone-image-gold lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/phone-picture-3.webp">
  172.                                 <img data-v-3af3de9e="" alt="Phone Image" class="phone-image phone-image-green lazyLoad isLoaded" src="https://d3o31au25zfcly.cloudfront.net/newfileadmin/usp/smart/smart-9/pc/section-4/phone-picture-4.webp">
  173.                             </div> 
  174.                             <div data-v-3af3de9e="" class="bottom-container anim-up">
  175.                                 <div data-v-3af3de9e="" class="buttons-container">
  176.                                     <div data-v-3af3de9e="" data-slide="0" class="button color-button button-titanium" style="border: 0.104vw solid rgb(175, 175, 175);">
  177.                                         <div data-v-3af3de9e="" class="inner-button" style="background: linear-gradient(47deg, rgb(226, 226, 226) 0%, rgb(175, 175, 175) 99%);">
  178.                                         </div>
  179.                                     </div>
  180.                                     <div data-v-3af3de9e="" data-slide="1" class="button color-button button-black inactive" style="border: 0.104vw solid rgb(48, 50, 63);">
  181.                                         <div data-v-3af3de9e="" class="inner-button" style="background: linear-gradient(47deg, rgb(84, 88, 97) 0%, rgb(48, 50, 63) 99%);">
  182.                                         </div>
  183.                                     </div>
  184.                                     <div data-v-3af3de9e="" data-slide="2" class="button color-button button-gold inactive" style="border: 0.104vw solid rgb(219, 193, 160);">
  185.                                         <div data-v-3af3de9e="" class="inner-button" style="background: linear-gradient(47deg, rgb(254, 231, 204) 0%, rgb(219, 193, 160) 99%);">
  186.                                         </div>
  187.                                     </div>
  188.                                     <div data-v-3af3de9e="" data-slide="3" class="button color-button button-green inactive" style="border: 0.104vw solid rgb(161, 196, 186);">
  189.                                         <div data-v-3af3de9e="" class="inner-button" style="background: linear-gradient(47deg, rgb(208, 244, 234) 0%, rgb(161, 196, 186) 99%);">
  190.                                         </div>
  191.                                     </div>
  192.                                 </div> 
  193.                                 <div data-v-3af3de9e="" class="phone-color-container">
  194.                                     <div data-v-3af3de9e="" class="phone-color regular-text">
  195.                                         Neo Titanium
  196.                                     </div>
  197.                                     <div data-v-3af3de9e="" class="phone-color regular-text">
  198.                                         Metallic Black
  199.                                     </div>
  200.                                     <div data-v-3af3de9e="" class="phone-color regular-text">
  201.                                         Sandstone Gold
  202.                                     </div>
  203.                                     <div data-v-3af3de9e="" class="phone-color regular-text">
  204.                                         Mint Green
  205.                                     </div>
  206.                                 </div>
  207.                             </div> 
  208.                             <div data-v-3af3de9e="" class="copy-container">
  209.                                 <div data-v-3af3de9e="" class="title bold-text anim-up">
  210.                                     Colourful. Confident. 
  211.                                     <br data-v-3af3de9e="">
  212.                                     Versatile. 
  213.                                 </div> 
  214.                                 <div data-v-3af3de9e="" class="highlight bold-text anim-up">
  215.                                     Enjoy Premium Colors
  216.                                 </div> 
  217.                                 <div data-v-3af3de9e="" class="description regular-text anim-up">
  218.                                     The texture-rich body with a delicate feel 
  219.                                     <br data-v-3af3de9e="">
  220.                                     creates a style that is sleek and refined, 
  221.                                     <br data-v-3af3de9e="">
  222.                                     shining with a metallic luster from every angle.
  223.                                 </div>
  224.                             </div>
  225.                         </div>
  226.                     </div>
  227.                 </div>
  228.             </div>
  229.         </div>
  230.     </section>
  232.     {# <section class="container my-5">
  233.         <div class="row">
  234.             <div class="col-12">
  235.                 <!-- Conteneur pour les cartes et les textes -->
  236.                 <div class="cards-and-texts-container">
  237.                     <div class="cards-container">
  238.                         <!-- Carte Verticale -->
  239.                         <div class="card vertical-card">
  240.                             <img id="vertical-card-image" src="{{ asset('build/images/images_1.jpg') }}" alt="Carte Verticale">
  241.                         </div>
  243.                         <!-- Conteneur pour la carte horizontale et les points de navigation -->
  244.                         <div class="horizontal-card-container">
  245.                             <!-- Carte Horizontale -->
  246.                             <div class="card horizontal-card">
  247.                                 <img id="horizontal-card-image" src="{{ asset('build/images/images_2.jpg') }}" alt="Carte Horizontale">
  248.                             </div>
  250.                             <!-- Navigation en Points sous la Carte Horizontale -->
  251.                             <div class="navigation-dots">
  252.                                 <span class="dot active" data-index="0"></span>
  253.                                 <span class="dot" data-index="1"></span>
  254.                                 <span class="dot" data-index="2"></span>
  255.                                 <span class="dot" data-index="3"></span>
  256.                             </div>
  258.                             <!-- Conteneur pour les textes dynamiques en bas des points -->
  259.                             <div class="dynamic-text" id="dynamic-text">
  260.                                 <h2 id="dynamic-title">Colourful. Confident. Versatile.</h2>
  261.                                 <p id="dynamic-subtitle">Enjoy Premium Colors</p>
  262.                                 <p id="dynamic-description">The texture-rich body with a delicate feel creates a style
  263.                                     that is sleek and refined, shining with a metallic luster from every angle.</p>
  264.                             </div>
  265.                         </div>
  266.                     </div>
  267.                 </div>
  268.             </div>
  269.         </div>
  270.     </section> #}
  272.     <!-- Section avec les deux bandes bleues -->
  273.     {# <section class="band-section">
  274.         <div class="blue-band"></div> <!-- Première bande bleue -->
  275.         <div class="blue-band second"></div> <!-- Deuxième bande bleue inclinée -->
  276.         <!-- Textes -->
  277.         <div class="text text-joyful">Joyful</div>
  278.         <div class="text text-is-smart">IS SMART</div>
  279.     </section> #}
  281.     <!-- Section Detailed Clarity -->
  282.     {# <section class="detailed-clarity-section">
  283.         <!-- Textes à gauche -->
  284.         <div class="detailed-clarity-texts">
  285.             <h2>Detailed Clarity</h2>
  286.             <h3>120Hz 6.7" Display</h3>
  287.             <p>Enjoy clear visibility even under outdoor sunlight. Experience detailed visuals with high-definition
  288.                 light and shadow transitions, making every frame brilliantly vivid.</p>
  289.         </div>
  291.         <!-- Icônes et informations à droite -->
  292.         <div class="detailed-clarity-icons">
  293.             <div class="icon-block">
  294.                 <i class="fas fa-sync-alt"></i>
  295.                 <span>120Hz Refresh Rate</span>
  296.             </div>
  297.             <div class="icon-block">
  298.                 <i class="fas fa-sun"></i>
  299.                 <span>500nit Peek Brightness</span>
  300.             </div>
  301.         </div>
  303.         <!-- Image dynamique placée en bas au centre -->
  304.         <img src="{{ asset('build/images/telechargement_1.jpg') }}" alt="Dynamic Image" class="detailed-clarity-image">
  305.     </section> #}
  306. {% endblock %}
  308.     
  309. {% block javascripts %}
  310.     {{ encore_entry_script_tags('appFront_home') }}
  311. {% endblock %}