fix: styles

2025-12-15 12:33:13 +07:00 · 2025-12-15 12:33:13 +07:00 · d746a57fa0
parent ccf44af93f
commit d746a57fa0
5 changed files with 41 additions and 35 deletions
--- a/apps/landing/src/app/_components/HeroSection.tsx
+++ b/apps/landing/src/app/_components/HeroSection.tsx
@ -6,7 +6,7 @@ import GlowEffect from './GlowEffect';
 import WaitlistPopup from './WaitlistPopup';
 import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';

-export const styles = `
+const styles = `
  .gradient-text {
    background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
    background-size: 200% 100%;
@ -122,7 +122,9 @@ export function HeroSection() {
  };

  return (
-    <section className="relative pt-20 pb-20 px-6">
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <section className="relative pt-20 pb-20 px-6">
      <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">
          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
@ -208,5 +210,6 @@ export function HeroSection() {
        onSubmit={handleWaitlistSubmit}
      />
    </section>
+    </>
  );
 }
--- a/apps/landing/src/app/_components/ShapeTheFutureSection.tsx
+++ b/apps/landing/src/app/_components/ShapeTheFutureSection.tsx
@ -21,7 +21,7 @@ function generateZigzagClipPath(yValues: number[]): string {
  return `polygon(${topEdge}, ${bottomEdge})`;
 }

-export const styles = `
+const styles = `
  .shape-future {
    clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
  }
@ -43,7 +43,7 @@ export const styles = `
  }

  .shape-future-title {
-    font-family: 'Caveat', cursive;
+    font-family: var(--font-caveat), cursive;
  }
 `;

@ -55,7 +55,9 @@ const features = [

 export function ShapeTheFutureSection() {
  return (
-    <div className="relative my-[60px]">
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <div className="relative my-[60px]">
      <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] " />
        <div className="absolute h-[200px] w-full blur-sm">
@ -87,5 +89,6 @@ export function ShapeTheFutureSection() {
        </div>
      </section>
    </div>
+    </>
  );
 }
--- a/apps/landing/src/app/_components/index.ts
+++ b/apps/landing/src/app/_components/index.ts
@ -1,12 +1,12 @@
 export { BackgroundBlobs } from './BackgroundBlobs';
 export { HeroGlow } from './HeroGlow';
-export { HeroSection, styles as heroStyles } from './HeroSection';
+export { HeroSection } from './HeroSection';
 export { ApiExampleSection } from './ApiExampleSection';
 export { ProblemSolutionSection } from './ProblemSolutionSection';
 export { PromptUrlsSection } from './PromptUrlsSection';
 export { HowItWorksSection } from './HowItWorksSection';
 export { KeyFeaturesSection } from './KeyFeaturesSection';
 export { IntegrationsSection } from './IntegrationsSection';
-export { ShapeTheFutureSection, styles as shapeFutureStyles } from './ShapeTheFutureSection';
+export { ShapeTheFutureSection } from './ShapeTheFutureSection';
 export { GeminiSection } from './GeminiSection';
 export { FinalCtaSection } from './FinalCtaSection';
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Caveat } from 'next/font/google';
 import Image from 'next/image';
 import { Footer } from '@/components/shared/Footer';
 import './globals.css';
@ -10,6 +10,13 @@ const inter = Inter({
  display: 'swap',
 });

+const caveat = Caveat({
+  variable: '--font-caveat',
+  subsets: ['latin'],
+  weight: ['500', '600', '700'],
+  display: 'swap',
+});
+

 export default function RootLayout({
  children,
@ -22,7 +29,7 @@ export default function RootLayout({
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </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">
          {/* Animated gradient background */}
          <div className="fixed inset-0 overflow-hidden pointer-events-none">
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@ -2,7 +2,6 @@ import {
  BackgroundBlobs,
  HeroGlow,
  HeroSection,
-  heroStyles,
  ApiExampleSection,
  ProblemSolutionSection,
  PromptUrlsSection,
@ -10,39 +9,44 @@ import {
  KeyFeaturesSection,
  IntegrationsSection,
  ShapeTheFutureSection,
-  shapeFutureStyles,
  GeminiSection,
  FinalCtaSection,
 } from './_components';

-import type { Metadata, Viewport } from 'next'
+import type { Metadata, Viewport } from 'next';

 export const viewport: Viewport = {
  themeColor: '#0a0a0f',
-}
+};

 export const metadata: Metadata = {
  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.',
-  keywords: ['API-first image generation', 'AI image API', 'image generation for developers', 'prompt to image API', 'CDN image delivery'],
+  description:
+    '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' }],
  robots: 'index, follow',

-  // Canonical & Alternates
  alternates: {
    canonical: 'https://banatie.app',
    languages: {
-      'en': 'https://banatie.app',
+      en: 'https://banatie.app',
      'x-default': 'https://banatie.app',
    },
  },

-  // Open Graph
  openGraph: {
    type: 'website',
    url: 'https://banatie.app',
    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',
    locale: 'en_US',
    images: [
@ -55,28 +59,18 @@ export const metadata: Metadata = {
    ],
  },

-  // Twitter
  twitter: {
    card: 'summary_large_image',
    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'],
  },
-}
-
-const customStyles = `
-  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
-
-  ${heroStyles}
-
-  ${shapeFutureStyles}
-`;
+};

 export default function Home() {
  return (
-    <>
-      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
-      <div className="relative">
+    <div className="relative">
        <BackgroundBlobs />
        <HeroGlow />

@ -90,7 +84,6 @@ export default function Home() {
        <ShapeTheFutureSection />
        <GeminiSection />
        <FinalCtaSection />
-      </div>
-    </>
+    </div>
  );
 }