@digigov/css 0.13.1 → 0.16.0

package/src/pages/index.js

@@ -4,73 +4,50 @@ import Image from 'next/image';
 export default function Home() {
   return (
     <div className="example">
-      <header className="govgr-header">
-        <div className="govgr-header-container">
-          <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
-            <svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
-              <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
-            </svg>
-        </div>
-      </header>
-      <nav className="govgr-horizontal-nav test-header-nav">
-        <div className="govgr-horizontal-nav__container">
-          <ul className="govgr-nav-bar">
-            <li className="active"> <a href=""> Αρχική </a></li>
-            <li> <a href="/form"> Καταχώρηση φόρμας </a></li>
-            <li> <a href=""> Νέα</a></li>
-            <li><a href=""> Επικοινωνία </a></li>
-          </ul>
-        </div>
-      </nav>
+
       <header className="govgr-header">
         <div className="govgr-header__container">
-          <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
-            <svg class="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
-              <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
-            </svg>
-        </div>
-    </header>
-    <nav className="govgr-horizontal-nav">
+          <div className="govgr-header__content">
+            <a href="https://www.gov.gr/">
+              <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+            </a>  
+            <a href="https://www.gov.gr/">
+              <img className="govgr-header-secondary-logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" />
+            </a>
+            <a href="/" className="govgr-header-title">Service name</a>
+          </div>
+            <svg className="govgr-burger-icon" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/></svg>
+          </div>
+      </header> 
+      <nav className="govgr-horizontal-nav">
         <div className="govgr-horizontal-nav__container">
-            <a href="" className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active"> Αρχική </a>
-            <a href="#" className="govgr-horizontal-nav__item"> Καταχώρηση φόρμας </a>
-            <a href="#" className="govgr-horizontal-nav__item"> Νέα</a>
-            <a href="#" className="govgr-horizontal-nav__item"> Επικοινωνία </a>
+          <a href="" className="govgr-horizontal-nav__item govgr-horizontal-nav__item-active"> Home </a>
+          <a href="#" className="govgr-horizontal-nav__item"> Form registration </a>
+          <a href="#" className="govgr-horizontal-nav__item"> News </a>
+          <a href="#" className="govgr-horizontal-nav__item"> Contact </a>
         </div>
-    </nav>
+      </nav>
 
-    <svg class="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
-      <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
-    </svg>
+      <svg className="govgr-burger-icon govgr-burger-icon--active" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > 
+        <rect id="govgr-burger-icon__line-1" width="20" height="3.3"/><rect id="govgr-burger-icon__line-2" width="20" height="3.3"/><rect id="govgr-burger-icon__line-3" width="20" height="3.3"/>
+      </svg>
 
 
-      {/*new className: "govgr-masthead" -->
-      new className: "govgr-background-dark" */}
       <div className="govgr-masthead govgr-background-dark">
         <div className="govgr-width-container">
           <div className="govgr-main-wrapper">
             <div className="govgr-grid-column-two-thirds">
               <img className="govgr-masthead-logo header-logo" src="https://dilosi.services.gov.gr/minedu-logo.svg" />
-
-              <h1 className="govgr-heading-xl"> Όνομα Υπηρεσίας </h1>
-              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
-                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των πολιτών.
+              <h1 className="govgr-heading-xl"> Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
+              <p className="govgr-masthead-body">
+                Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν ήδη γίνει.
+              <a className="govgr-link" href="#">Μάθετε αν είστε δικαιούχος</a>
               </p>
-              <p className="govgr-hint">Τελευταία ενημέρωση: 05/07/2021 </p>
-
-              <a href="#" className="govgr-link hover-bold-underline"> Σύνδεσμος</a>
-              <br />
-              <a href="#" className="govgr-link govgr-link--no-underline hover-bold-underline"> Sample link</a>
-
-              <div className="govgr-button-group">
-
-                <button className="govgr-btn govgr-btn-primary">
-                  Συνέχεια
-                  <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
-                </button>
-                <button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
-                <button className="govgr-btn govgr-btn-warning">Ακύρωση</button>
-              </div>
+              <p className="govgr-hint">Τελευταία ενημέρωση: 08/12/2021 </p>
+              <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
+                Ξεκινήστε εδώ
+                <svg viewBox="0 0 24 24" className="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -79,7 +56,6 @@ export default function Home() {
       <div className="govgr-width-container">
         <div className="govgr-main-wrapper">
           <div className="govgr-grid-column-two-thirds">
-            {/*<h1>Design Example</h1> */}
 
             <span className="govgr-caption-xl"> Caption for h1 </span>
             <h1 className="govgr-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
@@ -88,7 +64,7 @@ export default function Home() {
             <span className="govgr-caption-m"> Caption for h3 </span>
             <h3 className="govgr-heading-m">Heading 3</h3>
             <h4 className="govgr-heading-s">Heading 4</h4>
-            <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
+            <p className="govgr-body">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
               δημιουργία ενιαίων και φιλικών
               ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση όλων των
               <span className="tooltip">πολιτών
@@ -111,7 +87,6 @@ export default function Home() {
             <br />
             <details className="govgr-details">
               <summary className="govgr-details__summary"> Sample link</summary>
-              {/*<a href="#" className="details-link"> <span className="govgr-caret-right"></span> Sample link</a> */}
               <div className="govgr-details__summary-text">
                 <p className="govgr-body">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για
                   τη δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των
@@ -123,7 +98,7 @@ export default function Home() {
 
             <button className="govgr-btn govgr-btn-primary govgr-btn-cta">
               Είσοδος στην υπηρεσία
-              <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
+              <svg viewBox="0 0 24 24" className="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
             </button>
             <div className="govgr-button-group">
               <button className="govgr-btn govgr-btn-primary">
@@ -134,7 +109,7 @@ export default function Home() {
             </div>
 
             <a href="#" className="govgr-back-link">
-              <svg class="govgr-caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z"/></svg>
+              <svg className="govgr-caret--left" viewBox="0 0 24 24" aria-hidden="true"><path d="M18,22V2L6,12L18,22z"/></svg>
               Πίσω
             </a>
             <br />
@@ -157,122 +132,105 @@ export default function Home() {
             </div>
             <hr className="govgr-section-break" />
 
-            <blockquote>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                application.
-              </p>
-            </blockquote>
-            {/*new className: "error-msg" */}
-            <blockquote className="error-msg">
-              <h4>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                application.
-              </h4>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                application.
-              </p>
+            <blockquote className="govgr-blockquote">
+              Η διαδικασία έκδοσης του διαβατηρίου σας μπορεί να διαρκέσει εώς 10 μέρες, εφόσον η αίτηση σας δεν έχει λάθη.
             </blockquote>
 
             <div className="govgr-error-summary">
               <h3 className="govgr-heading-s">Υπήρξε κάποιο πρόβλημα</h3>
-              <p className="govgr-body">
-                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                  application.
-              </p>
+              <a className="govgr-link" href="#"> Πρέπει να συμπληρώσετε το έτος</a>
             </div>
+            
             <div className="govgr-panel govgr-panel--confirmation">
               <h1 className="govgr-panel__title">Η φόρμα υποβλήθηκε επιτυχώς</h1>
               <div className="govgr-panel__body">
-                  Ο κωδικός της φόρμας είναι:
-                  <strong>HDJ2123F</strong>
+                Ο κωδικός εγγράφου <br />
+                <strong>HDJ2123F</strong>
               </div>
             </div>
 
-            {/*new className: "info-msg" */}
             <div className="govgr-warning-text">
-              <span className="info-icon">!</span>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                application.
-              </p>
+              <span className="govgr-warning-text__icon">!</span>
+                <strong className="govgr-warning-text__text">
+                  <span className="govgr-warning-text__assistive">Προσοχή</span>
+                  Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
+                </strong>
             </div>
 
-            <div className="summary-list flex flex-wrap">
-              <div className="summary-row row">
-                <div className="flex-3">
-                  <h6>Όνομα</h6>
-                </div>
-                <div className="flex-7">Κατερίνα</div>
-                <div className="flex-2"> <a className="govgr-link" href="#">Αλλαγή</a></div>
-
+            <dl className="govgr-summary-list">
+              <div className="govgr-summary-list__row">
+                <dt className="govgr-summary-list__key">
+                  Όνομα
+                </dt>
+                <dd className="govgr-summary-list__value">
+                  Γιώργος Παπαδόπουλος
+                </dd>
+                <dd className="govgr-summary-list__actions">
+                  <a className="govgr-link" href="#">
+                    Αλλαγή<span className="govgr-visually-hidden"> ονόματος</span>
+                  </a>
+                </dd>
               </div>
-              <div className="summary-row row">
-                <div className="flex-3">
-                  <h6>Επώνυμο</h6>
-                </div>
-                <div className="flex-7">Μπράνη</div>
-                <div className="flex-2 "> <a href="#" className="govgr-link "></a></div>
+              <div className="govgr-summary-list__row ">
+                <dt className="govgr-summary-list__key">
+                  Ημερομηνία Γέννησης
+                </dt>
+                <dd className="govgr-summary-list__value">
+                  11 Μαϊου 1990
+                </dd>
+                <dd className="govgr-summary-list__actions">
+                  <a className="govgr-link" href="#">
+                    Αλλαγή<span className="govgr-visually-hidden"> ημερομηνίας γέννησης</span>
+                  </a>
+                </dd>
               </div>
-            </div>
-
-            {/*<div className="govgr-tabs">
-            <h4 className="tab-title">Περιεχόμενα</h4>
-            <div className="tab">
-              <button className="tablink active" >παράδειγμα 1</button>
-              <button className="tablink" >παράδειγμα 2</button>
-              <button className="tablink" >άλλο παράδειγμα</button>
-            </div>
-          
-            <div id="tab1" className="tab-content active">
-              <h3>παράδειγμα 1</h3>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.    
-              </p>           
-            </div>
-            
-            <div id="tab2" className="tab-content">
-              <h3>παράδειγμα 2</h3>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
-              </p>
-            </div>
-            
-            <div id="tab3" className="tab-content">
-              <h3>άλλο παράδειγμα</h3>
-              <p>
-                It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
-              </p>           
-            </div>
-          </div> */}
-
-            <div className="govgr-tabs">
-              <h6 className="tab-title">Περιεχόμενα</h6>
-              <div className="tab">
-                <a className="govgr-link tablink active">παράδειγμα 1</a>
-                <a className="govgr-link tablink">παράδειγμα 2</a>
-                <a className="govgr-link tablink">άλλο παράδειγμα</a>
+              <div className="govgr-summary-list__row">
+                <dt className="govgr-summary-list__key">
+                  Τηλέφωνο επικοινωνίας
+                </dt>
+                <dd className="govgr-summary-list__value">
+                  6941234567
+                </dd>
+                <dd className="govgr-summary-list__actions">
+                  <a className="govgr-link" href="#">
+                    Αλλαγή<span className="govgr-visually-hidden"> τηλεφώνου επικοινωνίας</span>
+                  </a>
+                </dd>
               </div>
+            </dl>
 
-              <div id="tab1" className="tab-content active">
-                <h3>παράδειγμα 1</h3>
-                <p>
-                  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                  application.
-                </p>
+            <div className="govgr-tabs">
+              <h6 className="govgr-heading-s govgr-tabs__title">Περιεχόμενα</h6>
+              <ul className="govgr-tabs__list" role="tablist">
+                <li className="govgr-tabs__list-item govgr-tabs__list-item-selected" role="presentation">
+                  <a className="govgr-tabs__tab" href="#user-details" id="tab_user-details" role="tab" aria-controls="past-week" aria-selected="false" tabindex="-1">
+                    Στοιχεία πολίτη
+                  </a>
+                </li>
+                <li className="govgr-tabs__list-item" role="presentation">
+                  <a className="govgr-tabs__tab" href="#user-cases" id="tab_user-cases" role="tab" aria-controls="user-cases" aria-selected="false" tabindex="-1">
+                    Οι υποθέσεις τους
+                  </a>
+                </li>
+                <li className="govgr-tabs__list-item" role="presentation">
+                  <a className="govgr-tabs__tab" href="#history" id="tab_history" role="tab" aria-controls="history" aria-selected="false" tabindex="-1">
+                    Ιστορικό
+                  </a>
+                </li>
+              </ul>
+              <div id="tab1" className="govgr-tabs__panel govgr-tabs__panel-visible">
+                <h3 className="govgr-heading-l">Στοιχεία πολίτη</h3>
+                <p className="govgr-body">Πληροφορίες</p>
               </div>
-
-              <div id="tab2" className="tab-content">
-                <h3>παράδειγμα 2</h3>
+              <div id="tab2" className="govgr-tabs__panel">
+                <h3 className="govgr-heading-m">παράδειγμα 2</h3>
                 <p>
                   It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
                   application.
                 </p>
               </div>
-
-              <div id="tab3" className="tab-content">
-                <h3>άλλο παράδειγμα</h3>
+              <div id="tab3" className="govgr-tabs__panel">
+                <h3 className="govgr-heading-m">άλλο παράδειγμα</h3>
                 <p>
                   It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
                   application.
@@ -280,208 +238,178 @@ export default function Home() {
               </div>
             </div>
 
-            <div className="accordion" id="accordion-default">
-              <div className="accordion-section selected-section">
-                <div className="accordion-section-header">
-                  <a className="accordion-section-heading govgr-link" id="accordion-heading-1">
-                    Παράδειγμα 1
-                  </a>
+            <div className="govgr-accordion" id="govgr-accordion__default">
+              <div className="govgr-accordion__section govgr-accordion__section" open>
+                <div className="govgr-accordion__section-header">
+                  <h2 className="govgr-accordion__section-heading" id="govgr-accordion__heading-1">
+                    <span className="govgr-accordion__section-button"> Δικαστήρια </span>
+                  </h2>
                 </div>
-                <div id="accordion-content-1" className="accordion-section-content" aria-labelledby="accordion-heading-1">
-                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                    application.</p>
+                <div id="govgr-accordion__content-1" className="govgr-accordion__section-content" aria-labelledby="govgr-accordion__heading-1">
+                  <p className="govgr-body">
+                    Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+                    επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+                  </p>
+                  <ul className="govgr-list">
+                    <li>
+                      <a className="govgr-link" href="#">
+                        Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</a>
+                    </li>
+                    <li>
+                      <a className="govgr-link" href="#"> Ηλεκτρονικές δικαστικές αποφάσεις</a>
+                    </li>
+                    <li><a className="govgr-link" href="#"> Πιστοποιητικά δικαστηρίων</a></li>
+                  </ul>
                 </div>
               </div>
-              <div className="accordion-section ">
-                <div className="accordion-section-header">
-                  <a className="accordion-section-heading govgr-link" id="accordion-heading-2">
-                    Παράδειγμα 2
-                  </a>
+              <div className="govgr-accordion__section">
+                <div className="govgr-accordion__section-header">
+                  <h2
+                    className="govgr-accordion__section-heading"
+                    id="govgr-accordion__heading-2">
+                    <span className="govgr-accordion__section-button"> Δικόγραφα </span>
+                  </h2>
                 </div>
-                <div id="accordion-content-2" className="accordion-section-content" aria-labelledby="accordion-heading-2">
-                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                    application.</p>
+                <div id="govgr-accordion__content-2" className="govgr-accordion__section-content" aria-labelledby="govgr-accordion__heading-2">
+                  <p className="govgr-body">
+                    Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+                    επιλεγμένο γεγονός ζωής.
+                  </p>
+                  <ul className="govgr-list">
+                    <li>
+                      <a className="govgr-link" href="#"> Αντίγραφο πρακτικών υπόθεσης</a>
+                    </li>
+                    <li>
+                      <a className="govgr-link" href="#">
+                        Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)</a>
+                    </li>
+                  </ul>
                 </div>
               </div>
-              <div className="accordion-section ">
-                <div className="accordion-section-header">
-                  <a className="accordion-section-heading govgr-link" id="accordion-heading-3">
-                    Άλλο ένα παράδειγμα
-                  </a>
+              <div className="govgr-accordion__section">
+                <div className="govgr-accordion__section-header">
+                  <h2 className="govgr-accordion__section-heading" id="govgr-accordion__heading-3">
+                    <span className="govgr-accordion__section-button">
+                      Καταστήματα κράτησης
+                    </span>
+                  </h2>
                 </div>
-                <div id="accordion-content-3" className="accordion-section-content" aria-labelledby="accordion-heading-3">
-                  <p>It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the
-                    application.</p>
+                <div id="govgr-accordion__content-3" className="govgr-accordion__section-content" aria-labelledby="govgr-accordion__heading-3">
+                  <p className="govgr-body">
+                    Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+                    επιλεγμένο γεγονός ζωής.
+                  </p>
+                  <ul className="govgr-list">
+                    <li>
+                      <a className="govgr-link" href="#">
+                        Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</a>
+                    </li>
+                    <li><a className="govgr-link" href="#"> Εκπαίδευση αποφυλακισμένων</a></li>
+                  </ul>
                 </div>
               </div>
             </div>
-
-            <div className="colors">
-              <div className="bg-secondary-50">A</div>
-              <div className="c-secondary-50">A</div>
-              <div className="c-secondary-200">A</div>
-              <div className="c-secondary-400">A</div>
-              <div className="c-secondary-600">A</div>
-              <div className="c-secondary-800">A</div>
-              <div className="c-primary">A</div>
-              <div className="c-primary-200">A</div>
-
-            </div>
-            <div className="colors">
-              <div className="c-base-100">A</div>
-              <div className="c-base-150">A</div>
-              <div className="c-base-200">A</div>
-              <div className="c-base-300">A</div>
-              <div className="c-neutral">A</div>
-              <div className="c-neutral-focus">A</div>
-              <div className="c-info"></div>
-              <div className="c-success"></div>
-              <div className="c-warning"></div>
-              <div className="c-error"></div>
-            </div>
-
           </div>
           <div className="govgr-grid-column-one-third">
             <h4>Σχετικοί Σύνδεσμοι</h4>
-            <nav>
-              <ul className="nav-list">
-                <li className="nav-list-item active">
-                  <a className="govgr-link" href="#"> Σύνδεσμος 1</a>
-                </li>
-                <li className="nav-list-item">
-                  <a className="govgr-link" href="#"> Σύνδεσμος 2</a>
-                </li>
-                <li className="nav-list-item">
-                  <a className="govgr-link" href="#"> Σύνδεσμος 3</a>
-                </li>
-              </ul>
+            <nav className="govgr-vertical-nav">
+              <a className="govgr-link govgr-vertical-nav__item govgr-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
+              <a className="govgr-link govgr-vertical-nav__item" href="#"> Σύνδεσμος 2</a>
+              <a className="govgr-link govgr-vertical-nav__item" href="#"> Σύνδεσμος 3</a>
             </nav>
-            {/*<nav>
-            <ul className="nav-list">
-              <li className="nav-list-item active-item">
-                <a href="#" className="govgr-link--no-underline "> Σύνδεσμος 1</a>
-              </li>
-              <li className="nav-list">
-                <a href="#" className="nav-list-item govgr-link--no-underline "> Σύνδεσμος 2</a>
-              </li>
-              <li className="nav-list">
-                <a href="#" className="nav-list-item govgr-link--no-underline "> Σύνδεσμος 3</a>
-              </li>
-            </ul>
-          </nav> */}
-
-          </div>
-        </div>
-      </div>
-
-      <div className="govgr-masthead govgr-background-dark important-bg">
-        <div className="govgr-width-container">
-          <div className="govgr-main-wrapper">
-            <div className="govgr-grid-column-two-thirds">
-              <h1 className="govgr-heading-xl">Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
-              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης για τη
-                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των πολιτών.
-              </p>
-              <a href="#" className="hover-bold-underline"> Σύνδεσμος</a>
-
-              <button className="govgr-btn govgr-btn-primary "> Συνέχεια </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="govgr-masthead info-bg">
-        <div className="govgr-width-container">
-          <div className="govgr-main-wrapper">
-            <div className="govgr-grid-column-two-thirds">
-              <h1 className="govgr-heading-xl">Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR </h1>
-              <p className="p">Ο παρών οδηγός δημιουργήθηκε για να καλύψει τις συνεχώς αυξανόμενες ανάγκες της δημόσιας διοίκησης
-                για τη
-                δημιουργία ενιαίων και φιλικών ψηφιακών εμπειριών χρήσης, με γνώμονα πάντα την εξυπηρέτηση των
-                πολιτών.
-              </p>
-              <a className="govgr-link" href="#"> Σύνδεσμος</a>
-
-              <button className="govgr-btn govgr-btn-primary"> Συνέχεια </button>
-            </div>
           </div>
         </div>
       </div>
 
-
-      <div className="govgr-width-container">
-        <div className="govgr-main-wrapper">
-          <div className="govgr-grid-column-two-thirds">
-
-            <h1 className="govgr-heading-xl">Καταχώρηση φόρμας</h1>
-
-            <p className="p">Παρακάτω, θα οδηγηθείτε στην σελίδα της καταχώρησης μιας φόρμας. Εμφανίζονται ενδεικτικά παραδείγματα.</p>
-
-            <a href="/form" className="govgr-btn govgr-btn-primary govgr-btn-cta">
-              Συμπληρώστε την φόρμα
-            <svg viewBox="0 0 24 24" class="govgr-arrow--right" focusable="false" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"/> </svg>
-            </a>
-
-          </div>
-        </div>
-      </div>
       <footer className="govgr-footer" role="contentinfo">
         <div className="govgr-width-container">
           <div className="govgr-footer__meta">
             <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
               <div className="govgr-footer__content">
-
-                <img className="govgr-footer__logo" src="https://www.gov.gr/gov_gr_logo.svg" />
                 <p className="govgr-footer__licence-description">
-                  Υλοποίηση από το <a href="https://grnet.gr/" target="_blank" className="govgr-link">ΕΔΥΤΕ</a> για το <a href="https://mindigital.gr/" className="govgr-link">Υπουργείο Ψηφιακής Διακυβέρνησης</a>
+                  © Copyright 2021 - Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
                 </p>
               </div>
             </div>
             <div className="govgr-footer__meta-item">
-              <img className="govgr-footer__logo" src="https://www.gov.gr/gov_gr_logo.svg" />
+              <img className="govgr-footer__government-logo" src="/img/government-logo2.svg"/>
             </div>
-
           </div>
         </div>
       </footer>
 
       <footer className="govgr-footer" role="contentinfo">
         <div className="govgr-width-container">
-            <div className="govgr-footer__meta">
-                <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
-                    <div className="govgr-footer__content">
-                        <h2 className="govgr-visually-hidden">Σύνδεσμοι</h2>
-                        <ul className="govgr-footer__inline-list">
-                            <li className="govgr-footer__inline-list-item">
-                                <a className="govgr-footer__link" href="#1">
-                                Σύνδεσμος 1
-                                </a>
-                            </li>
-                            <li className="govgr-footer__inline-list-item">
-                                <a className="govgr-footer__link" href="#2">
-                                Σύνδεσμος 2
-                                </a>
-                            </li>
-                            <li className="govgr-footer__inline-list-item">
-                                <a className="govgr-footer__link" href="#3">
-                                Σύνδεσμος 3
-                                </a>
-                            </li>
-                        </ul>
-                        <p className="govgr-footer__licence-description">
-                            Υλοποίηση από το <a href="https://grnet.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> ΕΔΥΤΕ <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span>
-                            </a> 
-                            για το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span>
-                            </a>
-                        </p>
-                      </div>
-                    </div>
-                  <div className="govgr-footer__meta-item">
-                      <img className="govgr-footer__government-logo" src="https://www.gov.gr/gov_gr_logo.svg" />
-                  </div>
-              </div>
+          <div className="govgr-footer__navigation">
+            <div className="govgr-footer__section">
+              <h2 className="govgr-footer__heading govgr-heading-s">Λίστα δύο στηλών</h2>
+              <ul className="govgr-footer__list govgr-footer__list--columns-2">
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#1">Σύνδεσμος 1</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#2">Σύνδεσμος 2</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#3">Σύνδεσμος 3</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#4">Σύνδεσμος 4</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#5">Σύνδεσμος 5</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#6">Σύνδεσμος 6</a>
+                </li>
+              </ul>
+            </div>
+            <div className="govgr-footer__section">
+              <h2 className="govgr-footer__heading govgr-heading-s">Λίστα μίας στήλης</h2>
+              <ul className="govgr-footer__list ">
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#1">Σύνδεσμος 1</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#2">Σύνδεσμος 2</a>
+                </li>
+                <li className="govgr-footer__list-item">
+                  <a className="govgr-footer__link" href="#3">Σύνδεσμος 3</a>
+                </li>
+              </ul>
+            </div>
           </div>
-      </footer>
+          <hr className="govgr-footer__section-break"/>
+          <div className="govgr-footer__meta">
+            <div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
+              <div className="govgr-footer__content">   
+                <h2 className="govgr-visually-hidden">Σύνδεσμοι</h2>
+                <ul className="govgr-footer__inline-list">
+                  <li className="govgr-footer__inline-list-item">
+                    <a className="govgr-footer__link" href="#1">Σύνδεσμος 1</a>
+                  </li>
+                  <li className="govgr-footer__inline-list-item">
+                    <a className="govgr-footer__link" href="#2">Σύνδεσμος 2</a>
+                  </li>
+                  <li className="govgr-footer__inline-list-item">
+                    <a className="govgr-footer__link" href="#3">Σύνδεσμος 3</a>
+            </li>
+          </ul>
+            <div className="govgr-footer__content--logos">
+              <img className="govgr-footer__logo" src="/img/government-logo2.svg" />
+              <img className="govgr-footer__logo" src="/img/government-logo2.svg" />
+          </div>
+          <p className="govgr-footer__licence-description">
+            © Copyright 2021 - Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-footer__link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα)</span></a>
+          </p>
+        </div>
+      </div>
+      <div className="govgr-footer__meta-item">
+        <img className="govgr-footer__government-logo" src="/img/government-logo2.svg" />
+      </div>
+    </div>
+  </div>
+</footer>
     </div >
   );
 }