You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@ignite.apache.org by ma...@apache.org on 2021/09/09 17:10:04 UTC

[ignite-website] 01/01: replaced logos section in the homepage with a new one with community recognitions

This is an automated email from the ASF dual-hosted git repository.

mauriciostekl pushed a commit to branch IGNITE-15372
in repository https://gitbox.apache.org/repos/asf/ignite-website.git

commit 819f328b0320506aa7a71fae5363196c78773949
Author: Mauricio Stekl <ma...@stekl.org>
AuthorDate: Thu Sep 9 14:07:36 2021 -0300

    replaced logos section in the homepage with a new one with community recognitions
---
 css/ignite-redesign.css |   2 +-
 images/star.png         | Bin 0 -> 1079 bytes
 images/star.svg         |   3 +
 index.html              | 104 ++++++++-------------------------
 scss/homepage.scss      | 149 +++++++++++++++++++++++++++++-------------------
 5 files changed, 117 insertions(+), 141 deletions(-)

diff --git a/css/ignite-redesign.css b/css/ignite-redesign.css
index 14c0c5c..d62ebee 100644
--- a/css/ignite-redesign.css
+++ b/css/ignite-redesign.css
@@ -1 +1 @@
-@charset "UTF-8";code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=langu [...]
\ No newline at end of file
+@charset "UTF-8";code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=langu [...]
\ No newline at end of file
diff --git a/images/star.png b/images/star.png
new file mode 100644
index 0000000..d0f18dc
Binary files /dev/null and b/images/star.png differ
diff --git a/images/star.svg b/images/star.svg
new file mode 100644
index 0000000..375648e
--- /dev/null
+++ b/images/star.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="60" viewBox="0 0 64 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.0775 23.2518C62.0752 23.2553 62.0725 23.2592 62.0695 23.2634C62.0485 23.2926 62.0147 23.3331 61.9612 23.3867L61.9611 23.3866L61.9516 23.3964C61.4547 23.9071 60.9529 24.4158 60.4482 24.9274L60.4464 24.9292C59.9432 25.4394 59.4371 25.9525 58.9352 26.4683L58.9319 26.4718C57.8371 27.608 56.723 28.729 55.6025 29.8564L55.5996 29.8593C54.4819 30.9839 53.3579 32.115 52.2515 33.2632C50.7805 34.7893 49.2615 36.2992 47.7372 37.7957L47.7372 37.7957L47.7307 37.8022C47.4157 38.1172 47.158 [...]
+</svg>
diff --git a/index.html b/index.html
index cfe4c54..6ac3cfa 100644
--- a/index.html
+++ b/index.html
@@ -49,8 +49,7 @@ under the License.
     <meta name="description"
           content="Apache Ignite&reg; is a distributed database for high-performance computing with in-memory speed.">
     
-          <!-- remember to copy this content to downloads.html --><style>@charset "UTF-8";pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto [...]
-
+          <!-- remember to copy this content to downloads.html -->
 </head>
 
 <body>
@@ -121,96 +120,39 @@ under the License.
         </div>
     </div>
 
-    <section id="github-stats-bar" class="section-bar">
+   
+
+    <section id="community-awards" class="section-block ">
         <div class="container">
-            <div class="row">
-                <div class="col-3 col-sm-6 col-lg-7 col-md-8 github-stats">
-                    <a class="github-link" target="_blank" rel="noopener" href=" https://github.com/apache/ignite"
-                       aria-label="GitHub link"
-                       title="View on GitHub"><i class="fab fa-github" aria-hidden="true"></i></a>
-                    <!-- Github Stargazers -->
-                    <a class="github-button" href="https://github.com/apache/ignite" data-icon="octicon-star"
-                       data-size="large" data-show-count="true" aria-label="Star apache/ignite on GitHub">Star</a>
-
-                    <!-- Github Fork -->
-                    <a class="github-button" target="_blank" rel="noopener" href="https://github.com/apache/ignite/fork"
-                       data-icon="octicon-repo-forked" data-size="large" data-show-count="true"
-                       aria-label="Fork apache/ignite on GitHub">Fork</a>
-
-                    <!-- Github Watch -->
-                    <a class="github-button" target="_blank" rel="noopener"
-                       href="https://github.com/apache/ignite/subscription"
-                       data-icon="octicon-eye" data-size="large" data-show-count="true"
-                       aria-label="Watch apache/ignite on GitHub">Watch</a>
 
+            <div class="row no-gutters">
+                <div class="col-md-4 award">
+                    <div class="star"><span>2</span></div>
+                    <p><strong>on the Top-5</strong>
+                      BIG DATA USER LISTS</p>
+                </div>
+                <div class="col-md-4 award">
+                    <div class="star"><span>2</span></div>
+                    <p><strong>on the Top-5</strong>
+                      USER LISTS</p>
                 </div>
-                <div class="col-9 col-sm-6 col-md-4 col-lg-5 twitter-follow">
-                    <a href="https://twitter.com/ApacheIgnite" class="twitter-follow-button" target="_blank"
-                       rel="noopener" data-show-count="true">Follow
-                        @ApacheIgnite</a>
+                <div class="col-md-4 award">
+                    <div class="star"><span>3</span></div>
+                    <p><strong>on the Top-5</strong>
+                      BIG DATA DEV LISTS</p>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <section id="intro-text" class="section-block ">
-        <div class="container">
-
-            <div class="row poweredby-logos">
-
-                <img src="/images/users-logos/resized/120x60/microsoft.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/microsoft.jpg 120w, /images/users-logos/resized/76x38/microsoft.jpg 76w" alt="Microsoft logo"/>
 
-                <img src="/images/users-logos/resized/120x60/netflix.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/netflix.jpg 120w, /images/users-logos/resized/76x38/netflix.jpg 76w" alt="Netflix logo"/>
-
-                <img src="/images/users-logos/resized/120x60/apple.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/apple.jpg 120w, /images/users-logos/resized/76x38/apple.jpg 76w" alt="Apple logo" style="opacity: 0.6;"/>
-
-                <img src="/images/users-logos/resized/120x60/dreamworks.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/dreamworks.jpg 120w, /images/users-logos/resized/76x38/dreamworks.jpg 76w" alt="Dreamworks logo"/>
-
-                <img src="/images/users-logos/resized/120x60/yahoo_japan.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/yahoo_japan.jpg 120w, /images/users-logos/resized/76x38/yahoo_japan.jpg 76w" alt="Yahoo Japan logo"/>
-
-                <img src="/images/users-logos/resized/120x60/bloomberg.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/bloomberg.jpg 120w, /images/users-logos/resized/76x38/bloomberg.jpg 76w" alt="Bloomberg logo" style="opacity: 0.5;" />
-
-                <img src="/images/users-logos/resized/120x60/sber_bank.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/sber_bank.jpg 120w, /images/users-logos/resized/76x38/sber_bank.jpg 76w" alt="SberBank logo" style="opacity: 0.9;"/>
-
-                <img src="/images/users-logos/resized/120x60/paypal.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/paypal.jpg 120w, /images/users-logos/resized/76x38/paypal.jpg 76w" alt="PayPal logo"/>
-
-                <img src="/images/users-logos/resized/120x60/banco_do_brasil.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/banco_do_brasil.jpg 120w, /images/users-logos/resized/76x38/banco_do_brasil.jpg 76w" alt="Banco do Brasil logo"/>
-
-                <img src="/images/users-logos/resized/120x60/dutchrailways.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/dutchrailways.jpg 120w, /images/users-logos/resized/76x38/dutchrailways.jpg 76w" alt="Dutch Railways logo" />
-
-                <img src="/images/users-logos/resized/120x60/teradata.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/teradata.jpg 120w, /images/users-logos/resized/76x38/teradata.jpg 76w" alt="Teradata logo" style="opacity: 0.7;"/>
-
-                <img src="/images/users-logos/resized/120x60/ups.jpg" width="120" height="60" 
-                sizes="(max-width: 767px) 76px, (min-width: 768px) 120px"
-                srcset="/images/users-logos/resized/120x60/ups.jpg 120w, /images/users-logos/resized/76x38/ups.jpg 76w" alt="UPS logo"/>
+            <div class="row desc no-gutters">
+                <div class="col-md-10 col-12 col-lg-6">
+                    <p>Your favorite streaming, gaming, banking, travel or shopping application probably uses Apache Ignite. Learn why the elite developers and architects selected Ignite to create applications used by millions of people daily!</p>
+                </div>
             </div>
 
             <div class="cta-link">
                 <a href="/use-cases/provenusecases.html"
                    onclick="gtag('event',  'homepage_click', {'event_category':'logos', 'event_label': 'told_ignite_stories'});">
-                    View Ignite Stories...
+                   View Ignite Stories →
                 </a>
             </div>
 
diff --git a/scss/homepage.scss b/scss/homepage.scss
index 1bd6790..ccc1aa3 100644
--- a/scss/homepage.scss
+++ b/scss/homepage.scss
@@ -131,59 +131,75 @@
 
 }
 
-#intro-text {
-    // margin-bottom: 3rem; 
-    padding: 2rem 0 2rem;
-    // box-shadow: inset 0 -11px 10px -10px #c5c5c5;
-    border-bottom: 4px solid #eee;
-    
+#community-awards {
+    background: #0E5997;
+    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.25);
+    padding: 75px 0;
+    color: white;
+    font-size: 16px;
+    line-height: 28px;
 
-    h2 {
-        font-size: 18px;
-        margin-bottom: 1rem;;
-    }
-    p {
-        border-radius: 5px;
-        padding: 0 10rem;
-        font-size: 24px;
-        text-align: center;
-        margin-bottom: 0;
-        font-weight: 300;
-    }
-    .poweredby-logos {
+
+    .award {
+        flex-wrap: nowrap;
         display: flex;
-        // flex-wrap: nowrap;
-        justify-content: center;
-        padding: 0rem 2em 1em;
+        .star {
+            width: 64px;
+            height: 60px;
+            display: flex;
+            background: url('/images/star.png') no-repeat;
+            align-content: center;
+            align-items: center;
+            justify-content: center;
+            margin-right: 1rem;
+            span {
+                display: block;
+                font-weight: 800;
+                font-size: 18px;
+            }
+        }
+        p {
+            width: calc(100% - 80px);
+            font-size: 18px;
+            line-height: 24px;
+            font-family: Open Sans;
+            display: flex;
+            justify-content: center;
+            align-content: center;
+            flex-direction: column;
+            font-weight: normal;
+            margin-bottom: 0;
+            font-weight: 300;
 
+            strong {
+                font-weight: 800;
+            }
+        }
+    }
 
-        img {
-            width: 120px;
-            height: auto;
-            opacity: 0.7;
-            align-self: center;            
-            transition: filter 300ms ease-in-out, 
-                opacity 500ms ease-in-out;
-            filter: grayscale(100%);
-            margin: 0 1rem;
+    .desc {
+        margin-top: 70px;
+        margin-bottom: 1rem;
+        justify-content: center;
 
+        p {
+            font-size: 16px;
+            line-height: 28px;
+            text-align: center;
+            font-weight: 300;
         }
     }
-
     .cta-link {
         text-align: center;
-        margin-top: 1rem;;
-        font-size: 16px;;
-    }
-
-    :hover {
-        .poweredby-logos img {
-            filter: none;
-            opacity: 0.85 !important;
+        a {
+            color: white;
+            font-weight: 300;
         }
     }
 }
 
+
+
 #ignite-summit-banner {
     background-color: #E6F0FA;
 
@@ -544,10 +560,23 @@ section.section-block {
         }
     }
 
-    #intro-text {
+    #community-awards {
+        .award { 
+            p {
+                font-size: 14px;
+                strong {
+                    font-size: 15px;
+                }
+                // line-height: 24px;
+            }
+        }
+        .desc {
+            margin-top: 50px;
+            margin-bottom: 10px;
 
-        .poweredby-logos {
-            padding: 1rem;
+            p {
+                // font-weight: 400;
+            }
         }
     }
        
@@ -698,23 +727,29 @@ section.section-block {
         }
     }
 
-    #ignite-summit-banner {
-        
-        .container {
-            
-            .wrapper {
-                
+    #community-awards {
+        padding: 60px 0;
+
+        .award {
+            margin-bottom: 30px;;
+            justify-content: center;
+            p {
+                max-width: 200px;
             }
         }
-    }
+        .desc {
+            margin-top: 20px;
 
-    #intro-text {
-        .poweredby-logos {
-            img {
-                width: 76px;
-                max-width: 15%;
+            p {
+                font-size: 14px;
+                line-height: 24px;
+                
             }
         }
+        .cta-link a {
+            font-size: 14px;
+            
+        }
     }
 
     #github-stats-bar {
@@ -728,10 +763,6 @@ section.section-block {
         }
     }
 
-    .twitter-follow {
-        // display: none;
-    }
-
     
     #main-banner {
         .container {