add homepage layout and styles (#30)

* add homepage layout and styles

* remove blank title

* add dark mode icon image

Author: josuebran

preview-src/astra-browser.png

@@ -0,0 +1,93 @@
+= {company} Astra
+:page-layout: full
+:vector-image: image::ROOT:ui/integrations-browser.png[Browser,420,220,align=center]
+
+DataStax Astra is a cutting-edge cloud-native database platform designed to empower developers.
+Harnessing the strengths of vector databases, serverless computing, and real-time streaming, Astra propels application development into the next generation.
+From AI-driven capabilities to robust data stream management, Astra simplifies complex tasks, offering unparalleled performance and scalability.
+
+[.ds-feature-buttons]
+https://astra.datastax.com[Explore Astra Vector^,role="ds-button ds-button\--color-primary ds-button\--variant-solid"]
+https://astra.datastax.com[Create Astra Account^,role="ds-button ds-button\--color-primary ds-button\--variant-outlined external"]
+
+[.vector.header-noline.text-h1.row.border-bottom]
+== Vector
+--
+[.landing-card-icon]
+image:astra-vector.svg[vector,20,role=for-light]
+image:astra-vector-dark.svg[vector,20,role=for-dark]
+
+Delve into a database optimized for AI-driven tasks.
+Astra Vector is tailored to offer unparalleled precision, speed, and scalability for AI applications, transforming how your applications perceive and interact with data.
+
+[.landing-a]
+xref:astra-vector::index.adoc[Learn More About Astra Vector]
+--
+image::astra-browser.png[Browser,420,220,align=center,float=bottom]
+
+''''
+
+[.grid]
+--
+[discrete]
+=== Serverless C*
+
+Delve deep into high-dimensional spaces with Astra Vector.
+Engineered for AI-intensive tasks, it offers unparalleled precision, speed, and scalability.
+Bring complex AI models into production with confidence, leveraging Astra's robust architecture.
+
+[.landing-a]
+https://docs.datastax.com/en/astra-serverless/docs/index.html[Discover Astra Serverless C*]
+
+[.material-icons.landing-card-icon]
+table_chart
+
+--
+
+[.grid]
+--
+[discrete]
+=== Streaming
+
+Harness real-time data with Astra Streaming.
+Process, analyze, and act on data as it's generated.
+Whether you're analyzing user behavior or monitoring systems, Astra Streaming delivers the real-time insights you need.
+
+[.landing-a]
+https://docs.datastax.com/en/streaming/astra-streaming/index.html[Dive into Astra Streaming]
+
+[.material-icons.landing-card-icon]
+air
+
+--
+
+
+[.header-noline.text-h1.ds-row.ds-grid]
+== Explore More of Astra
+
+=== Dive Deeper into Vector
+
+Get a broader understanding of vector databases and their capabilities within Astra.
+
+[unstyled.landing-a]
+* link:{#}[Vector Basics and Concepts]
+* link:{#}[Advanced Vector Techniques]
+* link:{#}[Vector Search Optimization]
+
+=== Serverless C* Unveiled
+
+Explore the intricacies and features of Astra's serverless database offering.
+
+[unstyled.landing-a]
+* link:{#}[Understanding CDC in Serverless C*]
+* link:{#}[Clients, CLI, and Tools for Serverless C*]
+* link:{#}[Serverless C* Best Practices]
+
+=== Streaming Insights
+
+Delve deeper into the real-time data processing capabilities of Astra.
+
+[unstyled.landing-a]
+* link:{#}[Streaming Fundamentals]
+* link:{#}[Advanced Streaming Configurations]
+* link:{#}[Starlight Integrations: JMS, Kafka, RabbitMQ]

preview-src/astra-vector-dark.svg

@@ -1037,7 +1037,7 @@
 
 .doc hr {
   border: solid var(--section-divider-color);
-  border-width: 2px 0 0;
+  border-width: 1px 0 0;
   height: 0;
 }
 

preview-src/astra-vector.svg

@@ -49,15 +49,18 @@
   background: #000;
 }
 
-.ds-row .ds-card + .ds-card {
+.ds-row .ds-card + .ds-card,
+.row .ds-card + .ds-card {
   margin: 0;
 }
 
 .doc .ds-card.exampleblock > .content::after {
   display: none;
 }
 
-.ds-card .image.bottom img {
+.ds-card .image.bottom img,
+.imageblock.bottom img,
+.image.bottom img {
   margin-bottom: calc(24 / var(--rem-base) * -1 * 1rem);
 }
 

preview-src/astra.adoc

@@ -6,44 +6,67 @@
 
 /* Extend .doc max-width */
 @media screen and (min-width: 1024px) {
-  html[data-layout="landing"] {
-    .doc {
-      max-width: calc(1280 / var(--rem-base) * 1rem);
-    }
+  html[data-layout="landing"] .doc,
+  html[data-layout="full"] .doc {
+    max-width: calc(1280 / var(--rem-base) * 1rem);
   }
+
+  html[data-layout="full"] main {
+    padding: 0;
+  }
+}
+
+html[data-layout="full"] main > .content {
+  justify-content: center;
+}
+
+html[data-layout="full"] .content-container {
+  flex-wrap: wrap;
+  align-content: center;
 }
 
 /* Hide sidebar, a.anchor */
 html[data-layout="landing"] .toc.sidebar,
 html[data-layout="landing"] .toc.embedded,
 html[data-layout="landing"] .breadcrumbs,
-html[data-layout="landing"] a.anchor {
+html[data-layout="landing"] a.anchor,
+html[data-layout="full"] .nav-container,
+html[data-layout="full"] .toolbar,
+html[data-layout="full"] .toc.sidebar,
+html[data-layout="full"] a.anchor,
+html[data-layout="full"] .hide h2 {
   display: none;
 }
 
-html[data-layout="landing"] .toolbar {
+html[data-layout="landing"] .toolbar,
+html[data-layout="full"] .toolbar {
   justify-content: flex-end;
 }
 
-html[data-layout="landing"] .doc > h1.page:first-child {
+html[data-layout="landing"] .doc > h1.page:first-child,
+html[data-layout="full"] .doc > h1.page:first-child {
   font-size: calc(34 / var(--rem-base) * 1rem);
   margin-top: var(--ds-space-3);
   margin-top: var(--ds-space-2);
 }
 
-html[data-layout="landing"] #preamble {
+html[data-layout="landing"] #preamble,
+html[data-layout="full"] #preamble {
   max-width: 650px;
 }
 
 html[data-layout="landing"] .doc .olist li + li,
-html[data-layout="landing"] .doc .ulist li + li {
+html[data-layout="landing"] .doc .ulist li + li,
+html[data-layout="full"] .doc .olist li + li,
+html[data-layout="full"] .doc .ulist li + li {
   margin-top: var(--ds-space-2);
 }
 
-html[data-layout="landing"] .text-h1 h2 {
+.text-h1 > h2 {
   @include text-h1;
 }
 
+.row > *,
 .ds-row > * {
   display: flex;
   flex-direction: column;
@@ -52,29 +75,46 @@ html[data-layout="landing"] .text-h1 h2 {
   gap: var(--ds-space-3);
 }
 
-.ds-row .sectionbody > * {
+.ds-row .sectionbody > *,
+.row .sectionbody > * {
   flex: 1;
 }
 
 /* persist row direction max-width: 1200px */
-.ds-row.persistent > * {
+.ds-row.persistent > *,
+.row.persistent > * {
   flex-direction: row;
 }
 
+.row-item,
+.row hr,
+.row .sectionbody > hr {
+  flex: 0 0 100%;
+}
+
+.row .sectionbody > hr {
+  margin: 0;
+}
+
 .ds-grid .sectionbody > *,
-.ds-grid > .content {
+.ds-grid > .content,
+.grid .sectionbody > *,
+.grid > .content {
   display: grid;
 }
 
-.ds-column > p {
+.ds-column > p,
+.column > p {
   display: flex;
   flex-direction: column;
   justify-items: space-around;
 }
 
 @media screen and (min-width: 1200px) {
   .ds-row > p,
-  .ds-row .sectionbody {
+  .ds-row .sectionbody,
+  .row > p,
+  .row .sectionbody {
     flex-direction: row;
   }
 }
@@ -84,7 +124,8 @@ html[data-layout="landing"] .text-h1 h2 {
   padding: 0;
 }
 
-.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon) {
+.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon),
+.row.explore .sectionbody .sect2 > *:not(.landing-card-icon) {
   margin-top: var(--ds-space-2);
 }
 
@@ -100,6 +141,10 @@ html[data-layout="landing"] .text-h1 h2 {
   grid-row-start: 1;
 }
 
+.doc .landing-card-icon > * {
+  line-height: 1;
+}
+
 html[data-theme="dark"] .doc .landing-card-icon {
   color: var(--heading-font-color);
 }
@@ -260,3 +305,5 @@ html[data-theme="dark"] .doc .landing-card-icon {
 html[data-theme="dark"] .doc .admonitionblock .icon::before {
   color: var(--ds-primary-text);
 }
+
+/* border */

src/css/doc.css

@@ -64,7 +64,7 @@
   --heading-font-color: var(--ds-text-primary);
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
-  --section-divider-color: var(--panel-border-color);
+  --section-divider-color: var(--ds-divider);
   --link-font-color: var(--ds-primary-main);
   --link_hover-font-color: var(--ds-primary-main);
   --link_unresolved-font-color: var(--important-color);

src/css/ds-card.css

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" data-layout="full">
+  <head>
+{{> head defaultPageTitle='Untitled'}}
+  </head>
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> header}}
+{{> body}}
+{{> intercom}}
+  </body>
+</html>