99 lines
2.6 KiB
Plaintext
99 lines
2.6 KiB
Plaintext
##color scheme across all components based on the Home page design.
|
|
|
|
--
|
|
We can create a colors file to maintain consistency
|
|
color.js
|
|
export const colors = {
|
|
primary: {
|
|
light: '#3B82F6', // blue-500
|
|
DEFAULT: '#2563EB', // blue-600
|
|
dark: '#1D4ED8', // blue-700
|
|
darker: '#1E40AF' // blue-800
|
|
},
|
|
background: {
|
|
light: '#F9FAFB', // gray-50
|
|
DEFAULT: '#F3F4F6', // gray-100
|
|
dark: '#E5E7EB' // gray-200
|
|
},
|
|
text: {
|
|
primary: '#1F2937', // gray-800
|
|
secondary: '#4B5563', // gray-600
|
|
light: '#9CA3AF' // gray-400
|
|
},
|
|
white: '#FFFFFF',
|
|
black: '#000000'
|
|
}
|
|
--
|
|
|
|
--
|
|
common component style
|
|
common.js
|
|
export const commonStyles = {
|
|
// Container
|
|
container: "container mx-auto px-4",
|
|
|
|
// Section Headers
|
|
sectionHeader: "text-center mb-16",
|
|
sectionTitle: "text-3xl md:text-4xl font-bold text-gray-800 mb-4",
|
|
sectionDivider: "w-24 h-1 bg-blue-600 mx-auto",
|
|
|
|
// Cards
|
|
card: "bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300",
|
|
|
|
// Buttons
|
|
primaryButton: "bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
|
|
secondaryButton: "bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
|
|
|
|
// Gradients
|
|
primaryGradient: "bg-gradient-to-r from-blue-900/90 to-blue-600/80",
|
|
|
|
// Text
|
|
heading1: "text-4xl md:text-6xl font-bold",
|
|
heading2: "text-3xl md:text-4xl font-bold",
|
|
heading3: "text-2xl font-semibold",
|
|
paragraph: "text-gray-600"
|
|
}
|
|
--
|
|
|
|
--
|
|
reusable section header component
|
|
SectionHeader.jsx
|
|
// Reusable section header component
|
|
export function SectionHeader({ title, subtitle }) {
|
|
return (
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
|
|
{title}
|
|
</h2>
|
|
<div className="w-24 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
{subtitle && (
|
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
--
|
|
reusable button component
|
|
// Reusable button component
|
|
export function Button({ variant = 'primary', children, ...props }) {
|
|
const baseStyles = "px-8 py-3 rounded-full font-semibold transition-colors duration-300";
|
|
const variants = {
|
|
primary: "bg-blue-600 hover:bg-blue-700 text-white",
|
|
secondary: "bg-white/10 hover:bg-white/20 text-white",
|
|
outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`${baseStyles} ${variants[variant]}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
--
|