Refactor project structure: update Astro configuration, integrate Tailwind CSS, enhance ContactForm with validation, and improve layout for various pages. Add new Donate and Orphanage pages, and implement responsive design adjustments across components.
This commit is contained in:
@@ -1,284 +1,86 @@
|
||||
// tailwind.config.mjs
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Nigerian flag colors as primary palette
|
||||
'nigerian-green': {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d',
|
||||
},
|
||||
'nigerian-white': {
|
||||
50: '#ffffff',
|
||||
100: '#fefefe',
|
||||
200: '#fafafa',
|
||||
300: '#f5f5f5',
|
||||
400: '#efefef',
|
||||
500: '#e5e5e5',
|
||||
},
|
||||
// Rich cultural colors inspired by Nigerian textiles
|
||||
'kente-gold': {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
200: '#fde68a',
|
||||
300: '#fcd34d',
|
||||
400: '#fbbf24',
|
||||
500: '#f59e0b',
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
800: '#92400e',
|
||||
900: '#78350f',
|
||||
},
|
||||
'adire-blue': {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
},
|
||||
'ankara-red': {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
},
|
||||
'earth-brown': {
|
||||
50: '#fdf8f6',
|
||||
100: '#f2e8e5',
|
||||
200: '#eaddd7',
|
||||
300: '#e0cfc5',
|
||||
400: '#d2bab0',
|
||||
500: '#bfa094',
|
||||
600: '#a18072',
|
||||
700: '#977669',
|
||||
800: '#846358',
|
||||
900: '#43302b',
|
||||
}
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
||||
'headline': ['Poppins', 'system-ui', 'sans-serif'],
|
||||
'serif': ['Noto Serif', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
'nigerian-green': {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#16a34a', // Primary Nigerian green
|
||||
600: '#15803d',
|
||||
700: '#166534',
|
||||
800: '#14532d',
|
||||
900: '#14532d',
|
||||
},
|
||||
fontFamily: {
|
||||
'headline': ['Poppins', 'system-ui', 'sans-serif'],
|
||||
'body': ['Inter', 'system-ui', 'sans-serif'],
|
||||
'cultural': ['Noto Serif', 'serif'],
|
||||
'kente-gold': {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
200: '#fde68a',
|
||||
300: '#fcd34d',
|
||||
400: '#fbbf24',
|
||||
500: '#f59e0b', // Primary gold
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
800: '#92400e',
|
||||
900: '#78350f',
|
||||
},
|
||||
backgroundImage: {
|
||||
'nigerian-pattern': `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f59e0b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
'kente-gradient': 'linear-gradient(135deg, #f59e0b 0%, #dc2626 25%, #16a34a 50%, #2563eb 75%, #f59e0b 100%)',
|
||||
'hero-overlay': 'linear-gradient(135deg, rgba(22, 163, 74, 0.9) 0%, rgba(245, 158, 11, 0.8) 100%)',
|
||||
'ankara-red': {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626', // Primary red
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'slide-up': 'slideUp 0.8s ease-out',
|
||||
'fade-in': 'fadeIn 1s ease-out',
|
||||
'bounce-gentle': 'bounceGentle 2s ease-in-out infinite',
|
||||
'adire-blue': {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb', // Primary blue
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
},
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(30px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0px)', opacity: '1' },
|
||||
},
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
bounceGentle: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-5px)' },
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'text-shine': 'text-shine 8s linear infinite', // Changed from 4s to 8s
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'bounce-gentle': 'bounce-gentle 2s infinite',
|
||||
},
|
||||
keyframes: {
|
||||
'text-shine': {
|
||||
'0%': { 'background-position': '-200% center' },
|
||||
'100%': { 'background-position': '200% center' },
|
||||
},
|
||||
'float': {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
'bounce-gentle': {
|
||||
'0%, 20%, 53%, 80%, 100%': { transform: 'translateY(0)' },
|
||||
'40%, 43%': { transform: 'translateY(-10px)' },
|
||||
'70%': { transform: 'translateY(-5px)' },
|
||||
'90%': { transform: 'translateY(-2px)' },
|
||||
},
|
||||
boxShadow: {
|
||||
'nigerian': '0 10px 25px -3px rgba(22, 163, 74, 0.1), 0 4px 6px -2px rgba(22, 163, 74, 0.05)',
|
||||
'kente': '0 10px 25px -3px rgba(245, 158, 11, 0.2), 0 4px 6px -2px rgba(245, 158, 11, 0.1)',
|
||||
}
|
||||
},
|
||||
},
|
||||
daisyui: {
|
||||
themes: [
|
||||
{
|
||||
omoluabi: {
|
||||
"primary": "#16a34a", // Nigerian green
|
||||
"secondary": "#f59e0b", // Kente gold
|
||||
"accent": "#dc2626", // Ankara red
|
||||
"neutral": "#fafafa", // Clean white base
|
||||
"base-100": "#ffffff", // Pure white
|
||||
"base-200": "#f5f5f5", // Light gray
|
||||
"base-300": "#e5e5e5", // Medium gray
|
||||
"info": "#2563eb", // Adire blue
|
||||
"success": "#22c55e", // Success green
|
||||
"warning": "#f59e0b", // Warning gold
|
||||
"error": "#dc2626", // Error red
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [require("daisyui")],
|
||||
}
|
||||
|
||||
/* Updated global.css */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=Noto+Serif:wght@400;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f0fdf4 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #16a34a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #15803d;
|
||||
}
|
||||
|
||||
/* Smooth hover transitions */
|
||||
* {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Nigerian pattern overlay */
|
||||
.nigerian-pattern {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nigerian-pattern::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f59e0b' fill-opacity='0.03'%3E%3Cpath d='M20 20c0 11.046-8.954 20-20 20v-40c11.046 0 20 8.954 20 20zM40 20c0 11.046-8.954 20-20 20v-40c11.046 0 20 8.954 20 20z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Enhanced button styles */
|
||||
.btn {
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Card enhancements */
|
||||
.card {
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(229, 229, 229, 0.8);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Input styling */
|
||||
.input, .textarea {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e5e5e5;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input:focus, .textarea:focus {
|
||||
border-color: #16a34a;
|
||||
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
|
||||
}
|
||||
|
||||
/* Badge styling */
|
||||
.badge {
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Hero text animations */
|
||||
@keyframes textShine {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
.text-shine {
|
||||
background: linear-gradient(90deg, #16a34a, #f59e0b, #dc2626, #16a34a);
|
||||
background-size: 200% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textShine 3s linear infinite;
|
||||
}
|
||||
|
||||
/* Loading animations */
|
||||
.animate-pulse-slow {
|
||||
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Custom spacing utilities */
|
||||
.section-padding {
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section-padding {
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user