[DB] animated feature cards (#1059)

* animated sql feature card * added shimmer effect in astro ecosystem feature card * added typing effect in ts orm feature card * updated sql commands marquee and styling in visual data views and global distrution features * added 3d tilt effect in astro ecosystem feature card * code refactor in astro ecosystem component * added a download db simulation in the zero lock-in feature card * deleted package-lock.json file * updated pnpm-lock.yaml * updated zero lockin feature card * updated intellisense animation in the orm feature card * added gradient in the visual data view feature card * updated responsiveness of the bento animations * updated zero lock-in and sql commands animations * updated orm feature card to animate when card is visible --------- Co-authored-by: Ian Mathaiya <iannmathaiya@gmail.com>
withastro · Apr 12, 2024 · 20d174e · 20d174e
1 parent 00f02b7
commit 20d174e
Show file tree

Hide file tree

Showing 13 changed files with 719 additions and 287 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
 		"clsx": "^2.0.0",
 		"cobe": "^0.6.3",
 		"gray-matter": "^4.0.3",
+		"motion": "^10.17.0",
 		"node-fetch": "^3.3.2",
 		"quill": "^1.3.7",
 		"sharp": "^0.33.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/db/_assets/zero-lockin-bg.png b/src/pages/db/_assets/zero-lockin-bg.png
diff --git a/src/pages/db/_components/Features.astro b/src/pages/db/_components/Features.astro
@@ -1,13 +1,12 @@
 ---
 import Icon from "astro-icon"
-import AstroIcon from "./AstroLogo.astro"
-import HeroVideo from "./HeroVideo.astro"
+import ORM from "./features/ORM.astro"
 import SectionText from "./SectionText.astro"
 import DataView from "./features/DataView.astro"
-import GlobalDistribution from "./features/GlobalDistribution.astro"
-import ORM from "./features/ORM.astro"
-import SQLCommands from "./features/SQLCommands.astro"
 import ZeroLockin from "./features/ZeroLockin.astro"
+import SQLCommands from "./features/SQLCommands.astro"
+import AstroEcosystem from "./features/AstroEcosystem.astro"
+import GlobalDistribution from "./features/GlobalDistribution.astro"
 ---
 
 <section class="mx-auto w-full max-w-screen-xl space-y-2 p-4 sm:p-8">
@@ -17,35 +16,18 @@ import ZeroLockin from "./features/ZeroLockin.astro"
 	</SectionText>
 
 	<div class="grid grid-cols-1 gap-2 pt-8 md:grid-cols-2 lg:grid-cols-3">
-		<figure
-			class="landing-section relative min-h-[30rem] space-y-3 overflow-hidden rounded-2xl border border-white/30 bg-cover bg-center bg-no-repeat md:min-h-[560px] lg:min-h-0"
-		>
-			<HeroVideo height="480" aria-hidden="true" />
-			<div
-				class="illustration pointer-events-none isolate select-none overflow-hidden pt-4"
-				aria-hidden="true"
-			>
-				<AstroIcon />
-			</div>
-			<p class="sr-only">Astro logo</p>
 
-			<figcaption class="static z-10 flex flex-col items-center space-y-1 p-4">
-				<h3 class="text-balance text-lg text-astro-gray-100">Designed for the Astro ecosystem</h3>
-				<p class="text-balance body w-2/3 text-astro-gray-200">
-					A deeply integrated, unified developer experience.
-				</p>
-			</figcaption>
-		</figure>
+		<AstroEcosystem />
 
 		<div class="grid gap-2">
 			<figure
 				class="flex flex-col space-y-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19]"
 			>
-				<div class="illustration pointer-events-none isolate select-none pt-4" aria-hidden="true">
+				<div class="pt-4 illustration pointer-events-none isolate select-none" aria-hidden="true">
 					<SQLCommands />
 				</div>
 				<p class="sr-only">List of common SQL keywords such as SELECT and JOIN</p>
-				<figcaption class="p-4">
+				<figcaption class="p-4 space-y-2">
 					<h3 class="text-lg text-astro-gray-100">SQL</h3>
 					<p class="text-balance body text-astro-gray-200">
 						Why reinvent the wheel? Astro DB speaks the familiar, universal database language: SQL.
@@ -56,13 +38,13 @@ import ZeroLockin from "./features/ZeroLockin.astro"
 			<figure
 				class="space-y-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19] p-4"
 			>
-				<div class="illustration pointer-events-none isolate select-none" aria-hidden="true">
+				<div class="pt-4 illustration pointer-events-none isolate select-none" aria-hidden="true">
 					<ORM />
 				</div>
 				<p class="sr-only">
 					Code snippet demonstrating TypeScript autocompletion for a User schema
 				</p>
-				<figcaption>
+				<figcaption class="space-y-2">
 					<h3 class="text-astro-gray-100">TypeScript ORM</h3>
 					<p class="body text-astro-gray-200">
 						Includes a modern, TypeScript ORM with type-safety and autocomplete on every query.
@@ -72,15 +54,15 @@ import ZeroLockin from "./features/ZeroLockin.astro"
 		</div>
 
 		<figure
-			class="flex flex-col justify-between gap-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19] p-4 md:max-lg:col-span-2"
+			class="flex flex-col relative justify-between gap-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19] md:max-lg:col-span-2"
 		>
-			<div class="illustration pointer-events-none isolate my-auto select-none" aria-hidden="true">
+			<div class="h-full min-h-[28rem]">
 				<ZeroLockin />
 			</div>
 			<p class="sr-only">
 				"Export data" button with a dropdown that says "Export as SQL" and "Export as CSV"
 			</p>
-			<figcaption>
+			<figcaption class="space-y-2 p-4">
 				<h3 class="text-astro-gray-100">Zero lock-in</h3>
 				<p class="body min-h-[3rem] text-astro-gray-200">
 					It's your data. Export it anytime, in the format you need.
@@ -91,33 +73,31 @@ import ZeroLockin from "./features/ZeroLockin.astro"
 
 	<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
 		<figure
-			class="max-h-[24rem] space-y-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19]"
+			class="max-h-[32rem] space-y-4 overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19]"
 		>
-			<figcaption class="p-4">
+			<figcaption class="p-4 space-y-2">
 				<h3 class="text-astro-gray-100">Visual Data Viewers</h3>
 				<p class="text-balance body text-astro-gray-200">
 					Explore your data in a visual spreadsheet, a rich-text editor, or raw SQL console.
 				</p>
 			</figcaption>
 			<p class="sr-only">Illustration of a bable-based user interface, similar to that of Excel</p>
-			<div class="illustration pointer-events-none isolate select-none pl-4" aria-hidden="true">
+			<div class="pl-4 illustration pointer-events-none isolate select-none" aria-hidden="true">
 				<DataView />
 			</div>
 		</figure>
 
 		<figure
-			class="relative h-[24rem] overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19]"
+			class="relative max-h-[32rem] overflow-hidden rounded-xl border border-[#858B98]/20 bg-[#0C0F19]"
 		>
-			<figcaption class="p-4">
+			<figcaption class="p-4 space-y-2">
 				<h3 class="text-astro-gray-100">Global Distribution</h3>
 				<p class="text-balance body text-astro-gray-200">
 					Create databases in 6 different regions around the world, including the EU and Japan.
 				</p>
 			</figcaption>
 			<p class="sr-only">A spinning globe with markers in 8 regions around the world</p>
-			<div
-				class="illustration pointer-events-none isolate flex select-none justify-end overflow-hidden"
-			>
+			<div class="h-full min-h-[28rem] isolate flex justify-end overflow-hidden">
 				<GlobalDistribution />
 			</div>
 		</figure>

diff --git a/src/pages/db/_components/UseCaseTab.astro b/src/pages/db/_components/UseCaseTab.astro
@@ -1,32 +1,32 @@
 ---
-import { Icon } from "astro-icon"
+import { Icon } from "astro-icon";
 
 interface Props {
-  title: string
-  icon: string
-  active?: boolean
+  title: string;
+  icon: string;
+  active?: boolean;
 }
 
-const { icon, title, active = false } = Astro.props
+const { icon, title, active = false } = Astro.props;
 ---
 
 <li>
   <button
-    role='tab'
+    role="tab"
     data-tab={title.toLowerCase()}
     aria-selected={active ? "true" : undefined}
     class={`relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full text-lg sm:text-xl md:min-w-[8rem]  md:rounded-lg md:p-4 md:px-6`}
   >
     <div
       data-tab-icon-container={title.toLowerCase()}
       aria-selected={active ? "true" : undefined}
-      class='w-fit h-fit landing-section rounded-full p-[4px] bg-astro-gray-300 aria-selected:text-white aria-selected:bg-red-pink-gradient'
+      class="w-fit h-fit landing-section rounded-full p-[4px] bg-astro-gray-300 aria-selected:text-white aria-selected:bg-red-pink-gradient"
     >
-      <div class='bg-black w-16 h-16 landing-section rounded-full'>
+      <div class="bg-black w-16 h-16 landing-section rounded-full">
         <div
           data-tab-icon={title.toLowerCase()}
           aria-selected={active ? "true" : undefined}
-          class='w-full h-full landing-section rounded-full bg-astro-gray-300/20 aria-selected:bg-gradient-to-bl aria-selected:from-[#D83333]/20 aria-selected:to-[#F041FF]/20'
+          class="w-full h-full landing-section rounded-full bg-astro-gray-300/20 aria-selected:bg-gradient-to-bl aria-selected:from-[#D83333]/20 aria-selected:to-[#F041FF]/20"
         >
           <Icon name={icon} size={32} />
         </div>
@@ -36,7 +36,7 @@ const { icon, title, active = false } = Astro.props
     <p
       data-tab-title={title.toLowerCase()}
       aria-selected={active ? "true" : undefined}
-      class='font-medium text-astro-gray-300 aria-selected:bg-gradient-to-bl aria-selected:from-[#D83333] aria-selected:to-[#F041FF] aria-selected:bg-clip-text aria-selected:text-transparent'
+      class="font-medium text-astro-gray-300 aria-selected:bg-gradient-to-bl aria-selected:from-[#D83333] aria-selected:to-[#F041FF] aria-selected:bg-clip-text aria-selected:text-transparent"
     >
       {title}
     </p>