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>
|
||
);
|
||
}
|
||
--
|