Page - Vector Docs Home (#14)

* Added feature card styles

* Added explore column component

* Fix landing template max-width

* Added card component

* Fix desktop max-width

preview-src/index.adoc

@@ -24,6 +24,8 @@ Quisque pharetra tristique arcu fringilla dapibus.
 https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
 Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
 
+xref:vector-home.adoc[Vector Home,role="ds-button ds-button\--color-primary ds-button\--variant-solid"]
+
 == Headers and Titles
 
 === Section Title (Level 1)
@@ -379,4 +381,4 @@ ____
 
 == Fin
 
-That's all, folks!
+That's all, folks!

preview-src/vector-home.adoc

@@ -0,0 +1,139 @@
+= DataStax Astra Vector
+:page-layout: landing
+
+Efficiently store and query vector embeddings for better similarity search. If you're new, read our xref:ROOT:templates/examples/concepts.adoc[introduction to vector databases].
+
+[.ds-feature.header-noline]
+== Get Started
+--
+Dive straight into Astra Vector with this concise guide tailored for developers. These essential steps will walk you through the setup process, ensuring you're up and running quickly.
+
+[.ds-feature-buttons]
+xref:ROOT:templates/examples/quickstart.adoc[Quick Start,role="ds-button ds-button\--color-primary ds-button\--variant-solid"] https://astra.datastax.com[Create Astra Account^,role="ds-button ds-button\--color-neutral ds-button\--variant-outlined"]
+--
+
+[.ds-feature-code,js]
+----
+import vector
+
+# Create a new vector database
+db = vector.Database("my_vector_db")
+
+# Ingest vectors into your database
+db.ingest("s3://vector-embeddings-bucket/")
+
+# Find the closest vectors
+query_vector = [0.9, 2.2, 2.8]
+results = db.query(query_vector, limit=3)
+----
+
+[.explore.header-noline.ds-row.ds-grid]
+== Explore Docs
+
+=== Guides
+
+Concise how-tos of common tasks with Astra.
+
+[unstyled.landing-a]
+* link:{#}[Load vector data]
+* link:{#}[Explore my data]
+* link:{#}[Manage my embeddings]
+
+[.material-icons.landing-card-icon]
+fact_check
+
+=== Tutorials
+
+Dive into step-by-step lessons to master the essentials.
+
+[unstyled.landing-a]
+* link:{#}[Build a chatbot]
+* link:{#}[Enhance a recommendation system]
+* link:{#}[Write an AI agent]
+
+[.material-icons.landing-card-icon]
+auto_stories
+
+=== Clients
+
+Explore dedicated applications built to enhance your experience.
+
+[unstyled.landing-a]
+* link:{#}[How do I use the Python client]
+* link:{#}[How do I use the Node.js client]
+* link:{#}[Connect using the JSON API]
+
+[.material-icons.landing-card-icon]
+power
+
+=== Integrations
+
+Seamlessly connect with your favorite tools and platforms
+
+[unstyled.landing-a]
+* link:{#}[Connect to OpenAI]
+* link:{#}[Connect to LangChain]
+* link:{#}[Connect to LlamaIndex]
+
+[.material-icons.landing-card-icon]
+integration_instructions
+
+
+[.ds-row.header-noline]
+== What's New?
+
+[.ds-card.ds-grid]
+--
+[discrete]
+=== DataStax Astra Integrations
+
+Amplify your development potential with integrations crafted for popular platforms and languages. Dive deep into how DataStax Astra seamlessly interacts with Python, Java, Node.js, and more.
+
+[.landing-a]
+link:{#}[Explore Astra Integrations]
+
+image:browser.png[Browser,100%,float=bottom,role=float-gap]
+
+[.material-icons.landing-card-icon]
+integration_instructions
+--
+
+[.ds-row]
+--
+[.ds-card]
+====
+[discrete]
+=== Scaling Production Workloads
+
+Equip yourself with the tools and techniques to scale your applications effectively. Meet the demands of today while preparing for the challenges of tomorrow.
+
+[.landing-a]
+link:{#}[Discover Scalability Techniques]
+====
+
+[.ds-card]
+====
+[discrete]
+=== Securing Your Vector Databases
+
+Prioritize the protection of your invaluable data. Explore advanced strategies and tools designed to safeguard your vector databases from potential threats.
+
+[.landing-a]
+link:{#}[Learn about Database Security]
+====
+--
+
+[.ds-row]
+== Community & Support
+
+=== Join the Conversation
+
+Engage with our vibrant community of developers. Ask questions, share knowledge, or just hang out and chat about all things DataStax Astra.
+
+link:{#}[Join on Discord] · link:{#}[Follow on X]
+
+=== Need More Help?
+
+[unstyled.landing-support]
+* link:{#}[Ask the Astra community,role="community"]
+* link:{#}[Get in touch with support,role="support"]

src/css/doc.css

@@ -640,7 +640,7 @@
 
 .doc .olist li + li,
 .doc .ulist li + li {
-  margin-top: var(--ds-space-1);
+  margin-top: var(--ds-space-2);
 }
 
 .doc .ulist .listingblock,

src/css/ds-card.css

@@ -0,0 +1,86 @@
+/* card */
+.ds-card .content,
+.doc .exampleblock.ds-card > .content {
+  padding: var(--ds-space-3);
+  border-radius: calc(6 / var(--rem-base) * 1rem);
+  border: 1px solid var(--ds-divider);
+}
+
+.doc .paragraph.landing-card-icon,
+.doc .exampleblock.ds-card {
+  margin: 0;
+}
+
+.ds-card .image.bottom img {
+  margin-bottom: calc(24 / var(--rem-base) * -1 * 1rem);
+}
+
+/* Feature Card */
+.ds-feature {
+  padding: var(--ds-space-3);
+  background: var(--ds-neutral-soft-bg);
+  border-radius: calc(10 / var(--rem-base) * 1rem);
+}
+
+.ds-feature .sectionbody {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-feature .sectionbody > * {
+  flex: 1;
+}
+
+.doc .ds-feature.header-noline h2:not(.discrete) {
+  padding: 0;
+}
+
+.doc .ds-feature .paragraph {
+  margin-top: var(--ds-space-2);
+}
+
+#preamble + .sect1.ds-feature,
+.doc .sect1 + .sect1.ds-feature {
+  margin-top: var(--ds-space-7);
+}
+
+/* Feature Card - Button */
+.ds-feature-buttons p {
+  display: flex;
+  gap: var(--ds-space-1);
+}
+
+.doc .ds-feature-buttons.paragraph {
+  margin-top: var(--ds-space-4);
+}
+
+/* Feature Card - Code */
+.doc .ds-feature-code code,
+.doc .ds-feature-code pre.highlight code {
+  background: var(--ds-text-primary);
+  font-size: calc(15.5 / var(--rem-base) * 1rem);
+}
+
+.doc .ds-feature-code pre.highlight code,
+.doc .ds-feature-code.literalblock pre code {
+  padding: var(--ds-space-2) var(--ds-space-3);
+}
+
+@media screen and (min-width: 1200px) {
+  .ds-feature .sectionbody {
+    flex-direction: row;
+  }
+
+  .doc .ds-feature-code.listingblock > .content {
+    position: absolute;
+    width: 100%;
+    top: calc(50%);
+    transform: translateY(-50%);
+  }
+
+  .doc .ds-feature-code.listingblock {
+    position: relative;
+    margin: 0;
+    margin-top: calc(27 / var(--rem-base) * -1 * 1rem);
+  }
+}

src/css/ds-layout.css

@@ -0,0 +1,111 @@
+/*
+ *
+ *  Landing template
+ *
+ */
+
+/* Extend .doc max-width */
+@media screen and (min-width: 1024px) {
+  html[data-layout="landing"] {
+    .doc {
+      max-width: calc(1280 / var(--rem-base) * 1rem);
+    }
+  }
+}
+
+/* Hide sidebar, a.anchor */
+html[data-layout="landing"] .toc.sidebar,
+html[data-layout="landing"] a.anchor {
+  display: none;
+}
+
+html[data-layout="landing"] .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 {
+  max-width: 650px;
+}
+
+.ds-row > .sectionbody,
+.ds-row > .content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--ds-space-3);
+}
+
+.ds-row .sectionbody > * {
+  flex: 1;
+}
+
+.ds-grid .sectionbody > *,
+.ds-grid > .content {
+  display: grid;
+}
+
+@media screen and (min-width: 1200px) {
+  .ds-row .sectionbody {
+    flex-direction: row;
+  }
+}
+
+.doc .header-noline h2:not(.discrete) {
+  border-bottom: none;
+  padding-bottom: var(--ds-space-3);
+}
+
+.ds-row.explore .sectionbody .sect2 > *:not(.landing-card-icon) {
+  margin-top: var(--ds-space-2);
+}
+
+/* Landing card icon */
+.material-icons.landing-card-icon {
+  max-width: fit-content;
+  font-size: calc(20 / var(--rem-base) * 1rem);
+  padding: calc(10 / var(--rem-base) * 1rem);
+  border: 1px solid var(--ds-neutral-outlined-border);
+  border-radius: calc(6 / var(--rem-base) * 1rem);
+  grid-row-start: 1;
+  margin-top: 0;
+}
+
+/* Links */
+.doc .landing-a a {
+  padding-right: var(--ds-space-2);
+}
+
+.landing-a a::after {
+  font-family: "Material Icons Outlined", sans-serif;
+  content: '\e5c8';
+  font-size: calc(20 / var(--rem-base) * 1rem);
+  position: absolute;
+  margin-left: var(--ds-space-h);
+  margin-top: calc(4 / var(--rem-base) * -1 * 1rem);
+}
+
+.landing-support a.support::before,
+.landing-support a.community::before {
+  font-family: "Material Icons Outlined", sans-serif;
+  content: '\ef73';
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  margin-right: var(--ds-space-1);
+  position: absolute;
+  left: 0;
+}
+
+.landing-support a.community::before {
+  content: '\e7ef';
+}
+
+.landing-support p {
+  position: relative;
+}
+
+.landing-support a.community,
+.landing-support a.support {
+  margin-left: var(--ds-space-3);
+}

src/css/site.css

@@ -5,6 +5,8 @@
 @import "ds-light.css";
 @import "ds-dark.css";
 @import "vars.css";
+@import "ds-layout.css";
+@import "ds-card.css";
 @import "ds-typography.css";
 @import "base.css";
 @import "body.css";

src/layouts/landing.hbs

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