templates/public/homepage.html.twig line 1

Open in your IDE?
  1. {% extends '@!SymfonyAdmin/base.html.twig' %}
  3. {% block stylesheets %}
  4.   {{ parent() }}
  6.   <style>
  7.     html,
  8.     body {
  9.       min-height: 100%;
  10.       overflow-y: auto !important;
  11.     }
  13.     .portal-page {
  14.       min-height: 100vh;
  15.       background: #f4f7fb;
  16.       display: flex;
  17.       align-items: center;
  18.       justify-content: center;
  19.       padding: 40px 20px;
  20.       font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  21.     }
  23.     .portal-card {
  24.       width: 100%;
  25.       max-width: 700px;
  26.       background: #ffffff;
  27.       border: 1px solid #d8dee8;
  28.       border-radius: 12px;
  29.       box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
  30.       padding: 40px 44px 42px;
  31.       text-align: center;
  32.     }
  34.     .portal-logo img {
  35.       height: 42px;
  36.       margin-bottom: 20px;
  37.     }
  39.     .portal-card h1 {
  40.       margin: 0;
  41.       font-size: 38px;
  42.       line-height: 1.12;
  43.       font-weight: 800;
  44.       color: #070b16;
  45.       letter-spacing: -0.035em;
  46.     }
  48.     .portal-subtitle {
  49.       margin: 16px 0 30px;
  50.       font-size: 18px;
  51.       line-height: 1.5;
  52.       color: #6f7782;
  53.       font-weight: 400;
  54.     }
  56.     .info-row {
  57.       display: grid;
  58.       grid-template-columns: 76px 1fr;
  59.       gap: 16px;
  60.       align-items: center;
  61.       text-align: left;
  62.       max-width: 610px;
  63.       margin: 0 auto;
  64.     }
  66.     .info-row p {
  67.       margin: 0;
  68.       font-size: 16px;
  69.       line-height: 1.6;
  70.       color: #111827;
  71.     }
  73.     .info-row strong {
  74.       font-weight: 800;
  75.     }
  77.     .icon-circle {
  78.       width: 60px;
  79.       height: 60px;
  80.       border-radius: 50%;
  81.       display: flex;
  82.       align-items: center;
  83.       justify-content: center;
  84.       margin: 0 auto;
  85.     }
  87.     .icon-circle svg {
  88.       width: 32px;
  89.       height: 32px;
  90.       display: block;
  91.     }
  93.     .icon-circle.blue {
  94.       background: #edf4ff;
  95.       color: #3b82f6;
  96.     }
  98.     .icon-circle.green {
  99.       background: #eff7ea;
  100.       color: #76a83b;
  101.     }
  103.     .divider {
  104.       max-width: 610px;
  105.       height: 1px;
  106.       background: #dfe5ee;
  107.       margin: 22px auto;
  108.     }
  110.     .notice-box {
  111.       max-width: 610px;
  112.       margin: 26px auto 26px;
  113.       border: 1px solid #f1dc9a;
  114.       background: #fffaf0;
  115.       border-radius: 10px;
  116.       padding: 18px 20px;
  117.       display: grid;
  118.       grid-template-columns: 48px 1px 1fr;
  119.       gap: 16px;
  120.       align-items: center;
  121.       text-align: left;
  122.       color: #b3871f;
  123.     }
  125.     .notice-icon {
  126.       display: flex;
  127.       align-items: center;
  128.       justify-content: center;
  129.     }
  131.     .notice-icon svg {
  132.       width: 30px;
  133.       height: 30px;
  134.       display: block;
  135.     }
  137.     .notice-divider {
  138.       width: 1px;
  139.       height: 38px;
  140.       background: #efdfb3;
  141.     }
  143.     .notice-box strong {
  144.       font-size: 15px;
  145.       line-height: 1.45;
  146.       font-weight: 800;
  147.       color: #a57a1d;
  148.     }
  150.     .signin-button {
  151.       border: 0;
  152.       background: #3b82f6;
  153.       color: #ffffff;
  154.       font-size: 18px;
  155.       font-weight: 700;
  156.       padding: 15px 56px;
  157.       border-radius: 10px;
  158.       cursor: pointer;
  159.       box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
  160.       display: inline-flex;
  161.       align-items: center;
  162.       justify-content: center;
  163.       gap: 10px;
  164.       min-width: 210px;
  165.     }
  167.     .signin-button:hover {
  168.       background: #0575eb;
  169.       color: #fff;
  170.       text-decoration: none;
  171.     }
  173.     .signin-button__label {
  174.       line-height: 1;
  175.     }
  177.     .signin-button__icon {
  178.       width: 20px;
  179.       height: 20px;
  180.       flex: 0 0 20px;
  181.       display: block;
  182.     }
  184.     @media (max-width: 768px) {
  185.       .portal-page {
  186.         padding: 28px 16px;
  187.       }
  189.       .portal-card {
  190.         padding: 34px 22px;
  191.       }
  193.       .portal-logo img {
  194.         height: 38px;
  195.         margin-bottom: 20px;
  196.       }
  198.       .portal-card h1 {
  199.         font-size: 30px;
  200.       }
  202.       .portal-subtitle {
  203.         font-size: 17px;
  204.         margin-bottom: 28px;
  205.       }
  207.       .info-row {
  208.         grid-template-columns: 1fr;
  209.         text-align: center;
  210.         justify-items: center;
  211.         gap: 14px;
  212.       }
  214.       .info-row p {
  215.         font-size: 16px;
  216.       }
  218.       .icon-circle {
  219.         width: 64px;
  220.         height: 64px;
  221.       }
  223.       .icon-circle svg {
  224.         width: 34px;
  225.         height: 34px;
  226.       }
  228.       .notice-box {
  229.         grid-template-columns: 1fr;
  230.         text-align: center;
  231.         gap: 12px;
  232.         padding: 18px;
  233.       }
  235.       .notice-divider {
  236.         display: none;
  237.       }
  239.       .notice-box strong {
  240.         font-size: 16px;
  241.       }
  243.       .signin-button {
  244.         width: 100%;
  245.         min-width: 0;
  246.         padding: 16px 20px;
  247.         font-size: 17px;
  248.       }
  249.     }
  250.   </style>
  251. {% endblock %}
  253. {% block layout %}
  254.   <div class="portal-page">
  255.     <div class="portal-card">
  256.       <div class="portal-logo">
  257.         <img src="{{ asset('images/ledger-logo.png') }}" alt="Ledger" />
  258.       </div>
  260.       <h1>Client Support Portal</h1>
  262.       <p class="portal-subtitle">
  263.         Secure portal for client communication, document access, <br /> and account management.
  264.       </p>
  266.       <div class="info-row">
  267.         <div class="icon-circle blue" aria-hidden="true">
  268.           <svg viewBox="0 0 24 24" fill="none">
  269.             <path d="M12 3l7 3v5c0 4.9-3.1 8.9-7 10-3.9-1.1-7-5.1-7-10V6l7-3z" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/>
  270.             <rect x="9.2" y="10.2" width="5.6" height="4.8" rx="1.1" stroke="currentColor" stroke-width="1.9"/>
  271.             <path d="M10.4 10.2V8.9a1.6 1.6 0 013.2 0v1.3" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
  272.           </svg>
  273.         </div>
  274.         <p>
  275.           <strong>{{ app.request.host }}</strong> is our dedicated secure client portal domain for existing clients, authorized users, and internal team members.
  276.         </p>
  277.       </div>
  279.       <div class="divider"></div>
  281.       <div class="info-row">
  282.         <div class="icon-circle green" aria-hidden="true">
  283.           <svg viewBox="0 0 24 24" fill="none">
  284.             <rect x="6.5" y="10" width="11" height="8" rx="1.8" stroke="currentColor" stroke-width="1.9"/>
  285.             <path d="M8.5 10V7.8A3.5 3.5 0 0112 4.5a3.5 3.5 0 013.5 3.3V10" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
  286.             <path d="M12 13.2v1.8" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
  287.           </svg>
  288.         </div>
  289.         <p>
  290.           Access requires login credentials. Information shared inside the portal is protected within this secure environment and is only available to authorized users.
  291.         </p>
  292.       </div>
  294.       <div class="notice-box">
  295.         <div class="notice-icon" aria-hidden="true">
  296.           <svg viewBox="0 0 24 24" fill="none">
  297.             <path d="M8.2 11.1a2.6 2.6 0 100-5.2 2.6 2.6 0 000 5.2z" stroke="currentColor" stroke-width="1.9"/>
  298.             <path d="M15.8 10.4a2.2 2.2 0 100-4.4 2.2 2.2 0 000 4.4z" stroke="currentColor" stroke-width="1.9"/>
  299.             <path d="M3.8 18.2v-1c0-2.1 1.8-3.8 4-3.8h.8c2.2 0 4 1.7 4 3.8v1" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
  300.             <path d="M13.7 18.2v-.6c0-1.8 1.4-3.1 3.2-3.1h.4c1.8 0 3.2 1.3 3.2 3.1v.6" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
  301.           </svg>
  302.         </div>
  303.         <div class="notice-divider"></div>
  304.         <strong>For existing clients, authorized users, and internal team members only.</strong>
  305.       </div>
  307.       <a href="{{ path('portal_redirect') }}" class="signin-button">
  308.         <span class="signin-button__label">Sign in</span>
  309.         <svg class="signin-button__icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
  310.           <path d="M4 10h10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  311.           <path d="M10.5 5.5L15 10l-4.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  312.         </svg>
  313.       </a>
  314.     </div>
  315.   </div>
  316. {% endblock %}