jesseinit/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: modularize ui components

Browse Source
This commit is contained in:
Jesse Egbosionu
2025-12-01 22:57:12 +01:00
parent 5c22b9b844
commit c460ea27d4
8 changed files with 270 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/globals.scss
+17 -17
View File
@@ -81,7 +81,7 @@ strong {
// HEADER
.header {
padding: var(--spacing-lg) 0;
border-bottom: 2px solid var(--color-primary);
border-bottom: 1px solid var(--color-primary);
background: rgba(255, 254, 240, 0.95);
backdrop-filter: blur(10px);
position: sticky;
@@ -105,7 +105,7 @@ strong {
background: var(--color-accent);
color: var(--color-primary);
padding: 0.25rem 0.75rem;
border: 2px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
}
}
@@ -132,7 +132,7 @@ strong {
&.cta {
color: var(--color-primary);
background: var(--color-accent);
border: 2px solid var(--color-primary);
border: 1px solid var(--color-primary);
&:hover {
background: var(--color-accent-hover);
@@ -175,7 +175,7 @@ strong {
background: var(--color-accent);
color: var(--color-primary);
padding: 0 0.5rem;
border-bottom: 4px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
}
}
@@ -215,7 +215,7 @@ strong {
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-background);
border: 2px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-weight: 600;
@@ -253,7 +253,7 @@ strong {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: fadeInUp 0.6s ease 0.4s forwards;
opacity: 0;
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
&:hover {
background: var(--color-accent);
@@ -289,7 +289,7 @@ strong {
border-radius: var(--radius-lg);
transform: rotate(-6deg);
z-index: -1;
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
}
.hero-image {
@@ -300,7 +300,7 @@ strong {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
object-fit: cover;
transition: transform 0.3s ease;
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
&:hover {
transform: scale(1.02) rotate(2deg);
@@ -309,7 +309,7 @@ strong {
// FOOTER
.footer {
border-top: 2px solid var(--color-primary);
border-top: 1px solid var(--color-primary);
padding: var(--spacing-lg) 0;
margin-top: auto;
}
@@ -393,7 +393,7 @@ strong {
gap: var(--spacing-lg);
text-align: center;
padding-bottom: var(--spacing-lg);
border-bottom: 2px solid var(--color-primary);
border-bottom: 1px solid var(--color-primary);
}
.rates-title-group {
@@ -429,7 +429,7 @@ strong {
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-accent);
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-lg);
font-weight: 700;
font-size: 1.125rem;
@@ -461,7 +461,7 @@ strong {
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--color-background);
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-lg);
transition: all 0.3s ease;
cursor: pointer;
@@ -480,7 +480,7 @@ strong {
}
&.best {
border-width: 4px;
border-width: 2px;
background: var(--color-accent);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: relative;
@@ -492,7 +492,7 @@ strong {
top: 0;
left: 0;
right: 0;
height: 6px;
height: 3px;
background: var(--color-primary);
}
@@ -537,7 +537,7 @@ strong {
letter-spacing: 0.75px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
animation: badgePulse 2s ease-in-out infinite;
border: 2px solid var(--color-primary);
border: 1px solid var(--color-primary);
&::before {
content: '★';
@@ -598,7 +598,7 @@ strong {
gap: var(--spacing-xs);
padding: var(--spacing-lg);
background: var(--color-surface);
border: 2px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-lg);
text-align: center;
animation: fadeInUp 0.6s ease 0.4s forwards;
@@ -700,7 +700,7 @@ strong {
padding: var(--spacing-sm) var(--spacing-lg);
background: var(--color-primary);
color: var(--color-accent);
border: 3px solid var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;