mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 02:29:41 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
106 lines
2.4 KiB
TypeScript
106 lines
2.4 KiB
TypeScript
/**
|
|
* Utility functions for shared landing UI components
|
|
*/
|
|
|
|
/**
|
|
* CSS custom properties that should be defined in your project's CSS
|
|
* for the shared components to work correctly.
|
|
*/
|
|
export const requiredCssVariables = [
|
|
'--color-primary',
|
|
'--color-primary-hover',
|
|
'--color-primary-glow',
|
|
'--color-text-primary',
|
|
'--color-text-secondary',
|
|
'--color-text-muted',
|
|
'--color-background-page',
|
|
'--color-background-card',
|
|
'--color-background-card-hover',
|
|
'--color-border',
|
|
'--color-border-hover',
|
|
] as const;
|
|
|
|
/**
|
|
* Example CSS variable definitions for light theme
|
|
*/
|
|
export const exampleLightTheme = `
|
|
:root {
|
|
--color-primary: #3b82f6;
|
|
--color-primary-hover: #2563eb;
|
|
--color-primary-glow: rgba(59, 130, 246, 0.3);
|
|
--color-text-primary: #111827;
|
|
--color-text-secondary: #4b5563;
|
|
--color-text-muted: #9ca3af;
|
|
--color-background-page: #ffffff;
|
|
--color-background-card: #f9fafb;
|
|
--color-background-card-hover: #f3f4f6;
|
|
--color-border: #e5e7eb;
|
|
--color-border-hover: #d1d5db;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* Example CSS variable definitions for dark theme
|
|
*/
|
|
export const exampleDarkTheme = `
|
|
:root {
|
|
--color-primary: #3b82f6;
|
|
--color-primary-hover: #60a5fa;
|
|
--color-primary-glow: rgba(59, 130, 246, 0.3);
|
|
--color-text-primary: #f9fafb;
|
|
--color-text-secondary: #d1d5db;
|
|
--color-text-muted: #6b7280;
|
|
--color-background-page: #111827;
|
|
--color-background-card: #1f2937;
|
|
--color-background-card-hover: #374151;
|
|
--color-border: #374151;
|
|
--color-border-hover: #4b5563;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* Type definitions for component props (for TypeScript users)
|
|
*/
|
|
export interface ButtonProps {
|
|
href?: string;
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export interface CardProps {
|
|
variant?: 'default' | 'hover' | 'glow' | 'bordered';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
export interface Feature {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
href?: string;
|
|
}
|
|
|
|
export interface Testimonial {
|
|
name: string;
|
|
role?: string;
|
|
company?: string;
|
|
text: string;
|
|
image?: string;
|
|
rating?: number;
|
|
}
|
|
|
|
export interface FAQItem {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
export interface PricingPlan {
|
|
name: string;
|
|
description?: string;
|
|
price: string;
|
|
period?: string;
|
|
features: Array<{ text: string; included: boolean } | string>;
|
|
cta: { text: string; href: string };
|
|
highlighted?: boolean;
|
|
badge?: string;
|
|
}
|