diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bdd4eaf..a5e0323 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,30 +11,37 @@ const inter = Inter({
export const metadata: Metadata = {
title: "Aether DB - AI Database Schema Generator", description: "Convert plain English descriptions into production-ready PostgreSQL schemas in seconds. Get TypeScript types, API definitions, and seed data instantly.", keywords: "database, schema generator, PostgreSQL, TypeScript, AI, automation, backend", metadataBase: new URL("https://aether-db.com"),
alternates: {
- canonical: "https://aether-db.com"},
+ canonical: "https://aether-db.com"
+ },
openGraph: {
title: "Aether DB - Stop Writing SQL. Start Building.", description: "Convert plain English into production-ready database foundations. Instant PostgreSQL schemas, TypeScript types, API definitions, and more.", url: "https://aether-db.com", siteName: "Aether DB", type: "website", images: [
{
- url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png", alt: "A modern software dashboard interface showing database schema visualization with tables, relationshi"},
- ],
+ url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png", alt: "A modern software dashboard interface showing database schema visualization with tables, relationshi"
+ }
+ ]
},
twitter: {
card: "summary_large_image", title: "Aether DB - AI Database Schema Generator", description: "Convert plain English into production-ready database schemas instantly.", images: [
- "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png"],
+ "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png"
+ ]
},
robots: {
index: true,
- follow: true,
- },
+ follow: true
+ }
};
export default function RootLayout({
- children,
+ children
}: Readonly<{
children: React.ReactNode;
}>) {
return (
+
+
+
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3784a9b..486f2d6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { useState } from "react";
+import { useState, useEffect } from "react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
@@ -13,12 +13,18 @@ import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
import { Moon, Sun } from "lucide-react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
const lightTheme = {
- "--background": "#ffffff", "--card": "#f9f9f9", "--foreground": "#000000", "--primary-cta": "#000000", "--secondary-cta": "#f9f9f9", "--accent": "#e2e2e2", "--background-accent": "#c4c4c4", "--primary-cta-text": "#ffffff", "--secondary-cta-text": "#000000"};
+ "--background": "#ffffff", "--card": "#f9f9f9", "--foreground": "#000000", "--primary-cta": "#000000", "--secondary-cta": "#f9f9f9", "--accent": "#e2e2e2", "--background-accent": "#c4c4c4", "--primary-cta-text": "#ffffff", "--secondary-cta-text": "#000000"
+};
const darkTheme = {
- "--background": "#0a0a0a", "--card": "#1a1a1a", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#1a1a1a", "--accent": "#737373", "--background-accent": "#737373", "--primary-cta-text": "#0a0a0a", "--secondary-cta-text": "#ffffff"};
+ "--background": "#0a0a0a", "--card": "#1a1a1a", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#1a1a1a", "--accent": "#737373", "--background-accent": "#737373", "--primary-cta-text": "#0a0a0a", "--secondary-cta-text": "#ffffff"
+};
export default function LandingPage() {
const [isDarkMode, setIsDarkMode] = useState(false);
@@ -32,6 +38,106 @@ export default function LandingPage() {
});
};
+ useEffect(() => {
+ // Initialize GSAP animations
+ gsap.utils.toArray("[data-section]").forEach((section) => {
+ // Fade in on scroll
+ gsap.from(section, {
+ opacity: 0,
+ duration: 0.8,
+ scrollTrigger: {
+ trigger: section,
+ start: "top 80%", end: "top 20%", scrub: 1,
+ markers: false
+ }
+ });
+
+ // Parallax effect on hero
+ if (section.id === "hero") {
+ gsap.to(section, {
+ y: 50,
+ duration: 0.5,
+ scrollTrigger: {
+ trigger: section,
+ start: "top center", end: "bottom center", scrub: 0.5,
+ markers: false
+ }
+ });
+ }
+ });
+
+ // Animate hero title and description with stagger
+ gsap.from("#hero h1, #hero p", {
+ opacity: 0,
+ y: 30,
+ duration: 0.8,
+ stagger: 0.2,
+ delay: 0.3
+ });
+
+ // Button hover effects
+ const buttons = document.querySelectorAll("button[class*='button']");
+ buttons.forEach((button) => {
+ button.addEventListener("mouseenter", () => {
+ gsap.to(button, {
+ scale: 1.05,
+ duration: 0.3,
+ overwrite: "auto"
+ });
+ });
+ button.addEventListener("mouseleave", () => {
+ gsap.to(button, {
+ scale: 1,
+ duration: 0.3,
+ overwrite: "auto"
+ });
+ });
+ });
+
+ // Animate metric cards with scroll trigger
+ gsap.from("[class*='metric']", {
+ opacity: 0,
+ scale: 0.8,
+ duration: 0.6,
+ stagger: 0.1,
+ scrollTrigger: {
+ trigger: "#metrics", start: "top 80%", end: "top 20%", scrub: 1,
+ markers: false
+ }
+ });
+
+ // Animate testimonial cards
+ gsap.from("[class*='testimonial']", {
+ opacity: 0,
+ x: -30,
+ duration: 0.6,
+ stagger: 0.15,
+ scrollTrigger: {
+ trigger: "#testimonials", start: "top 80%", end: "top 20%", scrub: 0.5,
+ markers: false
+ }
+ });
+
+ // Text reveal effect on section titles
+ gsap.utils.toArray("[data-section] h2, [data-section] h3").forEach((heading) => {
+ gsap.from(heading, {
+ opacity: 0,
+ y: 20,
+ duration: 0.6,
+ scrollTrigger: {
+ trigger: heading,
+ start: "top 90%", end: "top 70%", scrub: 0.3,
+ markers: false
+ }
+ });
+ });
+
+ // Cleanup
+ return () => {
+ ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+ };
+ }, []);
+
return (
@@ -100,9 +209,11 @@ export default function LandingPage() {
description="Aether DB is an AI-powered database schema generator that transforms natural language descriptions into production-ready PostgreSQL databases. Designed for award-winning teams who demand excellence, it eliminates manual schema design, reduces development time by 90%, and ensures enterprise-level security and performance from day one."
metrics={[
{
- value: "90%", title: "Faster development cycles"},
+ value: "90%", title: "Faster development cycles"
+ },
{
- value: "100%", title: "Type-safe across your stack"},
+ value: "100%", title: "Type-safe across your stack"
+ }
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-showing-the-transformati-1772511922816-9b8b2394.png"
imageAlt="Transformation from manual to automated database setup"
@@ -155,7 +266,7 @@ export default function LandingPage() {
Simply tell Aether DB about your application in plain English. Describe your entities, relationships, and business logic as naturally as you would to a colleague.
- ),
+ )
},
{
id: "2", reverse: true,
@@ -191,7 +302,7 @@ export default function LandingPage() {
Our advanced AI engine analyzes your description, identifies all entities, relationships, and constraints, then generates an optimized schema plan.
- ),
+ )
},
{
id: "3", reverse: false,
@@ -235,7 +346,7 @@ export default function LandingPage() {
Aether DB generates production-ready PostgreSQL schemas with proper indexes, constraints, and row-level security policies automatically.
- ),
+ )
},
{
id: "4", reverse: true,
@@ -272,7 +383,7 @@ export default function LandingPage() {
Get Zod schemas, TypeScript types, API endpoint definitions, and seed data—all perfectly synchronized with your database schema.
- ),
+ )
},
{
id: "5", reverse: false,
@@ -315,8 +426,8 @@ export default function LandingPage() {
Your production-ready infrastructure is complete. Deploy with confidence knowing your database is secure, optimized, and enterprise-ready.
- ),
- },
+ )
+ }
]}
/>
@@ -328,11 +439,13 @@ export default function LandingPage() {
description="Stop spending days planning architecture, writing migrations, and syncing types across your codebase."
negativeCard={{
items: [
- "Hours planning database schema", "Writing and debugging SQL migrations", "Manually creating TypeScript types", "Syncing types across frontend and backend", "Managing relational integrity by hand", "Setting up RLS policies manually"],
+ "Hours planning database schema", "Writing and debugging SQL migrations", "Manually creating TypeScript types", "Syncing types across frontend and backend", "Managing relational integrity by hand", "Setting up RLS policies manually"
+ ]
}}
positiveCard={{
items: [
- "Instant schema generation", "Zero-migration SQL setup", "Auto-generated TypeScript types", "Perfect type sync everywhere", "Automatic constraint validation", "Built-in security policies"],
+ "Instant schema generation", "Zero-migration SQL setup", "Auto-generated TypeScript types", "Perfect type sync everywhere", "Automatic constraint validation", "Built-in security policies"
+ ]
}}
animationType="slide-up"
textboxLayout="default"
@@ -353,16 +466,19 @@ export default function LandingPage() {
metrics={[
{
id: "1", value: "10x", title: "Faster development", items: [
- "Database setup in minutes", "Reduce development cycles", "Ship features faster"],
+ "Database setup in minutes", "Reduce development cycles", "Ship features faster"
+ ]
},
{
id: "2", value: "0", title: "Type mismatches", items: [
- "Auto-generated consistency", "End-to-end type safety", "Catch errors early"],
+ "Auto-generated consistency", "End-to-end type safety", "Catch errors early"
+ ]
},
{
id: "3", value: "100%", title: "Schema coverage", items: [
- "Complete documentation", "All relationships mapped", "Never miss a constraint"],
- },
+ "Complete documentation", "All relationships mapped", "Never miss a constraint"
+ ]
+ }
]}
/>
@@ -381,22 +497,26 @@ export default function LandingPage() {
id: "1", name: "Sarah Chen", handle: "@sarahchen", testimonial:
"Aether DB cut our database setup time from 2 days to 10 minutes. The generated TypeScript types alone saved us countless hours of debugging.", rating: 5,
imageSrc:
- "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png", imageAlt: "Sarah Chen"},
+ "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png", imageAlt: "Sarah Chen"
+ },
{
id: "2", name: "Marcus Rodriguez", handle: "@mrodriguez", testimonial:
"Finally, a tool that understands what developers actually need. No more manual schema creation, no more type mismatches. Just describe what you want.", rating: 5,
imageSrc:
- "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png", imageAlt: "Marcus Rodriguez"},
+ "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png", imageAlt: "Marcus Rodriguez"
+ },
{
id: "3", name: "Emma Thompson", handle: "@emmathompson", testimonial:
"The RLS policies and security constraints are production-ready out of the box. This is enterprise-grade infrastructure in minutes.", rating: 5,
imageSrc:
- "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png", imageAlt: "Emma Thompson"},
+ "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png", imageAlt: "Emma Thompson"
+ },
{
id: "4", name: "Alex Kumar", handle: "@alexkumar", testimonial:
"We went from prototyping to production faster than ever. Aether DB handles the boring database stuff so we can focus on features.", rating: 5,
imageSrc:
- "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png", imageAlt: "Alex Kumar"},
+ "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png", imageAlt: "Alex Kumar"
+ }
]}
/>
@@ -413,22 +533,28 @@ export default function LandingPage() {
faqs={[
{
id: "1", title: "How does Aether DB generate database schemas?", content:
- "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."},
+ "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."
+ },
{
id: "2", title: "What exactly do I get when I use Aether DB?", content:
- "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."},
+ "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."
+ },
{
id: "3", title: "Is the generated code production-ready?", content:
- "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."},
+ "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."
+ },
{
id: "4", title: "Can I customize the generated schema?", content:
- "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."},
+ "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."
+ },
{
id: "5", title: "What databases are supported?", content:
- "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."},
+ "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."
+ },
{
id: "6", title: "Do you store my project descriptions?", content:
- "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."},
+ "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."
+ }
]}
/>
@@ -458,31 +584,32 @@ export default function LandingPage() {
items: [
{ label: "What is Aether DB", href: "#what-is" },
{ label: "How It Works", href: "#process" },
- { label: "Features", href: "#features" },
- ],
+ { label: "Features", href: "#features" }
+ ]
},
{
items: [
{
- label: "Documentation", href: "https://docs.aether-db.com"},
+ label: "Documentation", href: "https://docs.aether-db.com"
+ },
{ label: "API Reference", href: "https://docs.aether-db.com/api" },
- { label: "GitHub", href: "https://github.com/aether-db" },
- ],
+ { label: "GitHub", href: "https://github.com/aether-db" }
+ ]
},
{
items: [
{ label: "Blog", href: "https://blog.aether-db.com" },
{ label: "Twitter", href: "https://twitter.com/aether_db" },
- { label: "Discord", href: "https://discord.gg/aether-db" },
- ],
+ { label: "Discord", href: "https://discord.gg/aether-db" }
+ ]
},
{
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
- { label: "Contact", href: "#contact" },
- ],
- },
+ { label: "Contact", href: "#contact" }
+ ]
+ }
]}
/>