Merge version_2 into main #2
@@ -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
|
||||
className={`${nunitoSans.variable} ${halant.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<body className={`${inter.variable} antialiased`}>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
|
||||
280
src/app/page.tsx
280
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
|
||||
brandName="Aether DB"
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "How It Works", id: "about" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<NavbarStyleApple
|
||||
brandName="Aether DB"
|
||||
navItems={[
|
||||
{ name: "What is Aether DB", id: "what-is" },
|
||||
{ name: "How It Works", id: "process" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ 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"
|
||||
title="Describe Once, Generate Everything"
|
||||
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."
|
||||
tag="What is Aether DB?"
|
||||
title="Enterprise-Grade Database Infrastructure in Minutes"
|
||||
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"
|
||||
@@ -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" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -2,23 +2,23 @@
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
|
||||
/* --background: #f7f6f7;;
|
||||
--card: #ffffff;;
|
||||
--foreground: #250c0d;;
|
||||
--primary-cta: #b82b40;;
|
||||
--secondary-cta: #ffffff;;
|
||||
--accent: #b90941;;
|
||||
--background-accent: #e8a8b6;; */
|
||||
/* --background: #ffffff;;
|
||||
--card: #f9f9f9;;
|
||||
--foreground: #000000;;
|
||||
--primary-cta: #000000;;
|
||||
--secondary-cta: #f9f9f9;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;; */
|
||||
|
||||
--background: #f7f6f7;;
|
||||
--card: #ffffff;;
|
||||
--foreground: #250c0d;;
|
||||
--primary-cta: #b82b40;;
|
||||
--primary-cta-text: #f7f6f7;;
|
||||
--secondary-cta: #ffffff;;
|
||||
--secondary-cta-text: #250c0d;;
|
||||
--accent: #b90941;;
|
||||
--background-accent: #e8a8b6;;
|
||||
--background: #ffffff;;
|
||||
--card: #f9f9f9;;
|
||||
--foreground: #000000;;
|
||||
--primary-cta: #000000;;
|
||||
--primary-cta-text: #ffffff;;
|
||||
--secondary-cta: #f9f9f9;;
|
||||
--secondary-cta-text: #000000;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user