116 lines
7.7 KiB
JSON
116 lines
7.7 KiB
JSON
{
|
|
"identity": {
|
|
"persona": "E1",
|
|
"tone": "Cyber-Professional",
|
|
"archetype": "Jewel & Luxury (Deep Obsidian) + Electric & Neon (Accents)",
|
|
"mission": "Build a high-trust, tech-forward MSP & SaaS landing page that feels like a command center."
|
|
},
|
|
"typography": {
|
|
"headings": {
|
|
"font_family": "Syne, sans-serif",
|
|
"weights": ["700", "800"],
|
|
"usage": "Use for all H1-H3. Tight tracking (-0.02em). Uppercase for labels."
|
|
},
|
|
"body": {
|
|
"font_family": "Manrope, sans-serif",
|
|
"weights": ["400", "500"],
|
|
"usage": "Use for paragraphs, UI text, and buttons. Relaxed leading."
|
|
},
|
|
"installation": "Import from Google Fonts: https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Syne:wght@700;800&display=swap"
|
|
},
|
|
"colors": {
|
|
"palette": {
|
|
"background": "#050505",
|
|
"surface": "#0A0A0A",
|
|
"surface_highlight": "#121212",
|
|
"primary": "#00F0FF",
|
|
"primary_dim": "rgba(0, 240, 255, 0.1)",
|
|
"secondary": "#7000FF",
|
|
"text_main": "#FFFFFF",
|
|
"text_muted": "#94A3B8",
|
|
"border": "#1E293B",
|
|
"border_hover": "#334155"
|
|
},
|
|
"gradients": {
|
|
"hero_glow": "radial-gradient(circle at center, rgba(0, 240, 255, 0.15) 0%, rgba(5, 5, 5, 0) 70%)",
|
|
"card_hover": "linear-gradient(45deg, rgba(0, 240, 255, 0.1), rgba(112, 0, 255, 0.1))"
|
|
}
|
|
},
|
|
"layout": {
|
|
"grid_system": "Bento Grid (Mode A: Tetris)",
|
|
"spacing": {
|
|
"section_padding": "py-24 md:py-32",
|
|
"container_padding": "px-6 md:px-12",
|
|
"element_gap": "gap-8"
|
|
},
|
|
"container_width": "max-w-7xl mx-auto"
|
|
},
|
|
"components": {
|
|
"buttons": {
|
|
"primary": "bg-primary text-black font-bold hover:shadow-[0_0_20px_rgba(0,240,255,0.5)] transition-all duration-300 rounded-none skew-x-[-10deg]",
|
|
"secondary": "border border-white/20 text-white hover:bg-white/10 transition-all duration-300 rounded-none skew-x-[-10deg]"
|
|
},
|
|
"cards": {
|
|
"style": "bg-surface border border-white/5 hover:border-primary/50 transition-colors duration-300",
|
|
"hover_effect": "Add a subtle glow or lift on hover. Use 'group' to animate inner elements."
|
|
},
|
|
"hero": {
|
|
"style": "Full screen height (min-h-screen). Background image with heavy overlay. Text centered or split. Use 'Trace Beam' effect for the main CTA."
|
|
}
|
|
},
|
|
"visual_enhancers": {
|
|
"textures": "Add a subtle noise overlay (opacity 0.03) to the entire body to kill the digital flatness.",
|
|
"borders": "Use 1px borders with very low opacity (white/10) for structure.",
|
|
"shadows": "Use colored shadows (shadow-cyan-500/20) for primary actions."
|
|
},
|
|
"media": {
|
|
"image_urls": {
|
|
"hero_bg": "https://images.pexels.com/photos/17489157/pexels-photo-17489157.jpeg",
|
|
"service_security": "https://images.unsplash.com/photo-1696013910376-c56f76dd8178?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzMjV8MHwxfHNlYXJjaHwxfHxjeWJlcnNlY3VyaXR5JTIwZGlnaXRhbCUyMHNoaWVsZCUyMGxvY2slMjBjb25jZXB0fGVufDB8fHx8MTc3MDE4MzQ1Mnww&ixlib=rb-4.1.0&q=85",
|
|
"service_cloud": "https://images.unsplash.com/photo-1744868562210-fffb7fa882d9?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzNTl8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZyUyMG5ldHdvcmslMjBjb25uZWN0aW9ufGVufDB8fHx8MTc3MDE4MzQ1N3ww&ixlib=rb-4.1.0&q=85",
|
|
"testimonial_1": "https://images.unsplash.com/photo-1689600944138-da3b150d9cb8?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzZ8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBidXNpbmVzcyUyMHBvcnRyYWl0JTIwaGVhZHNob3R8ZW58MHx8fHwxNzcwMDc5NDA0fDA&ixlib=rb-4.1.0&q=85",
|
|
"testimonial_2": "https://images.unsplash.com/photo-1576558656222-ba66febe3dec?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzZ8MHwxfHNlYXJjaHwyfHxwcm9mZXNzaW9uYWwlMjBidXNpbmVzcyUyMHBvcnRyYWl0JTIwaGVhZHNob3R8ZW58MHx8fHwxNzcwMDc5NDA0fDA&ixlib=rb-4.1.0&q=85",
|
|
"partner_logo_1": "https://images.unsplash.com/photo-1662057168154-89300791ad6e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzF8MHwxfHNlYXJjaHwxfHx0ZWNoJTIwY29tcGFueSUyMGxvZ28lMjB2ZWN0b3IlMjB3aGl0ZXxlbnwwfHx8fDE3NzAxODM0NjJ8MA&ixlib=rb-4.1.0&q=85",
|
|
"partner_logo_2": "https://images.unsplash.com/photo-1662027044921-6febc57a0c53?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzF8MHwxfHNlYXJjaHwyfHx0ZWNoJTIwY29tcGFueSUyMGxvZ28lMjB2ZWN0b3IlMjB3aGl0ZXxlbnwwfHx8fDE3NzAxODM0NjJ8MA&ixlib=rb-4.1.0&q=85"
|
|
}
|
|
},
|
|
"motion": {
|
|
"library": "framer-motion",
|
|
"guidelines": "Use 'staggerChildren' for lists. Hero text should slide up with a slight blur reveal. Buttons should have a 'magnetic' feel if possible, or at least a solid scale/color shift."
|
|
},
|
|
"accessibility": {
|
|
"contrast": "Ensure all text on dark backgrounds is at least WCAG AA compliant. Use lighter greys (text-gray-300) instead of dark greys.",
|
|
"focus_states": "Visible focus rings in Primary Cyan color."
|
|
},
|
|
"instructions_to_main_agent": [
|
|
"1. Install 'lucide-react' and 'framer-motion' immediately.",
|
|
"2. Create a 'Layout' component that wraps the page and handles the dark mode background and noise texture.",
|
|
"3. Build the Hero section first. It must be impressive. Use the 'Trace Beam' concept for the CTA.",
|
|
"4. For the Services section, use a Bento Grid. Do not just stack cards.",
|
|
"5. Use the provided image URLs. Do not use placeholders.",
|
|
"6. Ensure the 'Contact' form uses Shadcn components but styled to match the dark theme (no white backgrounds).",
|
|
"7. Add 'data-testid' to all interactive elements."
|
|
],
|
|
"UNIVERSAL_GUIDELINES_FOR_MAIN_AGENT": [
|
|
"Dark colors look good when used independently without gradients. DO NOT use dark colors as gradients",
|
|
"Don't make generic centered layouts, simplistic gradients, and uniform styling.",
|
|
"Create depth through layered design elements with z-index hierarchy",
|
|
"Use glass-morphism effects with backdrop filters (12-24px blur)",
|
|
"You MUST NOT apply universal transition. Eg: transition: all. This results in breaking transforms. Always add transitions for specific interactive elements like button, input excluding transforms",
|
|
"You MUST NOT center align the app container, ie do not add .App { text-align: center; } in the css file. This disrupts the human natural reading flow of text",
|
|
"Always use modern button styles like pill-shaped, or sharp button with interaction animations & color relevant to the app style",
|
|
"NEVER: use AI assistant Emoji characters like 🤖🧠💭💡🔮🎯📚🎭🎬🎪🎉🎊🎁🎀🎂🍰🎈🎨🎰💰💵💳🏦💎🪙💸🤑📊📈📉💹🔢🏆🥇 etc for icons.",
|
|
"Every interaction needs micro-animations - hover states, transitions, parallax effects, and entrance animations. Static = dead.",
|
|
"Use 2-3x more spacing than feels comfortable. Cramped designs look cheap.",
|
|
"Subtle grain textures, noise overlays, custom cursors, selection states, and loading animations: separates good from extraordinary.",
|
|
"Main agent relies on these image URLs. Missing categories (especially sponsor logos) = main agent will use placeholder text which is FORBIDDEN",
|
|
"Prioritize using pre-existing components from src/components/ui when applicable",
|
|
"Create new components that match the style and conventions of existing components when needed",
|
|
"Examine existing components to understand the project's component patterns before creating new ones",
|
|
"Components MUST use named exports (export const ComponentName = ...)",
|
|
"Pages MUST use default exports (export default function PageName() {...})",
|
|
"Use 'sonner' for toasts. Sonner component are located in /app/src/components/ui/sonner.tsx"
|
|
]
|
|
}
|
|
|
|
|