New landing page template (#63)

colegoldsmith · web-flow · commit 83211d97376a · 2024-01-16T16:28:18.000-06:00
* small fixes, new landing page template

* remove comments

* add filler image div instead of broken img link

* update readme link

* product attribute references
diff --git a/README.adoc b/README.adoc
@@ -27,7 +27,7 @@ endif::[]
 :url-datastax-docs-repo: https://github.com/riptano/docs-site
 :url-coppi: https://coppi.aws.dsinternal.org
 :url-docs-preview: http://docs-preview.datastax.com
-:url-tailwind-readme: src/css/tailwind/README.adoc
+:url-tailwind-readme: src/css/README.adoc
 // External URLs:
 :url-antora: https://antora.org
 :url-antora-docs: https://docs.antora.org
diff --git a/preview-src/page-templates/landing.adoc b/preview-src/page-templates/landing.adoc
@@ -1,28 +1,28 @@
 = {product}
 :page-layout: landing
+:product: Astra DB
 
-Efficiently store and query vector embeddings for better similarity search. If you're new, read our xref:get-started:concepts.adoc[introduction to vector databases].
+{product} empowers developers to build cutting-edge AI applications with robust APIs, real-time data handling, and seamless ecosystem integrations. Read our xref:get-started:concepts.adoc[introduction to vector databases] if you're new to {product}.
 
 [.[&>h2]:!hidden]
 == {empty}
 
+[subs="macros,attributes"]
 ++++
-<div class="flex rounded bg-level1 p-2 lg:p-3 gap-3 -mx-2 lg:-mx-3">
-<div class="flex flex-col lg:basis-1/2">
-++++
-
-[discrete.flex.lg:flex-col.gap-3.!m-0]
-== Get Started
-
-Dive straight into Astra Vector with this concise guide tailored for developers.
-Learn the essentials of how to connect to a database, ingest vectors, and perform a similarity search.
-
-[.[&>p]:flex.[&>p]:gap-1]
-xref:get-started:quickstart.adoc[Quickstart,role="btn btn-primary btn-solid"] https://astra.datastax.com[Create Astra Account^,role="btn btn-neutral btn-outlined external"]
-
-++++
-</div>
-<div class="hidden lg:block flex basis-1/2 relative">
+<div class="flex rounded bg-level1 p-8 gap-6">
+  <div class="flex flex-col lg:basis-1/2 gap-4">
+    
+    <h2 class="discrete !text-h1 !m-0">Get started</h2>
+    
+    <p>Ready to work with {product}? Dive into the quickstart guide and learn how to create a database, connect, and load data in a matter of minutes.</p>
+    
+    <div class="flex gap-4">
+      xref:get-started:quickstart.adoc[Quickstart,role="btn btn-primary btn-solid"]
+      https://astra.datastax.com[Create Astra Account^,role="btn btn-neutral btn-outlined external"]
+    </div>
+
+  </div>
+  <div class="hidden lg:block flex basis-1/2 relative">
 ++++
 
 [source,python,role="nolang absolute bottom-1/2 translate-y-1/2 right-0 w-full inverse-theme [&_.source-toolbox]:hidden"]
@@ -33,61 +33,122 @@ from astrapy.db import AstraDB
 db = AstraDB(token=TOKEN, api_endpoint=URL)
 
 # Ingest vectors into your collection
-col = db.collection(collection_name="test")
-col.insert_many(documents=DOCUMENTS)
+c = db.collection(collection_name="test")
+c.insert_many(documents=DOCUMENTS)
 
 # Find the closest vectors
-col.vector_find([0.15, 0.1, 0.1, 0.35, 0.55])
+c.vector_find([0.15, 0.1, 0.1, 0.35, 0.55])
 ----
 
+[subs="macros,attributes"]
 ++++
+  </div>
 </div>
-</div>
-++++
 
-[.[&>h2]:!text-h1]
-== Next steps
+<h2 class="discrete !text-h1 !mt-12 !mb-6">Database basics</h2>
 
-++++
-<div class="flex flex-col lg:flex-row gap-3">
-<div class="flex flex-col lg:basis-1/3">
-++++
+<div class="grid gap-6 lg:grid-cols-3">
+  <div class="flex flex-col gap-4">
+    
+    <div class="rounded bg-level1 w-full h-[225px]"></div>
 
-[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
-== [.rounded.border.p-1.w-max.material-icons]#fact_check# Load your data 
+    <h3 class="discrete !text-h2 !m-0">Create database</h3>
 
-Get your data and embeddings into a database.
+    <p>Learn the fundamental steps of setting up your {product} database.</p>
 
-[.landing-a]
-xref:data:load-data.adoc[Load data]
+    <div class="landing-a mt-auto">
+      xref:createdatabase.adoc[Create a database]
+    </div>
 
-++++
-</div>
-<div class="flex flex-col lg:basis-1/3">
-++++
+  </div>
+  <div class="flex flex-col gap-4">
+    
+    <div class="rounded bg-level1 w-full h-[225px]"></div>
 
-[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
-== [.rounded.border.p-1.w-max.material-icons]#auto_stories# Explore your data
+    <h3 class="discrete !text-h2 !m-0">Load data</h3>
 
-Perform similarity searches and browse the results.
+    <p>Discover methods for loading data into {product}, ensuring it's structured and ready to use.</p>
 
-[.landing-a]
-link:{#}[Explore data]
+    <div class="landing-a">
+      xref:createdatabase.adoc[Load data]
+    </div>
 
-++++
+  </div>
+  <div class="flex flex-col gap-4">
+  
+    <div class="rounded bg-level1 w-full h-[225px]"></div>
+
+    <h3 class="discrete !text-h2 !m-0">Explore your data</h3>
+
+    <p>Explore your database, utilizing {product}'s features for querying and analyzing your data.</p>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Explore your data]
+    </div>
+    
+  </div>
 </div>
-<div class="flex flex-col lg:basis-1/3">
-++++
 
-[discrete.flex.items-center.lg:items-start.lg:flex-col.gap-1]
-== [.rounded.border.p-1.w-max.material-icons]#power# Connect to your database
+<h2 class="discrete !text-h1 !mt-12 !mb-6">Expand your {product} knowledge</h2>
 
-Work with your data using our clients and APIs.
+<div class="grid lg:grid-rows-2 lg:grid-cols-2 gap-6">
+  
+  <div class="lg:row-span-2 flex flex-col items-start gap-4 rounded border p-4">
+      
+    <div class="rounded bg-level1 w-full h-[325px]"></div>
 
-[.landing-a]
-xref:data:connect-to-database.adoc[Connect database]
+    <h3 class="discrete !text-h2 !m-0">Integrations</h3>
 
-++++
-</div>
+    <p>Discover how {product} integrates with popular tools and platforms to enhance your workflow and data management.</p>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Integrate LangChain with Astra DB]
+    </div>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Integrate LlamaIndex with Astra DB]
+    </div>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Integrate Vercel with Astra DB]
+    </div>
+
+  </div>
+
+  <div class="flex flex-col items-start gap-4 rounded border p-4">
+      
+    <div class="rounded bg-level1 flex p-2"><i class="icon material-icons">auto_stories</i></div>
+
+    <h3 class="discrete !text-h2 !m-0">Tutorials</h3>
+
+    <p>Discover how {product} integrates with popular tools and platforms to enhance your workflow and data management.</p>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Build a chatbot]
+    </div>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[Build a recommendation system with vector search]
+    </div>
+      
+  </div>
+
+  <div class="flex flex-col items-start gap-4 rounded border p-4">
+      
+    <div class="rounded bg-level1 flex p-2"><i class="icon material-icons">handyman</i></div>
+
+    <h3 class="discrete !text-h2 !m-0">API references</h3>
+
+    <p>Utilize our detailed API references for a deep understanding of {product}'s capabilities and how to effectively use them.</p>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[APIs for vector databases]
+    </div>
+
+    <div class="landing-a">
+      xref:createdatabase.adoc[APIs for non-vector databases]
+    </div>
+      
+  </div>
 </div>
 ++++
diff --git a/src/css/asciidoc/doc.css b/src/css/asciidoc/doc.css
@@ -18,7 +18,7 @@
 
   .doc h1.page {
     display: flex;
-    align-items: start;
+    align-items: flex-start;
     line-height: 1.2;
     margin-top: var(--ds-space-2);
     margin-bottom: var(--ds-space-2);
diff --git a/src/css/asciidoc/source-block.css b/src/css/asciidoc/source-block.css
@@ -14,7 +14,7 @@
 
   .doc pre.highlightjs {
     display: block;
-    color: var(--ds-text-secondary);
+    color: var(--ds-text-primary);
     background: var(--ds-background-level1);
     border-radius: calc(6 / var(--rem-base) * 1rem);
     border: 1px solid var(--ds-background-level1);
diff --git a/src/css/components/btn.css b/src/css/components/btn.css
@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply text-button flex h-10 items-center justify-center whitespace-nowrap rounded border border-transparent px-3 py-2 transition ease-in-out;
+    @apply text-button inline-flex h-10 items-center justify-center whitespace-nowrap rounded border border-transparent px-3 py-2 transition ease-in-out;
   }
 
   a.btn:hover {
diff --git a/src/partials/footer.hbs b/src/partials/footer.hbs
@@ -11,7 +11,7 @@
     </a>
     <p class="!m-0">
       <span>©</span>
-      <span id="copyrightdate">2023</span>
+      <span id="copyrightdate">2024</span>
       <span>DataStax |
         <a
           href="https://www.datastax.com/legal/datastax-website-privacy-policy"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`@layer components {`
`2`	`2`	`.btn {`
`3`		`- @apply text-button flex h-10 items-center justify-center whitespace-nowrap rounded border border-transparent px-3 py-2 transition ease-in-out;`
	`3`	`+ @apply text-button inline-flex h-10 items-center justify-center whitespace-nowrap rounded border border-transparent px-3 py-2 transition ease-in-out;`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`a.btn:hover {`