Update src/app/page.tsx

Merge version_2 into main
2026-03-03 04:35:45 +00:00 · 2026-03-03 04:32:58 +00:00 · 2026-03-03 04:32:54 +00:00 · 2026-03-03 04:32:53 +00:00 · 2026-03-03 04:32:53 +00:00 · 2026-03-03 04:27:16 +00:00
3 changed files with 279 additions and 50 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,9 @@
 import type { Metadata } from "next";
 import { Nunito_Sans } from "next/font/google";
 import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 const nunitoSans = Nunito_Sans({
  variable: "--font-nunito-sans",  subsets: ["latin"],
 });
 const halant = Halant({
  variable: "--font-halant",  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
@@ -47,9 +36,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
+        <body className={`${inter.variable} antialiased`}>
          className={`${nunitoSans.variable} ${halant.variable} ${inter.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useState } from "react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
@@ -10,8 +11,27 @@ import TestimonialCardThirteen from "@/components/sections/testimonial/Testimoni
 import FaqBase from "@/components/sections/faq/FaqBase";
 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";
 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"};
 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"};
 export default function LandingPage() {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const theme = isDarkMode ? darkTheme : lightTheme;
  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);
    Object.entries(theme).forEach(([key, value]) => {
      document.documentElement.style.setProperty(key, value);
    });
  };
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
@@ -26,16 +46,29 @@ export default function LandingPage() {
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
-        <NavbarStyleApple
+        <div className="flex items-center justify-between p-4">
-          brandName="Aether DB"
+          <NavbarStyleApple
-          navItems={[
+            brandName="Aether DB"
-            { name: "Features", id: "features" },
+            navItems={[
-            { name: "How It Works", id: "about" },
+              { name: "What is Aether DB", id: "what-is" },
-            { name: "Pricing", id: "pricing" },
+              { name: "How It Works", id: "process" },
-            { name: "FAQ", id: "faq" },
+              { name: "Features", id: "features" },
-            { name: "Contact", id: "contact" },
+              { name: "FAQ", id: "faq" },
-          ]}
+              { name: "Contact", id: "contact" },
-        />
+            ]}
          />
          <button
            onClick={toggleTheme}
            className="ml-4 p-2 rounded-lg hover:bg-accent transition-colors"
            aria-label="Toggle theme"
          >
            {isDarkMode ? (
              <Sun className="w-6 h-6" />
            ) : (
              <Moon className="w-6 h-6" />
            )}
          </button>
        </div>
      </div>
      <div id="hero" data-section="hero">
@@ -54,22 +87,22 @@ export default function LandingPage() {
          avatarText="Trusted by 500+ developers"
          buttons={[
            { text: "Try it free", href: "#contact" },
-            { text: "See demo", href: "#about" },
+            { text: "See demo", href: "#process" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>
-      <div id="about" data-section="about">
+      <div id="what-is" data-section="what-is">
        <MetricSplitMediaAbout
-          tag="How It Works"
+          tag="What is Aether DB?"
-          title="Describe Once, Generate Everything"
+          title="Enterprise-Grade Database Infrastructure in Minutes"
-          description="Type a description of your application—teams, projects, tasks, comments, billing—and Aether DB instantly generates PostgreSQL schemas with proper indexes, constraints, and RLS policies. Plus Zod schemas, TypeScript types, API definitions, seed data, and architectural documentation."
+          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: "⚡ Seconds",              title: "From prompt to production-ready code"},
+              value: "90%",              title: "Faster development cycles"},
            {
-              value: "100%",              title: "Type-safe across your entire 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"
@@ -79,6 +112,215 @@ export default function LandingPage() {
        />
      </div>
      <div id="process" data-section="process">
        <TimelineProcessFlow
          title="5-Step Process: From Concept to Production"
          description="Experience how Aether DB transforms your database vision into reality"
          tag="Process"
          textboxLayout="default"
          animationType="slide-up"
          items={[
            {
              id: "1",              reverse: false,
              media: (
                <svg
                  className="w-full h-full"
                  viewBox="0 0 200 200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <style>
                      {`
                        @keyframes pulse {
                          0%, 100% { opacity: 1; }
                          50% { opacity: 0.5; }
                        }
                        .pulse-circle {
                          animation: pulse 2s infinite;
                        }
                      `}
                    </style>
                  </defs>
                  <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" strokeWidth="2" />
                  <circle cx="100" cy="100" r="60" className="pulse-circle" fill="currentColor" opacity="0.3" />
                  <text x="100" y="105" textAnchor="middle" fontSize="14" fontWeight="bold" fill="currentColor">
                    Describe
                  </text>
                </svg>
              ),
              content: (
                <>
                  <h3 className="text-xl font-bold mb-2">Step 1: Describe Your App</h3>
                  <p className="text-sm leading-relaxed">
                    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.
                  </p>
                </>
              ),
            },
            {
              id: "2",              reverse: true,
              media: (
                <svg
                  className="w-full h-full"
                  viewBox="0 0 200 200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <style>
                      {`
                        @keyframes slide {
                          0%, 100% { transform: translateX(0); }
                          50% { transform: translateX(20px); }
                        }
                        .slide-arrow {
                          animation: slide 2s infinite;
                        }
                      `}
                    </style>
                  </defs>
                  <rect x="20" y="70" width="60" height="60" fill="currentColor" opacity="0.3" rx="4" />
                  <path className="slide-arrow" d="M 100 100 L 130 100" stroke="currentColor" strokeWidth="3" />
                  <polygon points="130,100 120,95 120,105" fill="currentColor" />
                  <rect x="140" y="70" width="40" height="60" fill="currentColor" opacity="0.5" rx="4" />
                </svg>
              ),
              content: (
                <>
                  <h3 className="text-xl font-bold mb-2">Step 2: AI Analysis</h3>
                  <p className="text-sm leading-relaxed">
                    Our advanced AI engine analyzes your description, identifies all entities, relationships, and constraints, then generates an optimized schema plan.
                  </p>
                </>
              ),
            },
            {
              id: "3",              reverse: false,
              media: (
                <svg
                  className="w-full h-full"
                  viewBox="0 0 200 200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <style>
                      {`
                        @keyframes rotate {
                          from { transform: rotate(0deg); }
                          to { transform: rotate(360deg); }
                        }
                        .rotate-gear {
                          animation: rotate 4s linear infinite;
                          transform-origin: 100px 100px;
                        }
                      `}
                    </style>
                  </defs>
                  <circle cx="100" cy="100" r="30" fill="none" stroke="currentColor" strokeWidth="4" />
                  <circle cx="100" cy="100" r="15" fill="currentColor" />
                  <circle
                    className="rotate-gear"
                    cx="100"
                    cy="100"
                    r="70"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                  />
                </svg>
              ),
              content: (
                <>
                  <h3 className="text-xl font-bold mb-2">Step 3: Schema Generation</h3>
                  <p className="text-sm leading-relaxed">
                    Aether DB generates production-ready PostgreSQL schemas with proper indexes, constraints, and row-level security policies automatically.
                  </p>
                </>
              ),
            },
            {
              id: "4",              reverse: true,
              media: (
                <svg
                  className="w-full h-full"
                  viewBox="0 0 200 200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <style>
                      {`
                        @keyframes bounce {
                          0%, 100% { transform: translateY(0); }
                          50% { transform: translateY(-20px); }
                        }
                        .bounce-box {
                          animation: bounce 1.5s infinite;
                        }
                      `}
                    </style>
                  </defs>
                  <rect className="bounce-box" x="60" y="60" width="40" height="40" fill="currentColor" opacity="0.4" rx="4" />
                  <rect x="110" y="90" width="60" height="80" fill="currentColor" opacity="0.2" rx="4" />
                  <text x="140" y="140" textAnchor="middle" fontSize="12" fontWeight="bold" fill="currentColor">
                    Types
                  </text>
                </svg>
              ),
              content: (
                <>
                  <h3 className="text-xl font-bold mb-2">Step 4: Complete Code Generation</h3>
                  <p className="text-sm leading-relaxed">
                    Get Zod schemas, TypeScript types, API endpoint definitions, and seed data—all perfectly synchronized with your database schema.
                  </p>
                </>
              ),
            },
            {
              id: "5",              reverse: false,
              media: (
                <svg
                  className="w-full h-full"
                  viewBox="0 0 200 200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <style>
                      {`
                        @keyframes checkmark {
                          0% { strokeDashoffset: 100; }
                          100% { strokeDashoffset: 0; }
                        }
                        .checkmark {
                          animation: checkmark 1s ease forwards;
                          stroke-dasharray: 100;
                        }
                      `}
                    </style>
                  </defs>
                  <circle cx="100" cy="100" r="70" fill="none" stroke="currentColor" strokeWidth="3" />
                  <path
                    className="checkmark"
                    d="M 70 100 L 90 120 L 130 70"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="4"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              ),
              content: (
                <>
                  <h3 className="text-xl font-bold mb-2">Step 5: Deploy & Scale</h3>
                  <p className="text-sm leading-relaxed">
                    Your production-ready infrastructure is complete. Deploy with confidence knowing your database is secure, optimized, and enterprise-ready.
                  </p>
                </>
              ),
            },
          ]}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardSixteen
          tag="Traditional vs Aether DB"
@@ -195,7 +437,7 @@ export default function LandingPage() {
        <ContactSplit
          tag="Get Started"
          title="Start Building Faster Today"
-          description="Join hundreds of developers who are shipping database-backed applications in record time. Sign up for free and generate your first schema in minutes."
+          description="Sign up for free and generate your first production-ready schema in under 2 minutes."
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-of-a-person-working-on-a-1772511922490-57b835bf.png"
@@ -214,9 +456,9 @@ export default function LandingPage() {
          columns={[
            {
              items: [
                { label: "What is Aether DB", href: "#what-is" },
                { label: "How It Works", href: "#process" },
                { label: "Features", href: "#features" },
                { label: "How It Works", href: "#about" },
                { label: "Pricing", href: "#metrics" },
              ],
            },
            {
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
  /* Base units */
  /* --vw is set by ThemeProvider */
-  /* --background: #f7f6f7;;
+  /* --background: #ffffff;;
-  --card: #ffffff;;
+  --card: #f9f9f9;;
-  --foreground: #250c0d;;
+  --foreground: #000000;;
-  --primary-cta: #b82b40;;
+  --primary-cta: #000000;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f9f9f9;;
-  --accent: #b90941;;
+  --accent: #e2e2e2;;
-  --background-accent: #e8a8b6;; */
+  --background-accent: #c4c4c4;; */
-  --background: #f7f6f7;;
+  --background: #ffffff;;
-  --card: #ffffff;;
+  --card: #f9f9f9;;
-  --foreground: #250c0d;;
+  --foreground: #000000;;
-  --primary-cta: #b82b40;;
+  --primary-cta: #000000;;
-  --primary-cta-text: #f7f6f7;;
+  --primary-cta-text: #ffffff;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f9f9f9;;
-  --secondary-cta-text: #250c0d;;
+  --secondary-cta-text: #000000;;
-  --accent: #b90941;;
+  --accent: #e2e2e2;;
-  --background-accent: #e8a8b6;;
+  --background-accent: #c4c4c4;;
  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	269627ee66	Update src/app/page.tsx	2026-03-03 04:35:45 +00:00
bender	fd0950d7d2	Merge version_2 into main Merge version_2 into main	2026-03-03 04:32:58 +00:00
bender	2f9034aa46	Update src/app/styles/variables.css	2026-03-03 04:32:54 +00:00
bender	d0a9454f6a	Update src/app/page.tsx	2026-03-03 04:32:53 +00:00
bender	b453d360a0	Update src/app/layout.tsx	2026-03-03 04:32:53 +00:00
bender	9e10d16d35	Merge version_1 into main Merge version_1 into main	2026-03-03 04:27:16 +00:00