usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: styles

This commit is contained in:
Oleg Proskurin 2025-12-15 12:33:13 +07:00
parent ccf44af93f
commit d746a57fa0
5 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/landing/src/app/_components/HeroSection.tsx
View File

@ -6,7 +6,7 @@ import GlowEffect from './GlowEffect';
import WaitlistPopup from './WaitlistPopup'; import WaitlistPopup from './WaitlistPopup';
import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions'; import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
export const styles = ` const styles = `
.gradient-text { .gradient-text {
background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%); background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
background-size: 200% 100%; background-size: 200% 100%;
@ -122,6 +122,8 @@ export function HeroSection() {
}; };
return ( return (
<>
<style dangerouslySetInnerHTML={{ __html: styles }} />
<section className="relative pt-20 pb-20 px-6"> <section className="relative pt-20 pb-20 px-6">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6"> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
@ -208,5 +210,6 @@ export function HeroSection() {
onSubmit={handleWaitlistSubmit} onSubmit={handleWaitlistSubmit}
/> />
</section> </section>
</>
); );
} }

7
apps/landing/src/app/_components/ShapeTheFutureSection.tsx
View File

@ -21,7 +21,7 @@ function generateZigzagClipPath(yValues: number[]): string {
return `polygon(${topEdge}, ${bottomEdge})`; return `polygon(${topEdge}, ${bottomEdge})`;
} }
export const styles = ` const styles = `
.shape-future { .shape-future {
clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)}; clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
} }
@ -43,7 +43,7 @@ export const styles = `
} }
.shape-future-title { .shape-future-title {
font-family: 'Caveat', cursive; font-family: var(--font-caveat), cursive;
} }
`; `;
@ -55,6 +55,8 @@ const features = [
export function ShapeTheFutureSection() { export function ShapeTheFutureSection() {
return ( return (
<>
<style dangerouslySetInnerHTML={{ __html: styles }} />
<div className="relative my-[60px]"> <div className="relative my-[60px]">
<section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]"> <section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
<section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " /> <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
@ -87,5 +89,6 @@ export function ShapeTheFutureSection() {
</div> </div>
</section> </section>
</div> </div>
</>
); );
} }

4
apps/landing/src/app/_components/index.ts
View File

@ -1,12 +1,12 @@
export { BackgroundBlobs } from './BackgroundBlobs'; export { BackgroundBlobs } from './BackgroundBlobs';
export { HeroGlow } from './HeroGlow'; export { HeroGlow } from './HeroGlow';
export { HeroSection, styles as heroStyles } from './HeroSection'; export { HeroSection } from './HeroSection';
export { ApiExampleSection } from './ApiExampleSection'; export { ApiExampleSection } from './ApiExampleSection';
export { ProblemSolutionSection } from './ProblemSolutionSection'; export { ProblemSolutionSection } from './ProblemSolutionSection';
export { PromptUrlsSection } from './PromptUrlsSection'; export { PromptUrlsSection } from './PromptUrlsSection';
export { HowItWorksSection } from './HowItWorksSection'; export { HowItWorksSection } from './HowItWorksSection';
export { KeyFeaturesSection } from './KeyFeaturesSection'; export { KeyFeaturesSection } from './KeyFeaturesSection';
export { IntegrationsSection } from './IntegrationsSection'; export { IntegrationsSection } from './IntegrationsSection';
export { ShapeTheFutureSection, styles as shapeFutureStyles } from './ShapeTheFutureSection'; export { ShapeTheFutureSection } from './ShapeTheFutureSection';
export { GeminiSection } from './GeminiSection'; export { GeminiSection } from './GeminiSection';
export { FinalCtaSection } from './FinalCtaSection'; export { FinalCtaSection } from './FinalCtaSection';

11
apps/landing/src/app/layout.tsx
View File

@ -1,5 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { Inter } from 'next/font/google'; import { Inter, Caveat } from 'next/font/google';
import Image from 'next/image'; import Image from 'next/image';
import { Footer } from '@/components/shared/Footer'; import { Footer } from '@/components/shared/Footer';
import './globals.css'; import './globals.css';
@ -10,6 +10,13 @@ const inter = Inter({
display: 'swap', display: 'swap',
}); });
const caveat = Caveat({
variable: '--font-caveat',
subsets: ['latin'],
weight: ['500', '600', '700'],
display: 'swap',
});
export default function RootLayout({ export default function RootLayout({
children, children,
@ -22,7 +29,7 @@ export default function RootLayout({
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
</head> </head>
<body className={`${inter.variable} antialiased`}> <body className={`${inter.variable} ${caveat.variable} antialiased`}>
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"> <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
{/* Animated gradient background */} {/* Animated gradient background */}
<div className="fixed inset-0 overflow-hidden pointer-events-none"> <div className="fixed inset-0 overflow-hidden pointer-events-none">

41
apps/landing/src/app/page.tsx
View File

@ -2,7 +2,6 @@ import {
BackgroundBlobs, BackgroundBlobs,
HeroGlow, HeroGlow,
HeroSection, HeroSection,
heroStyles,
ApiExampleSection, ApiExampleSection,
ProblemSolutionSection, ProblemSolutionSection,
PromptUrlsSection, PromptUrlsSection,
@ -10,39 +9,44 @@ import {
KeyFeaturesSection, KeyFeaturesSection,
IntegrationsSection, IntegrationsSection,
ShapeTheFutureSection, ShapeTheFutureSection,
shapeFutureStyles,
GeminiSection, GeminiSection,
FinalCtaSection, FinalCtaSection,
} from './_components'; } from './_components';
import type { Metadata, Viewport } from 'next' import type { Metadata, Viewport } from 'next';
export const viewport: Viewport = { export const viewport: Viewport = {
themeColor: '#0a0a0f', themeColor: '#0a0a0f',
} };
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'AI Image Generation Inside Your Workflow | Banatie', title: 'AI Image Generation Inside Your Workflow | Banatie',
description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery, style references, and prompt enhancement. Built for developers.', description:
keywords: ['API-first image generation', 'AI image API', 'image generation for developers', 'prompt to image API', 'CDN image delivery'], 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery, style references, and prompt enhancement. Built for developers.',
keywords: [
'API-first image generation',
'AI image API',
'image generation for developers',
'prompt to image API',
'CDN image delivery',
],
authors: [{ name: 'Banatie' }], authors: [{ name: 'Banatie' }],
robots: 'index, follow', robots: 'index, follow',
// Canonical & Alternates
alternates: { alternates: {
canonical: 'https://banatie.app', canonical: 'https://banatie.app',
languages: { languages: {
'en': 'https://banatie.app', en: 'https://banatie.app',
'x-default': 'https://banatie.app', 'x-default': 'https://banatie.app',
}, },
}, },
// Open Graph
openGraph: { openGraph: {
type: 'website', type: 'website',
url: 'https://banatie.app', url: 'https://banatie.app',
title: 'AI Image Generation Inside Your Workflow | Banatie', title: 'AI Image Generation Inside Your Workflow | Banatie',
description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.', description:
'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
siteName: 'Banatie', siteName: 'Banatie',
locale: 'en_US', locale: 'en_US',
images: [ images: [
@ -55,27 +59,17 @@ export const metadata: Metadata = {
], ],
}, },
// Twitter
twitter: { twitter: {
card: 'summary_large_image', card: 'summary_large_image',
title: 'AI Image Generation Inside Your Workflow | Banatie', title: 'AI Image Generation Inside Your Workflow | Banatie',
description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.', description:
'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
images: ['https://banatie.app/og-image.png'], images: ['https://banatie.app/og-image.png'],
}, },
} };
const customStyles = `
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
${heroStyles}
${shapeFutureStyles}
`;
export default function Home() { export default function Home() {
return ( return (
<>
<style dangerouslySetInnerHTML={{ __html: customStyles }} />
<div className="relative"> <div className="relative">
<BackgroundBlobs /> <BackgroundBlobs />
<HeroGlow /> <HeroGlow />
@ -91,6 +85,5 @@ export default function Home() {
<GeminiSection /> <GeminiSection />
<FinalCtaSection /> <FinalCtaSection />
</div> </div>
</>
); );
} }