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,26 +1,16 @@
|
||||
/* src/styles/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/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
/* Root Variables for Nigerian Theme */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
--nigerian-green: #16a34a;
|
||||
--nigerian-white: #ffffff;
|
||||
--kente-gold: #f59e0b;
|
||||
--adire-blue: #2563eb;
|
||||
--ankara-red: #dc2626;
|
||||
--earth-brown: #a18072;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f0fdf4 100%);
|
||||
min-height: 100vh;
|
||||
--adire-blue: #2563eb;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
@@ -41,357 +31,138 @@ body {
|
||||
background: #15803d;
|
||||
}
|
||||
|
||||
/* Smooth hover transitions */
|
||||
* {
|
||||
transition: all 0.2s ease-in-out;
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--nigerian-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--kente-gold);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background: var(--ankara-red);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
background: white;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Input styling */
|
||||
.input, .textarea {
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e5e5e5;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.75rem 1rem;
|
||||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input:focus, .textarea:focus {
|
||||
border-color: var(--nigerian-green);
|
||||
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Badge styling */
|
||||
.badge {
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: var(--nigerian-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: var(--kente-gold);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Hero text animations */
|
||||
/* Animation keyframes */
|
||||
@keyframes textShine {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
.text-shine {
|
||||
background: linear-gradient(90deg, var(--nigerian-green), var(--kente-gold), var(--ankara-red), var(--nigerian-green));
|
||||
background-size: 200% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textShine 3s linear infinite;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% { transform: translateY(30px); opacity: 0; }
|
||||
100% { transform: translateY(0px); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes bounceGentle {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-5px); }
|
||||
0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
|
||||
40%, 43% { transform: translateY(-10px); }
|
||||
70% { transform: translateY(-5px); }
|
||||
90% { transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.animate-text-shine {
|
||||
background: linear-gradient(90deg, #ffffff, #e0e7ff, #8b5cf6, #e0e7ff, #ffffff);
|
||||
background-size: 300% auto;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: textShine 8s linear infinite; /* Changed from 4s to 8s */
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1s ease-out;
|
||||
}
|
||||
|
||||
.animate-bounce-gentle {
|
||||
animation: bounceGentle 2s ease-in-out infinite;
|
||||
animation: bounceGentle 2s infinite;
|
||||
}
|
||||
|
||||
/* Color utilities */
|
||||
.text-nigerian-green { color: var(--nigerian-green); }
|
||||
.text-kente-gold { color: var(--kente-gold); }
|
||||
.text-ankara-red { color: var(--ankara-red); }
|
||||
.text-primary { color: var(--nigerian-green); }
|
||||
.text-secondary { color: var(--kente-gold); }
|
||||
.text-accent { color: var(--ankara-red); }
|
||||
|
||||
.bg-nigerian-green { background-color: var(--nigerian-green); }
|
||||
.bg-kente-gold { background-color: var(--kente-gold); }
|
||||
.bg-ankara-red { background-color: var(--ankara-red); }
|
||||
.bg-primary { background-color: var(--nigerian-green); }
|
||||
.bg-secondary { background-color: var(--kente-gold); }
|
||||
.bg-accent { background-color: var(--ankara-red); }
|
||||
|
||||
/* Gradient backgrounds */
|
||||
.bg-nigerian-gradient {
|
||||
background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--kente-gold) 100%);
|
||||
.animation-delay-1s {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bg-cultural-gradient {
|
||||
background: linear-gradient(135deg, var(--nigerian-green) 0%, var(--kente-gold) 25%, var(--ankara-red) 75%, var(--nigerian-green) 100%);
|
||||
}
|
||||
/* Layout classes */
|
||||
@layer components {
|
||||
.section {
|
||||
@apply py-16;
|
||||
}
|
||||
|
||||
/* Section padding utility */
|
||||
.section-padding {
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
.container {
|
||||
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section-padding {
|
||||
padding: 3rem 1rem;
|
||||
/* Card components */
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-lg overflow-hidden;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-xl font-bold mb-2;
|
||||
}
|
||||
|
||||
/* Button components */
|
||||
.btn {
|
||||
@apply inline-flex items-center px-6 py-3 rounded-lg font-medium transition-all duration-200 cursor-pointer;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-8 py-4 text-lg;
|
||||
}
|
||||
|
||||
/* Badge components */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
@apply px-4 py-2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid utilities */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
/* Custom utility classes */
|
||||
@layer utilities {
|
||||
.text-shadow-lg {
|
||||
text-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.backdrop-blur-xs {
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.font-headline { font-family: 'Poppins', system-ui, sans-serif; }
|
||||
.font-body { font-family: 'Inter', system-ui, sans-serif; }
|
||||
.font-cultural { font-family: 'Noto Serif', serif; }
|
||||
|
||||
/* Text sizes */
|
||||
.text-xs { font-size: 0.75rem; }
|
||||
.text-sm { font-size: 0.875rem; }
|
||||
.text-base { font-size: 1rem; }
|
||||
.text-lg { font-size: 1.125rem; }
|
||||
.text-xl { font-size: 1.25rem; }
|
||||
.text-2xl { font-size: 1.5rem; }
|
||||
.text-3xl { font-size: 1.875rem; }
|
||||
.text-4xl { font-size: 2.25rem; }
|
||||
.text-5xl { font-size: 3rem; }
|
||||
.text-6xl { font-size: 3.75rem; }
|
||||
.text-7xl { font-size: 4.5rem; }
|
||||
|
||||
/* Font weights */
|
||||
.font-light { font-weight: 300; }
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
|
||||
/* Spacing utilities */
|
||||
.p-4 { padding: 1rem; }
|
||||
.p-6 { padding: 1.5rem; }
|
||||
.p-8 { padding: 2rem; }
|
||||
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
||||
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.m-4 { margin: 1rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.mb-6 { margin-bottom: 1.5rem; }
|
||||
.mb-8 { margin-bottom: 2rem; }
|
||||
.mt-8 { margin-top: 2rem; }
|
||||
.mt-12 { margin-top: 3rem; }
|
||||
.mt-16 { margin-top: 4rem; }
|
||||
.mt-20 { margin-top: 5rem; }
|
||||
|
||||
/* Layout utilities */
|
||||
.flex { display: flex; }
|
||||
.grid { display: grid; }
|
||||
.block { display: block; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
.gap-8 { gap: 2rem; }
|
||||
.gap-12 { gap: 3rem; }
|
||||
|
||||
/* Grid utilities */
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
/* Animation utilities */
|
||||
[data-animate-on-scroll] {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.lg\\:col-span-2 { grid-column: span 2 / span 2; }
|
||||
[data-animate-on-scroll].visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.top-0 { top: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
.z-10 { z-index: 10; }
|
||||
.z-50 { z-index: 50; }
|
||||
/* Responsive design adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
@apply py-8;
|
||||
}
|
||||
|
||||
.hero-title-shine {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Width and height */
|
||||
.w-full { width: 100%; }
|
||||
.h-full { height: 100%; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
.max-w-2xl { max-width: 42rem; }
|
||||
.max-w-3xl { max-width: 48rem; }
|
||||
.max-w-4xl { max-width: 56rem; }
|
||||
.max-w-5xl { max-width: 64rem; }
|
||||
.max-w-6xl { max-width: 72rem; }
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Rounded corners */
|
||||
.rounded-lg { border-radius: 0.5rem; }
|
||||
.rounded-xl { border-radius: 0.75rem; }
|
||||
.rounded-2xl { border-radius: 1rem; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
|
||||
/* Shadows */
|
||||
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
|
||||
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
|
||||
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
|
||||
|
||||
/* Transforms */
|
||||
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
|
||||
.hover\\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
|
||||
.hover\\:-translate-y-2:hover { --tw-translate-y: -0.5rem; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
|
||||
/* Overflow */
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
|
||||
/* Background opacity */
|
||||
.bg-opacity-80 { background-color: rgba(var(--tw-bg-opacity-value, 1), 0.8); }
|
||||
.bg-opacity-90 { background-color: rgba(var(--tw-bg-opacity-value, 1), 0.9); }
|
||||
|
||||
/* Object fit */
|
||||
.object-cover { object-fit: cover; }
|
||||
.object-contain { object-fit: contain; }
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-text-shine,
|
||||
.animate-float,
|
||||
.animate-bounce-gentle {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
* {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user