refactor: updated contents

mfranzke · mfranzke · commit 492d32f6c8ab · 2024-02-15T14:32:21.000+01:00
diff --git a/db-ux-design-system.html b/db-ux-design-system.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -50,13 +50,11 @@
     </header>
     <main class="landing-main">
       <h1>Hello World</h1>
-      <section id="section-gif" class="section-with-max-width">
-        <h2>insert Gif here</h2>
-      </section>
       <section id="section-contact" class="section-with-max-width">
+        <h2>insert Gif here</h2>
         <h2>
-          By everyone – for everyone:<br />
-          the DB UX Design System
+          By all, for all:<br />
+          The DB UX Design System
         </h2>
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -71,66 +69,64 @@ <h2>
           />
         </svg>
         <p>
-          Lorem ipsum dolor sit amet consectetur. Dictum commodo massa mauris
-          tristique nam. Sed commodo elit etiam amet pretium in. Consequat et
-          rutrum faucibus erat nibh ultricies viverra tincidunt. Maecenas sed
-          lorem sollicitudin elementum condimentum facilisi. Lorem ipsum dolor
-          sit amet consectetur. Dictum commodo massa mauris tristique nam. Sed
-          commodo elit etiam amet pretium in. Consequat et rutrum faucibus erat
-          nibh ultricies viverra tincidunt. Maecenas sed lorem sollicitudin
-          elementum condimentum facilisi.
+          Every bit in our world is designed & coded with the primal human
+          desire to connect with one another while
+          <strong>speaking the same language</strong>. The Design System of
+          Deutsche Bahn aligns with this logic – creating
+          <strong>One Single Source of Truth</strong> for designers and
+          developers. We embody <strong>true collaboration</strong> to create
+          consistent, efficient, and user-centric digital solutions – shaping
+          the mobility of the future.
         </p>
         <a class="db-button" data-variant="primary" href="mailto:"
-          >Contact the team</a
+          >Meet the team</a
         >
       </section>
       <section id="section-main-features" class="section-with-max-width">
-        <h2>This is how we roll</h2>
+        <h2>How it works</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas platea
-          tempor laoreet in tellus pellentesque velit. Auctor vitae tortor in
-          volutpat.
+          Our design system is a barrier-breaker, changing the way we design and
+          code products.
         </p>
         <ul>
           <li class="db-card" data-spacing="small">
             <img
               src="/assets/custom/adaptive.svg"
               width="150"
               height="150"
-              alt="Adaptive Illustration"
+              alt=""
             />
-            <h3>We are adaptive</h3>
+            <h3>Accessible</h3>
             <p>
-              As a design system, we need to be able to react flexibly to
-              different requirements. With the tokens, we can cover different
-              visual volumes, color environments or simply responsive design.
+              <strong>One place for everyone</strong> – accessibility from
+              colors to components is guaranteed.
             </p>
           </li>
           <li class="db-card" data-spacing="small">
             <img
               src="/assets/custom/accessibility.svg"
               width="150"
               height="150"
-              alt="Accessibility Illustration"
+              alt=""
             />
-            <h3>We are accessible</h3>
+            <h3>Adaptive</h3>
             <p>
-              The DB UX Design System guarantees accessibility for all content -
-              from colors to all components.
+              <strong>One token</strong> changes it all – from different styles
+              to colors or responsive design.
             </p>
           </li>
           <li class="db-card" data-spacing="small">
             <img
               src="/assets/custom/efficiency.svg"
               width="150"
               height="150"
-              alt="Efficiency Illustration"
+              alt=""
             />
-            <h3>We are efficient</h3>
-            <ul>
-              <li>Framework</li>
-              <li>Sprache (Dev-Design)</li>
-            </ul>
+            <h3>Efficient</h3>
+            <p>
+              <strong>One system</strong> does the trick – saving time, money,
+              and nerves for all stakeholders.
+            </p>
           </li>
         </ul>
       </section>
@@ -139,9 +135,7 @@ <h3>We are efficient</h3>
         <div class="db-bg-informational-transparent-semi">
           <h2>Our vision</h2>
           <h3 data-variant="light">
-            Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas
-            platea tempor laoreet in tellus pellentesque velit. Auctor vitae
-            tortor in volutpat.
+            For the future of mobility, we design excellent digital solutions.
           </h3>
         </div>
       </section>
@@ -154,19 +148,28 @@ <h3 data-variant="light">
         />
       </section>
       <section id="section-storytime" class="section-with-max-width">
-        <h2>It’s Storytime!</h2>
-        <h3 data-variant="light">Our history</h3>
+        <h2>With arms wide open</h2>
         <div>
-          <img src="assets/custom/box.svg" alt="Box" />
+          <img src="assets/custom/box.svg" alt="" width="111" height="122" />
+          <p>
+            Truth be told, it wasn't easy. Companies like Deutsche Bahn –
+            running for more than a century – have more walls than meet the eye,
+            separating processes, ideas, and people. We challenged the status
+            quo.
+            <strong
+              >No more tossing designs over walls and expecting magic from the
+              developer’s side:</strong
+            >
+            to create digital solutions, we work together right from the start.
+            So, what's next?
+          </p>
           <p>
-            Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas
-            platea tempor laoreet in tellus pellentesque velit. Auctor vitae
-            tortor in volutpat. Lorem dolor fermentum eget neque amet sapien
-            ultrices cursus elit. Consectetur nisl suspendisse aliquam nunc ut
-            commodo mattis. Morbi faucibus pretium suspendisse vel pellentesque
-            volutpat. Blandit in mattis libero quam. Sed sed porta mus nam nam
-            ipsum nascetur augue. Eu maecenas erat sociis morbi arcu dolor.
-            Massa commodo ut vitae sit nec.
+            As railway enthusiasts – or "Superbahner" as we say in German – we
+            don't think internally or nationally. We think European. Just as our
+            trains cross borders into neighboring countries, we operate
+            <strong>our design system as open source</strong>. In mobility,
+            there are no limits, only the start of new partnerships. Our design
+            system serves as a bridge – by all, for all.
           </p>
         </div>
       </section>
@@ -208,7 +211,7 @@ <h4>Maximilian</h4>
           </li>
         </ul>
         <a class="db-button" data-variant="primary" href="mailto:"
-          >Contact the team</a
+          >Meet the team</a
         >
       </section>
     </main>
