generated from Nicholai/astro-template
burger
This commit is contained in:
parent
9dfb293567
commit
0e57ee069d
@ -52,6 +52,43 @@ Development log for tracking changes, decisions, and next steps.
|
||||
|
||||
---
|
||||
|
||||
## 2025-12-27 - Hero Screenshot Match Polish
|
||||
|
||||
### Changes
|
||||
- **Hero background treatment**:
|
||||
- Moved the tileable pattern so it lives *outside* the hero card (page background) to match the reference composition.
|
||||
- Updated the hero card to a smoother forest gradient with a soft vignette/highlight, closer to the mock.
|
||||
- **Hero visual composition**:
|
||||
- Added/strengthened the circular backdrop behind the brush/swatches image.
|
||||
- Nudged/scaled the brush/swatches to reveal more of the circle and create more negative space.
|
||||
- Repositioned/restyled the floating cards so they sit closer to the brush/circle like the provided screenshot.
|
||||
- **CTA styling**:
|
||||
- Tweaked the secondary button to have a subtle dark fill + light border (instead of fully transparent) to better match the mock.
|
||||
|
||||
### Decisions
|
||||
- Prioritized matching the mock’s “pattern outside the card” framing over keeping texture inside the hero card.
|
||||
|
||||
### Next Steps
|
||||
- [ ] Replace the floating card text/labels (e.g. “Woodwork Care”) with final approved copy (if needed).
|
||||
|
||||
---
|
||||
|
||||
## 2025-12-27 - Expertise Mosaic Redesign
|
||||
|
||||
### Changes
|
||||
- Replaced the prior 3-card “Our Expertise” layout with a **2-row mosaic grid** (icon tiles + image tiles + text tiles) to match the provided screenshot.
|
||||
- Added a **patterned frame treatment** for the expertise section using `src/assets/tileablepattern.png`, including top/bottom pattern strips and subtle vignette.
|
||||
- Reused existing site imagery assets (`closeupbrush4.png`, `cards.png`, `puttyknife2.png`) for the mosaic image tiles.
|
||||
|
||||
### Decisions
|
||||
- Kept the section’s semantic heading (`h2`) as **screen-reader-only** to preserve accessibility while matching the screenshot’s visual layout.
|
||||
- Implemented the mosaic with a responsive grid: stacks to 1 column on mobile, 2 columns on small screens, 4 columns on desktop.
|
||||
|
||||
### Next Steps
|
||||
- [ ] Review and approve the tile text copy (Premium Painting / Handyman Services descriptions).
|
||||
|
||||
---
|
||||
|
||||
## 2025-12-27 - Logo Integration & Favicon Generation
|
||||
|
||||
### Changes
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
Paintbrush,
|
||||
Hammer,
|
||||
Check,
|
||||
Star,
|
||||
MapPin,
|
||||
Trees,
|
||||
Ruler,
|
||||
@ -95,153 +94,237 @@ import brushImg from "../assets/brushandswatchestransparent.png";
|
||||
|
||||
<main class="w-full overflow-hidden bg-[#FAF9F6]">
|
||||
<!-- Hero Section -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6">
|
||||
<section class="relative mt-6">
|
||||
<!-- Pattern lives OUTSIDE the hero card (matches reference) -->
|
||||
<div
|
||||
class="relative bg-[#3A4D39] rounded-[3rem] p-8 md:p-16 overflow-hidden min-h-[700px] flex flex-col md:flex-row items-center justify-between gap-12"
|
||||
class="absolute inset-0 opacity-[0.10] mix-blend-multiply pointer-events-none"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
|
||||
>
|
||||
<!-- Tileable Pattern Overlay -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 400px;`}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Content (Left) -->
|
||||
<div class="relative z-10 max-w-xl text-center md:text-left mt-8 md:mt-0">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6">
|
||||
<div
|
||||
class="relative rounded-[3rem] px-10 py-12 md:px-16 md:py-16 overflow-hidden min-h-[520px] flex flex-col md:flex-row items-start md:items-center justify-between gap-10 bg-gradient-to-br from-[#4b664b] via-[#3A4D39] to-[#2a3b2a] shadow-[0_40px_110px_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<!-- Soft vignette + highlight (smooth card look) -->
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-8"
|
||||
class="absolute inset-0 pointer-events-none"
|
||||
style="background: radial-gradient(1200px circle at 18% 18%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(900px circle at 78% 30%, rgba(0,0,0,0.22), transparent 55%);"
|
||||
>
|
||||
<Star size={14} className="text-[#ECE3CE]" fill="#ECE3CE" />
|
||||
<span>Colorado Springs' Trusted Partner</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/10 pointer-events-none"></div>
|
||||
|
||||
<h1
|
||||
class="text-5xl md:text-7xl lg:text-8xl font-serif font-normal tracking-tight leading-[1.1] mb-8 text-white"
|
||||
>
|
||||
Craftsmanship <br /> For Your Home
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="text-xl text-stone-200 mb-10 max-w-md mx-auto md:mx-0 leading-relaxed font-light"
|
||||
>
|
||||
Elevate your living space with professional painting,
|
||||
wood restoration, and handyman services in Colorado Springs.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4"
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
class="min-w-[160px] bg-[#ECE3CE] text-[#3A4D39] text-base font-medium px-8 py-4 rounded-full hover:bg-white transition-colors text-center"
|
||||
<!-- Hero Content (Left) -->
|
||||
<div class="relative z-10 max-w-xl text-left">
|
||||
<h1
|
||||
class="text-5xl md:text-7xl lg:text-7xl font-serif font-normal tracking-tight leading-[1.05] mb-6 text-white"
|
||||
>
|
||||
Get a Quote
|
||||
</a>
|
||||
<a
|
||||
href="#services"
|
||||
class="min-w-[160px] text-white border border-white/30 hover:bg-white/10 text-base font-medium px-8 py-4 rounded-full transition-colors backdrop-blur-sm text-center"
|
||||
>
|
||||
View Services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
Craftsmanship <br /> For Your Home
|
||||
</h1>
|
||||
|
||||
<!-- Hero Visual (Right) -->
|
||||
<div class="relative z-10 flex-1 flex justify-center items-center w-full">
|
||||
<div class="relative w-full max-w-[500px]">
|
||||
<!-- Main Brush & Swatches Image -->
|
||||
<Image
|
||||
src={brushImg}
|
||||
alt="Paint brush and color swatches"
|
||||
class="w-full h-auto drop-shadow-2xl"
|
||||
/>
|
||||
|
||||
<!-- Floating Card 1: Deck Restoration -->
|
||||
<div
|
||||
class="absolute -right-4 top-[10%] bg-white p-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[6deg] hover:rotate-0 transition-transform duration-500"
|
||||
<p
|
||||
class="text-base md:text-lg text-white/80 mb-8 max-w-md leading-relaxed font-light"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 rounded-full bg-[#3A4D39] flex items-center justify-center">
|
||||
<Trees size={20} className="text-white" />
|
||||
</div>
|
||||
<span class="text-[10px] font-bold bg-stone-100 text-stone-600 px-2 py-1 rounded">Exterior</span>
|
||||
</div>
|
||||
<p class="text-sm font-serif font-bold text-stone-900 mb-2">Deck Restoration</p>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-[#3A4D39]"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-[#739072]"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-[#ECE3CE]"></div>
|
||||
</div>
|
||||
Elevate your living space with professional painting, wood
|
||||
restoration, and handyman services in Colorado Springs.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-start gap-4">
|
||||
<a
|
||||
href="#contact"
|
||||
class="min-w-[140px] bg-[#ECE3CE] text-[#3A4D39] text-sm font-medium px-6 py-3 rounded-full hover:bg-white transition-colors text-center shadow-sm"
|
||||
>
|
||||
Get a Quote
|
||||
</a>
|
||||
<a
|
||||
href="#services"
|
||||
class="min-w-[140px] bg-[#2f4231]/50 text-white border border-white/25 hover:bg-white/10 text-sm font-medium px-6 py-3 rounded-full transition-colors text-center"
|
||||
>
|
||||
View Services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Card 2: Ext. Paint -->
|
||||
<div
|
||||
class="absolute -left-8 bottom-[20%] bg-white p-4 rounded-2xl shadow-2xl w-48 hidden lg:block transform -rotate-[6deg] hover:rotate-0 transition-transform duration-500"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
|
||||
<PaintRoller size={20} className="text-stone-600" />
|
||||
<!-- Hero Visual (Right) -->
|
||||
<div class="relative z-10 flex-1 flex justify-center md:justify-end w-full">
|
||||
<div class="relative w-full max-w-[460px]">
|
||||
<!-- Circular backdrop behind brush/swatches -->
|
||||
<div
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 w-[320px] h-[320px] md:w-[360px] md:h-[360px] rounded-full bg-[#243224]/65"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Main Brush & Swatches Image -->
|
||||
<Image
|
||||
src={brushImg}
|
||||
alt="Paint brush and color swatches"
|
||||
class="relative z-10 w-full h-auto drop-shadow-2xl translate-x-2 md:translate-x-4 scale-[0.94]"
|
||||
/>
|
||||
|
||||
<!-- Floating Card: Deck Restoration -->
|
||||
<div
|
||||
class="absolute right-0 top-6 bg-white/95 backdrop-blur-sm px-5 py-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[4deg] hover:rotate-0 transition-transform duration-500 ring-1 ring-black/5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3 mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-9 h-9 rounded-full bg-[#3A4D39] flex items-center justify-center">
|
||||
<Trees size={18} className="text-white" />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-sm font-serif font-bold text-stone-900">
|
||||
Deck Restoration
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] font-semibold bg-stone-100 text-stone-600 px-2 py-1 rounded-full">
|
||||
Exterior
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-xs font-bold text-stone-900">Ext. Paint</p>
|
||||
<p class="text-[10px] text-stone-500">In Progress</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#3A4D39]"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-[#739072]"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-[#ECE3CE] ring-1 ring-black/5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-stone-100 rounded-full overflow-hidden">
|
||||
<div class="h-full w-[75%] bg-[#739072]"></div>
|
||||
|
||||
<!-- Floating Card: Ext. Paint -->
|
||||
<div
|
||||
class="absolute right-2 top-[58%] -translate-y-1/2 bg-white/95 backdrop-blur-sm px-5 py-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform -rotate-[3deg] hover:rotate-0 transition-transform duration-500 ring-1 ring-black/5"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-9 h-9 rounded-full bg-stone-100 flex items-center justify-center ring-1 ring-black/5">
|
||||
<PaintRoller size={18} className="text-stone-700" />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-xs font-bold text-stone-900 leading-none">Ext. Paint</p>
|
||||
<p class="text-[10px] uppercase tracking-widest text-stone-400 mt-1">
|
||||
Woodwork Care
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-stone-100 rounded-full overflow-hidden">
|
||||
<div class="h-full w-[72%] bg-[#739072]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Services Section -->
|
||||
<section id="services" class="max-w-7xl mx-auto px-6 py-24">
|
||||
<h2 class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-16 text-center">
|
||||
Our Expertise
|
||||
</h2>
|
||||
<!-- Expertise Mosaic (matches reference grid layout) -->
|
||||
<section id="services" class="relative py-16 md:py-20">
|
||||
<h2 class="sr-only">Our Expertise</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Card 1: Interior & Exterior Painting -->
|
||||
<div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={closeUpBrushImg} alt="Interior & Exterior Painting" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Interior & Exterior Painting</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Flawless finishes for your home's interior and exterior, using premium materials and meticulous techniques.
|
||||
</p>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
<!-- Patterned frame background -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
class="absolute inset-0 opacity-[0.10] mix-blend-multiply"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
|
||||
>
|
||||
</div>
|
||||
<!-- subtle vignette -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-[#FAF9F6] via-transparent to-[#FAF9F6]"></div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Wood Restoration -->
|
||||
<div class="bg-[#3A4D39] rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={cardsImg} alt="Wood Restoration" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="bg-[#FAF9F6]/80 backdrop-blur-[1px] border border-stone-300/60 shadow-[0_30px_90px_rgba(0,0,0,0.08)] overflow-hidden">
|
||||
<!-- Top pattern strip -->
|
||||
<div
|
||||
class="h-20 opacity-[0.25]"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat-x; background-size: 520px;`}
|
||||
>
|
||||
</div>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Wood Restoration</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Revitalizing your decks, fences, and woodwork, restoring their natural beauty and protecting them for years.
|
||||
</p>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Skilled Handyman -->
|
||||
<div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={puttyKnifeImg} alt="Skilled Handyman" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
<!-- Mosaic grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Row 1 / Col 1: Premium Painting (icon tile) -->
|
||||
<div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-b border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
|
||||
<div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
|
||||
<Paintbrush size={26} className="text-stone-900" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
|
||||
Premium<br />Painting
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 1 / Col 2: Image -->
|
||||
<div class="relative border-r border-b border-stone-200/80 min-h-[210px]">
|
||||
<Image
|
||||
src={closeUpBrushImg}
|
||||
alt="Premium painting detail"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
|
||||
</div>
|
||||
|
||||
<!-- Row 1 / Col 3: Wood Restoration (icon tile) -->
|
||||
<div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-b border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
|
||||
<div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
|
||||
<Trees size={26} className="text-stone-900" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
|
||||
Wood<br />Restoration
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 1 / Col 4: Image -->
|
||||
<div class="relative border-b border-stone-200/80 min-h-[210px]">
|
||||
<Image
|
||||
src={puttyKnifeImg}
|
||||
alt="Handyman work detail"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 / Col 1: Handyman Services (icon tile) -->
|
||||
<div class="bg-gradient-to-b from-[#f5efe2] to-[#efe6d2] border-r border-stone-200/80 p-10 flex flex-col items-center justify-center text-center gap-6 min-h-[210px]">
|
||||
<div class="w-14 h-14 rounded-full bg-white/70 border border-stone-200 flex items-center justify-center shadow-sm">
|
||||
<Hammer size={26} className="text-stone-900" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold tracking-wide text-stone-900 uppercase leading-tight">
|
||||
Handyman<br />Services
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 / Col 2: Premium Painting (text tile) -->
|
||||
<div class="bg-gradient-to-b from-[#fbf7ee] to-[#f1e8d6] border-r border-stone-200/80 p-10 flex flex-col justify-center gap-4 min-h-[210px]">
|
||||
<p class="text-base font-bold tracking-wide text-stone-900 uppercase leading-tight">
|
||||
Premium<br />Painting
|
||||
</p>
|
||||
<p class="text-stone-700 leading-relaxed">
|
||||
Interior & exterior painting with meticulous prep, premium materials, and clean finishes that last.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 / Col 3: Image -->
|
||||
<div class="relative border-r border-stone-200/80 min-h-[210px]">
|
||||
<Image
|
||||
src={cardsImg}
|
||||
alt="Wood stain and finish samples"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/5"></div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 / Col 4: Handyman Services (text tile) -->
|
||||
<div class="bg-gradient-to-b from-[#fbf7ee] to-[#f1e8d6] p-10 flex flex-col justify-center gap-4 min-h-[210px]">
|
||||
<p class="text-base font-bold tracking-wide text-stone-900 uppercase leading-tight">
|
||||
Handyman<br />Services
|
||||
</p>
|
||||
<p class="text-stone-700 leading-relaxed">
|
||||
Reliable repairs and improvements—from drywall and trim to fixture installs—done with care and precision.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom pattern strip -->
|
||||
<div
|
||||
class="h-20 opacity-[0.25] border-t border-stone-200/80"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat-x; background-size: 520px;`}
|
||||
>
|
||||
</div>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Skilled Handyman</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Reliable solutions for a wide range of home repairs and improvements, delivered with precision and care.
|
||||
</p>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user