Update event and solutions page css

Signed-off-by: mohin7 <mohin@appscode.com>
appscode · Aug 20, 2024 · 940574a · 940574a
1 parent 99ff97e
commit 940574a
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 36 deletions.
diff --git a/data/events.json b/data/events.json
@@ -1,26 +1,26 @@
 [
   {   
       "id":"1",
-      "date": "AUG 01 - 04, 2024",
-      "sort_date": "2024-08-01",
-      "title": "1 AUG KubeCon | CloudNativeCon 2024",
-      "description": "AUG The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities in Salt Lake City, Utah from November 12-15, 2024.",
-      "meet_with_us": "#link1",
-      "event_details": "#link2"
+      "date": "SEP 03 - 04, 2024",
+      "sort_date": "2024-09-03",
+      "title": "Container Days Conference",
+      "description": "The CDS family grows every year and you can't miss this fantastic learning experience on #Kubernetes, #CloudNative, #ContainerSecurity, #DevOps, #GitOps, #EdgeComputing #CloudComputing, #Cloud Containers and much more. Kubernauts from across the globe come to speak, network and exchange on the cloud native technologies hottest topics and trends.",
+      "meet_with_us": "https://appscode.com/contact/",
+      "event_details": "https://www.containerdays.io/containerdays-conference-2024/"
   },
   {   
       "id":"2",
-      "date": "SEP 01 - 04, 2024",
-      "sort_date": "2024-09-01",
-      "title": "2 KubeCon | CloudNativeCon 2024",
-      "description": "The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities in Salt Lake City, Utah from November 12-15, 2024.",
-      "meet_with_us": "#link1",
-      "event_details": "#link2"
+      "date": "OCT 01 - 02, 2024",
+      "sort_date": "2024-10-01",
+      "title": "October Conference",
+      "description": "The CDS family grows every year and you can't miss this fantastic learning experience on #Kubernetes, #CloudNative, #ContainerSecurity, #DevOps, #GitOps, #EdgeComputing #CloudComputing, #Cloud Containers and much more. Kubernauts from across the globe come to speak, network and exchange on the cloud native technologies hottest topics and trends.",
+      "meet_with_us": "https://appscode.com/contact/",
+      "event_details": "https://www.containerdays.io/containerdays-conference-2024/"
   },
   {
       "id":"3",
-      "date": "OCT 02 - 04, 2024",
-      "sort_date": "2024-10-02",
+      "date": "OCT 05 - 06, 2024",
+      "sort_date": "2024-10-05",
       "title": "3 ContainerDays Conference",
       "description": "The CDS family grows every year and you can't miss this fantastic learning experience...",
       "meet_with_us": "#link1",

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -86,7 +86,6 @@
       "c1",
       "c1_tab",
       "calendly-inline-widget",
-      "card",
       "card-body",
       "card-bottom",
       "card-icon",
@@ -97,6 +96,8 @@
       "ceo-image",
       "ceo-message",
       "ceo-message-wrapper",
+      "circle",
+      "circle-1",
       "circle-shape",
       "client-info",
       "client-thumb",
@@ -181,12 +182,10 @@
       "gallery-area",
       "gallery-card",
       "gallery-wrapper",
-      "gap-4",
       "go-to-top",
       "h-6",
       "h-right-content",
       "has-addons",
-      "has-background-black-bis",
       "has-background-white-bis",
       "has-text-centered",
       "has-text-centered-desktop",
@@ -214,7 +213,6 @@
       "hero-area-button",
       "hero-area-inner-2",
       "icon",
-      "id-centered",
       "illustration",
       "illustration-1",
       "illustration-area",
@@ -227,8 +225,6 @@
       "is-10-desktop",
       "is-10-tablet",
       "is-12",
-      "is-2",
-      "is-2-desktop",
       "is-3",
       "is-4",
       "is-4-desktop",
@@ -237,7 +233,6 @@
       "is-6",
       "is-6-desktop",
       "is-6-tablet",
-      "is-6-touch",
       "is-64x64",
       "is-7",
       "is-8",
@@ -251,7 +246,6 @@
       "is-centered",
       "is-checkradio",
       "is-danger",
-      "is-elipsis-4",
       "is-ellipsis-2",
       "is-ellipsis-3",
       "is-ellipsis-4",
@@ -268,6 +262,8 @@
       "is-fullwidth",
       "is-gap-4",
       "is-gap-8",
+      "is-ghost",
+      "is-gost",
       "is-gradient",
       "is-half-mobile",
       "is-half-tablet",
@@ -311,6 +307,7 @@
       "is-small",
       "is-sticky",
       "is-success",
+      "is-text",
       "is-tinny",
       "is-transparent",
       "is-two-thirds-desktop",
@@ -396,6 +393,8 @@
       "outlined-bg-buttons",
       "owl-carousel",
       "p-0",
+      "p-4",
+      "p-8",
       "package-area",
       "partner",
       "partner-hero-area",
@@ -426,7 +425,6 @@
       "provisioing",
       "provisioning",
       "pt-0",
-      "pt-40",
       "quote-icon",
       "reg-illustration",
       "register-notification",
@@ -470,7 +468,6 @@
       "social-connect-area",
       "social-link",
       "social-prove-brand-area",
-      "solution",
       "solution-page",
       "spam-message",
       "speaker-image",

diff --git a/layouts/_default/events.html b/layouts/_default/events.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
 
-<section class="events-page">
+<section class="events-page bg-gradient-1" style="background-image: url(../assets/images/gradient-bg.webp);">
     <div class="container">
         <div class="columns is-multiline">
             {{ $currentDate := now.Format "2006-01-02" }}  <!-- Format current date -->
@@ -15,6 +15,7 @@
             {{ range $event := $lastEvent }}
             <div class="column is-full-mobile is-6-tablet is-8-desktop">
                 <div class="single-event primary-gradient">
+                    <span class="circle circle-1"></span>
                     <div class="is-flex is-justify-content-space-between">
                         <span class="date">{{ $event.date }}</span>
                         <span class="badge tag">UPCOMING</span>
@@ -24,7 +25,7 @@ <h2>{{ $event.title }}</h2>
 
                     <div class="buttons is-gap-8">
                         <a href="{{ $event.meet_with_us }}" class="button ac-button is-primary">Join with us</a>
-                        <a href="{{ $event.event_details }}" class="button ac-button is-transparent has-text-white">Event Details</a>
+                        <a href="{{ $event.event_details }}" target="_blank" class="button ac-button is-transparent has-text-white">Event Details</a>
                     </div>
                 </div>
             </div>
@@ -45,7 +46,7 @@ <h2>{{ $event.title }}</h2>
 
                     <div class="buttons is-gap-8">
                         <a href="{{ $event.meet_with_us }}" class="button ac-button is-outlined">Join with us</a>
-                        <a href="{{ $event.event_details }}" class="button ac-button is-transparent">Event Details</a>
+                        <a href="{{ $event.event_details }}" target="_blank" class="button ac-button is-transparent p-8">Event Details</a>
                     </div>
                 </div>
             </div>

diff --git a/layouts/_default/solutions.html b/layouts/_default/solutions.html
@@ -3,8 +3,8 @@
 {{ end }}
 
 {{ define "main" }}
-<div class="solution-page">
-    <section class="hero-area has-background-white-bis">
+<div class="solution-page bg-gradient-1" style="background-image: url(../assets/images/gradient-bg.webp);">
+    <section class="hero-area">
         <div class="container">
         <div class="columns is-centered">
             <div class="column is-5 has-text-centered">

diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
@@ -25902,8 +25902,21 @@ Responsive Classes
   border: 1px solid #e7e7e7;
   padding: 32px;
   border-radius: 4px;
-  background-color: #F7F8F8;
+  background-color: #ffffff;
   height: 100%;
+  position: relative;
+}
+.single-event .circle {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  border: 20px solid rgba(255, 255, 255, 0.2);
+  transform: none;
+  animation: none;
+  top: auto;
+  left: auto;
+  bottom: -60px;
+  right: -30px;
 }
 .single-event.primary-gradient {
   color: #ffffff;
@@ -25932,34 +25945,67 @@ Responsive Classes
   background: linear-gradient(90deg, rgb(42, 126, 83) 0%, rgb(0, 166, 81) 100%);
 }
 
+.solution-page {
+  position: relative;
+  z-index: 1;
+}
 .solution-page .hero-area {
   padding: 140px 0 100px;
+  position: relative;
+  z-index: 2;
+}
+.solution-page .hero-area::after {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: 100px;
+  width: 100%;
+  height: 100%;
+  background-image: url(http://localhost:1313/assets/images/shape/decorative-el.svg);
+  background-repeat: no-repeat;
+  transform: translate(2);
+  z-index: -1;
 }
 .solution-page .hero-area h1 {
   font-size: 48px;
   font-weight: 700;
   line-height: 120%;
 }
-.solution-page .right-content {
+
+.single-solution {
+  background-color: #fff;
+}
+.single-solution .left-content h3 {
+  font-size: 32px;
+  font-weight: 700;
+}
+.single-solution .left-content p {
+  margin-bottom: 32px;
+}
+.single-solution .right-content {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
   gap: 16px;
 }
-.solution-page .right-content .single-card {
+.single-solution .right-content .single-card {
   background-color: #F7F8F8;
   border: 1px solid #e7e7e7;
   border-radius: 4px;
   display: block;
   padding: 16px;
+  transition: 0.3s ease-in-out;
+}
+.single-solution .right-content .single-card:hover {
+  box-shadow: 1px 11px 114px rgba(0, 0, 0, 0.15);
 }
-.solution-page .right-content .single-card h5 {
+.single-solution .right-content .single-card h5 {
   margin-bottom: 8px;
 }
-.solution-page .right-content .single-card p {
+.single-solution .right-content .single-card p {
   color: #515D63;
   margin-bottom: 8px;
 }
-.solution-page .right-content .single-card button {
+.single-solution .right-content .single-card button {
   border: none;
   background-color: transparent;
   box-shadow: none;

diff --git a/static/assets/sass/pages/_events.scss b/static/assets/sass/pages/_events.scss
@@ -1,12 +1,27 @@
 .events-page {
   padding: 80px 0 32px;
 }
+
 .single-event {
   border: 1px solid $ac-white-light;
   padding: 32px;
   border-radius: 4px;
-  background-color: #F7F8F8;
+  background-color: #ffffff;
   height: 100%;
+  position: relative;
+
+  .circle {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border: 20px solid rgba(255,255,255,0.2);
+    transform: none;
+    animation: none;
+    top: auto;
+    left: auto;
+    bottom: -60px;
+    right: -30px;
+  }
 
   &.primary-gradient {
     color: $ac-white;

diff --git a/static/assets/sass/pages/_solutions.scss b/static/assets/sass/pages/_solutions.scss
@@ -1,12 +1,43 @@
 .solution-page {
+  position: relative;
+  z-index: 1;
   .hero-area {
     padding: 140px 0 100px;
+    position: relative;
+    z-index: 2;
+    &::after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 100px;
+      width: 100%;
+      height: 100%;
+      background-image: url(http://localhost:1313/assets/images/shape/decorative-el.svg);
+      background-repeat: no-repeat;
+      transform: translate(2);
+      z-index: -1;
+    }
+
     h1 {
       font-size: 48px;
       font-weight: 700;
       line-height: 120%;
     }
   }
+
+}
+.single-solution {
+  background-color: #fff;
+  .left-content {
+    h3 {
+      font-size: 32px;
+      font-weight: 700;
+    }
+    p{
+      margin-bottom: 32px;
+    }
+  }
+
   .right-content {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
@@ -17,6 +48,12 @@
       border-radius: 4px;
       display: block;
       padding: 16px;
+      transition: 0.3s ease-in-out;
+
+      &:hover {
+        box-shadow: 1px 11px 114px rgba(0,0,0,.15);
+      }
+
       h5{
         margin-bottom: 8px;
       }