diff --git a/apps/www/components/Features/DatabaseVisual.tsx b/apps/www/components/Features/DatabaseVisual.tsx
new file mode 100644
index 00000000000..ce8503f27f9
--- /dev/null
+++ b/apps/www/components/Features/DatabaseVisual.tsx
@@ -0,0 +1,796 @@
+import React from 'react'
+import { LazyMotion, domAnimation, m } from 'framer-motion'
+
+const ease = [0.25, 0.25, 0, 1]
+
+const svgPathVariant = {
+ default: { opacity: 0, pathLength: 0, transition: { duration: 0.2 } },
+ hover: {
+ opacity: 1,
+ pathLength: 1,
+ transition: { duration: 0.7, ease: ease },
+ },
+}
+const pgLogoVariant = {
+ default: { opacity: 1, y: 10, transition: { duration: 0.2 } },
+ hover: {
+ y: 0,
+ transition: { duration: 0.4, ease: ease },
+ },
+}
+
+const initialSvgOpacity = 0.15
+
+function DatabaseVisual() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default DatabaseVisual
diff --git a/apps/www/components/Features/FeatureCard.tsx b/apps/www/components/Features/FeatureCard.tsx
index 53a6ce55277..bd3044445a6 100644
--- a/apps/www/components/Features/FeatureCard.tsx
+++ b/apps/www/components/Features/FeatureCard.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { motion } from 'framer-motion'
+import { LazyMotion, domAnimation, m } from 'framer-motion'
import Link from 'next/link'
const FeatureCard = ({
@@ -17,33 +17,35 @@ const FeatureCard = ({
classname?: string
onClick?: any
}) => (
-
-
-
+
+
-
-
- {title}
-
-
- {subtitle}
-
-
+
+ {title}
+
+
+ {subtitle}
+
+