UI redesign & Docker support; improved navigation & layout
Build and Push Docker Image / build-and-push (push) Successful in 19s
Build and Push Docker Image / build-and-push (push) Successful in 19s
Major UI overhaul: new expertise, team, footer, and testimonials sections with enhanced styling and layout. Added Docker Compose for app and SQL Server, updated .env.example, improved navigation anchors, and modernized CSS for responsiveness and accessibility.
This commit is contained in:
Arne Moerman
@@ -3,6 +3,7 @@
|
||||
|
||||
<PageTitle>FRC - Finance Experts & Business Partners</PageTitle>
|
||||
|
||||
<div id="top"></div>
|
||||
<div class="frc-site">
|
||||
<FrcNav />
|
||||
<FrcHero />
|
||||
|
||||
@@ -1,10 +1,83 @@
|
||||
<section class="frc-expertise-grid" id="expertise-grid">
|
||||
<h4>Onze Expertise</h4>
|
||||
|
||||
<div class="frc-expertise-items">
|
||||
<div><h5>Financial Strategy</h5></div>
|
||||
<div><h5>Cash & Liquidity</h5></div>
|
||||
<div><h5>Performance</h5></div>
|
||||
<div><h5>Mergers & Acq.</h5></div>
|
||||
<div><h5>Interim Finance</h5></div>
|
||||
<article class="frc-expertise-item">
|
||||
<div class="frc-expertise-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- Main pie body -->
|
||||
<circle cx="12" cy="12" r="9"></circle>
|
||||
<!-- Pulled-out top-right quarter -->
|
||||
<path d="M13 4 A8 8 0 0 1 20 11 L13 11 Z"></path>
|
||||
<path d="M13.8 3.2 A8.8 8.8 0 0 1 21.2 10.6 L13.8 10.6 Z"></path>
|
||||
<!-- Eighth marker just below pulled quarter -->
|
||||
<path d="M12 12 L17.5 14.3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Financial Strategy</h5>
|
||||
<p>Van strategie naar financieel kompas.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-expertise-item">
|
||||
<div class="frc-expertise-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- Big stack (left) -->
|
||||
<ellipse cx="9" cy="8" rx="4" ry="1.5"></ellipse>
|
||||
<path d="M5 8v2.4c0 .8 1.8 1.5 4 1.5s4-.7 4-1.5V8"></path>
|
||||
<ellipse cx="9" cy="10.4" rx="4" ry="1.5"></ellipse>
|
||||
<path d="M5 10.4v2.4c0 .8 1.8 1.5 4 1.5s4-.7 4-1.5v-2.4"></path>
|
||||
<ellipse cx="9" cy="12.8" rx="4" ry="1.5"></ellipse>
|
||||
|
||||
<!-- Small stack (right) -->
|
||||
<ellipse cx="16.5" cy="12" rx="3" ry="1.2"></ellipse>
|
||||
<path d="M13.5 12v2c0 .7 1.3 1.2 3 1.2s3-.5 3-1.2v-2"></path>
|
||||
<ellipse cx="16.5" cy="14" rx="3" ry="1.2"></ellipse>
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Cash & Liquidity Management</h5>
|
||||
<p>Grip op cashflow, vandaag en morgen.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-expertise-item">
|
||||
<div class="frc-expertise-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="11" width="4" height="10"></rect>
|
||||
<rect x="10" y="7" width="4" height="14"></rect>
|
||||
<rect x="17" y="3" width="4" height="18"></rect>
|
||||
<path d="M3 21h18" stroke-opacity="0.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Performance & Reporting</h5>
|
||||
<p>Inzichtelijke sturing op resultaat.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-expertise-item">
|
||||
<div class="frc-expertise-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<circle cx="15" cy="17" r="4"></circle>
|
||||
<path d="M9 11v6a2 2 0 0 0 2 2h4" stroke-opacity="0.5"></path>
|
||||
<path d="M15 13V7a2 2 0 0 0-2-2H9" stroke-opacity="0.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Mergers & Acquisitions</h5>
|
||||
<p>Begeleiding bij groei, aankoop of verkoop.</p>
|
||||
</article>
|
||||
|
||||
<article class="frc-expertise-item">
|
||||
<div class="frc-expertise-icon">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
<path d="M8 12.5l2.5 2.5L16 9.5" stroke-width="1.4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h5>Interim Finance Leadership</h5>
|
||||
<p>Tijdelijke versterking, blijvende impact.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+60
-12
@@ -1,38 +1,86 @@
|
||||
.frc-expertise-grid {
|
||||
padding: 5rem 2rem;
|
||||
padding: 6rem 2rem;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.frc-expertise-grid h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0 2rem;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
letter-spacing: 0.4em;
|
||||
color: #c5a368;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 3rem;
|
||||
padding-top: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.frc-expertise-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frc-expertise-items h5 {
|
||||
margin: 0;
|
||||
font-size: 0.65rem;
|
||||
.frc-expertise-icon {
|
||||
color: #c5a368;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.frc-expertise-item:hover .frc-expertise-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.frc-expertise-item h5 {
|
||||
margin: 0 0 1rem;
|
||||
min-height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #e5e7eb;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.frc-expertise-item p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: #9ca3af;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-expertise-grid {
|
||||
padding: 5rem 6rem;
|
||||
padding: 6rem max(6rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
|
||||
.frc-expertise-items {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.frc-expertise-item {
|
||||
padding: 0 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frc-expertise-item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 50%;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,43 @@
|
||||
<footer class="frc-footer" id="contact">
|
||||
<div class="frc-footer-grid">
|
||||
<div>
|
||||
<div class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
<div class="frc-footer-container">
|
||||
<div class="frc-footer-grid">
|
||||
<div class="frc-footer-brand">
|
||||
<div class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="frc-foot-title">For Real <span>Consulting</span></p>
|
||||
<p class="frc-foot-subtitle">Clarity today, <span>comfort tomorrow</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Menu</h5>
|
||||
<ul class="frc-footer-links">
|
||||
<li><a href="#top">Home</a></li>
|
||||
<li><a href="#aanpak">Aanpak</a></li>
|
||||
<li><a href="#expertise">Expertise</a></li>
|
||||
<li><a href="#over-ons">Over Ons</a></li>
|
||||
<li><a href="#insights">Insights</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="frc-footer-contact">
|
||||
<li><i class="bi bi-envelope"></i><a href="mailto:info@forrealconsulting.be">info@forrealconsulting.be</a></li>
|
||||
<li><i class="bi bi-telephone"></i><a href="tel:0476171249">0476 17 12 49</a></li>
|
||||
<li><i class="bi bi-geo-alt"></i><span>Gent, België</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="frc-foot-title">For Real Consulting</p>
|
||||
<p class="frc-foot-subtitle">CLARITY TODAY, COMFORT TOMORROW</p>
|
||||
</div>
|
||||
<div class="frc-footer-links">
|
||||
<a href="#top">Home</a>
|
||||
<a href="#aanpak">Aanpak</a>
|
||||
<a href="#expertise">Expertise</a>
|
||||
<a href="#over-ons">Over Ons</a>
|
||||
</div>
|
||||
<div class="frc-footer-contact">
|
||||
<p>✉ info@forrealconsulting.be</p>
|
||||
<p>📞 0476 17 12 49</p>
|
||||
<p>📍 Gent, België</p>
|
||||
</div>
|
||||
<div class="frc-footer-cta-wrap">
|
||||
<a href="#contact" class="frc-outline-btn">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frc-footer-bottom">
|
||||
<p>© 2026 For Real Consulting. Alle rechten voorbehouden.</p>
|
||||
<div>
|
||||
<a href="#">Privacybeleid</a>
|
||||
<span>|</span>
|
||||
<a href="#">Cookies</a>
|
||||
|
||||
<div class="frc-footer-bottom">
|
||||
<p>© 2026 For Real Consulting. Alle rechten voorbehouden.</p>
|
||||
<div>
|
||||
<a href="#">Privacybeleid</a>
|
||||
<span>|</span>
|
||||
<a href="#">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,104 +1,158 @@
|
||||
.frc-footer {
|
||||
background: #09090b;
|
||||
padding: 5rem 2rem 2.5rem;
|
||||
background: #000000;
|
||||
padding: 5rem 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.frc-footer-container {
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.frc-footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-logo-img {
|
||||
height: 2rem;
|
||||
height: 4rem;
|
||||
width: auto;
|
||||
filter: invert(68%) sepia(38%) saturate(502%) hue-rotate(3deg) brightness(92%) contrast(87%);
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
.frc-foot-title {
|
||||
margin: 0;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.frc-foot-title {
|
||||
margin: 0.8rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #9ca3af;
|
||||
.frc-foot-title span {
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-foot-subtitle {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
color: #6b7280;
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
.frc-foot-subtitle span {
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-footer h5 {
|
||||
margin: 0 0 1.5rem;
|
||||
color: #ffffff;
|
||||
font-size: 0.6875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.frc-footer-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
font-size: 0.72rem;
|
||||
gap: 1rem;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: #9ca3af;
|
||||
letter-spacing: 0.2em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-links a:hover {
|
||||
color: #ffffff;
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-footer-contact {
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
font-size: 0.625rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.frc-footer-contact p {
|
||||
margin: 0 0 0.5rem;
|
||||
.frc-footer-contact li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frc-footer-contact li i {
|
||||
color: #c5a368;
|
||||
margin-right: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.frc-footer-contact a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
margin-top: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||
margin-top: 5rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
font-size: 0.62rem;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: #6b7280;
|
||||
letter-spacing: 0.2em;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
.frc-footer-bottom p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frc-footer-bottom div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom span {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.frc-footer-bottom a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-footer-bottom div {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom span {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.frc-footer-cta-wrap {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-footer {
|
||||
padding: 5rem 6rem 2.5rem;
|
||||
padding: 5rem max(6rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
|
||||
.frc-footer-grid {
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
align-items: start;
|
||||
grid-template-columns: 1.6fr 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.frc-footer-bottom {
|
||||
margin-top: 5rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<div class="frc-quote">
|
||||
<div class="frc-quote-mark">"</div>
|
||||
<div class="frc-quote-mark">“</div>
|
||||
<p>Wij helpen ambitieuze ondernemers grip te krijgen op hun cijfers, met strategisch inzicht en een duidelijke focus op waardecreatie.<br/> Dat is waar wij voor staan.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<nav class="frc-nav" id="top">
|
||||
<nav class="frc-nav">
|
||||
<a href="#top" class="frc-logo">
|
||||
<img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
|
||||
</a>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.frc-process {
|
||||
padding: 5rem 2rem;
|
||||
background: #0a0a0a;
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +1,42 @@
|
||||
<section class="frc-team" id="over-ons">
|
||||
<h4>Over Ons</h4>
|
||||
<div class="frc-team-intro">
|
||||
<h2>KLAAR OM SAMEN HET VERSCHIL TE MAKEN?</h2>
|
||||
<div>
|
||||
|
||||
<div class="frc-team-layout">
|
||||
<div class="frc-team-intro-panel">
|
||||
<h2>
|
||||
Klaar om samen<br />
|
||||
<span class="frc-nowrap">het verschil te maken?</span>
|
||||
</h2>
|
||||
<div class="frc-team-divider"></div>
|
||||
<p>Laten we kennismaken en ontdekken hoe wij jouw organisatie vooruithelpen.</p>
|
||||
<a href="#contact" class="frc-outline-btn">Plan een kennismaking</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frc-team-grid">
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<div class="frc-team-photo-wrap">
|
||||
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&q=80&w=600" alt="Dylan Tijsbaert" class="frc-team-photo" />
|
||||
</div>
|
||||
<div class="frc-team-card-content">
|
||||
<h3>PETER SNIJKERS</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0476 17 12 49</p>
|
||||
<p>Peter.Snijkers@forrealconsulting.be</p>
|
||||
<div class="frc-team-contact">
|
||||
<a href="tel:0476171249"><i class="bi bi-telephone"></i>0476 17 12 49</a>
|
||||
<a href="mailto:Peter.Snijkers@forrealconsulting.be"><i class="bi bi-envelope"></i>Peter.Snijkers@forrealconsulting.be</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="frc-team-card">
|
||||
<div class="frc-team-photo"></div>
|
||||
<div>
|
||||
<div class="frc-team-photo-wrap">
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=600" alt="Peter Snijkers" class="frc-team-photo" />
|
||||
</div>
|
||||
<div class="frc-team-card-content">
|
||||
<h3>DYLAN TIJSBAERT</h3>
|
||||
<p class="frc-team-role">Bestuurder & Finance Expert</p>
|
||||
<p>0498 16 94 49</p>
|
||||
<p>Dylan.Tijsbaert@forrealconsulting.be</p>
|
||||
<div class="frc-team-contact">
|
||||
<a href="tel:0498169449"><i class="bi bi-telephone"></i>0498 16 94 49</a>
|
||||
<a href="mailto:Dylan.Tijsbaert@forrealconsulting.be"><i class="bi bi-envelope"></i>Dylan.Tijsbaert@forrealconsulting.be</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
@@ -1,86 +1,153 @@
|
||||
.frc-team {
|
||||
padding: 5rem 2rem;
|
||||
padding: 6rem 2rem;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.frc-team h4 {
|
||||
margin: 0 0 3rem;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0 2.5rem;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #6b7280;
|
||||
letter-spacing: 0.4em;
|
||||
color: #c5a368;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.frc-team-intro {
|
||||
.frc-team-layout {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.frc-team-intro h2 {
|
||||
.frc-team-intro-panel {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.frc-team-intro-panel h2 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: clamp(2rem, 4vw, 2.6rem);
|
||||
font-size: clamp(1.25rem, 2.4vw, 1.7rem);
|
||||
line-height: 1.12;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-team-intro p {
|
||||
.frc-team-divider {
|
||||
width: 3rem;
|
||||
height: 1px;
|
||||
background: #c5a368;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.frc-team-intro-panel p {
|
||||
margin: 0 0 2rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.frc-team-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.75;
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.frc-team-card {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
background: rgba(39, 39, 42, 0.3);
|
||||
flex-direction: column;
|
||||
background: rgba(24, 24, 27, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding: 2rem;
|
||||
transition: border-color 0.5s ease;
|
||||
}
|
||||
|
||||
.frc-team-card:hover {
|
||||
border-color: rgba(197, 163, 104, 0.3);
|
||||
}
|
||||
|
||||
.frc-team-photo-wrap {
|
||||
width: 100%;
|
||||
height: 16rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frc-team-photo {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
background: #27272a;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.7s ease;
|
||||
}
|
||||
|
||||
.frc-team-card:hover .frc-team-photo {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.frc-team-card-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.frc-team-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.03em;
|
||||
color: #c5a368;
|
||||
}
|
||||
|
||||
.frc-team-role {
|
||||
margin: 0.75rem 0 1rem;
|
||||
color: #c5a368;
|
||||
font-size: 0.62rem;
|
||||
margin: 0 0 1.5rem;
|
||||
color: #ffffff;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.frc-team-card p {
|
||||
margin: 0.25rem 0;
|
||||
.frc-team-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.frc-team-contact a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.65rem;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.frc-team-contact a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.frc-team-contact a i {
|
||||
margin-right: 0.75rem;
|
||||
color: #c5a368;
|
||||
opacity: 0.85;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.frc-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.frc-team-card {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.frc-team-photo-wrap {
|
||||
width: 12rem;
|
||||
min-width: 12rem;
|
||||
height: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-team {
|
||||
padding: 5rem 6rem;
|
||||
}
|
||||
|
||||
.frc-team-intro {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.frc-team-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 6rem max(6rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.frc-team-layout {
|
||||
grid-template-columns: 1.55fr 1fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,41 @@
|
||||
<section class="frc-testimonials" id="insights">
|
||||
<div class="frc-testimonial-quote">
|
||||
<span>"</span>
|
||||
<p>"For Real Consulting brengt helderheid waar we die het meest nodig hadden. Dankzij hun inzicht en betrokkenheid maken we vandaag betere beslissingen met vertrouwen."</p>
|
||||
<p class="frc-testimonial-source">CEO, Industrieel bedrijf</p>
|
||||
</div>
|
||||
<div class="frc-logo-strip">
|
||||
<span>AVEC</span>
|
||||
<span>COFANO</span>
|
||||
<span>ZUIDERKEMPEN</span>
|
||||
<span>DE PAEP</span>
|
||||
<span>TRILEC</span>
|
||||
<h4>Wat onze klanten zeggen</h4>
|
||||
|
||||
<div class="frc-testimonials-layout">
|
||||
<div class="frc-testimonial-content">
|
||||
<div class="frc-testimonial-main">
|
||||
<div class="frc-quote-mark">“</div>
|
||||
|
||||
<div class="frc-testimonial-text">
|
||||
<blockquote>
|
||||
<p>
|
||||
For Real Consulting brengt helderheid waar we die het meest nodig hadden.
|
||||
Dankzij hun inzicht en betrokkenheid maken we vandaag betere beslissingen met vertrouwen.
|
||||
</p>
|
||||
</blockquote>
|
||||
<p class="frc-testimonial-source">CEO, Industrieel bedrijf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="frc-logo-strip-wrap">
|
||||
<div class="frc-logo-strip">
|
||||
<div class="frc-logo-avec">AVEC</div>
|
||||
|
||||
<div class="frc-logo-cofano">
|
||||
<div class="frc-logo-dot"></div>
|
||||
<span>Cofano</span>
|
||||
</div>
|
||||
|
||||
<div class="frc-logo-zuiderkempen">Zuiderkempen</div>
|
||||
|
||||
<div class="frc-logo-depaep">
|
||||
<span class="frc-logo-depaep-main">De Paep</span>
|
||||
<span class="frc-logo-depaep-sub">Consulting</span>
|
||||
</div>
|
||||
|
||||
<div class="frc-logo-trilec">Trilec</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+128
-25
@@ -1,54 +1,157 @@
|
||||
.frc-testimonials {
|
||||
padding: 5rem 2rem;
|
||||
background: #09090b;
|
||||
padding: 6rem 2rem;
|
||||
background: rgba(24, 24, 27, 0.5);
|
||||
}
|
||||
|
||||
.frc-testimonial-quote {
|
||||
max-width: 48rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote > span {
|
||||
font-size: 2.5rem;
|
||||
.frc-testimonials h4 {
|
||||
margin: 0 0 2rem;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4em;
|
||||
color: #c5a368;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.frc-testimonial-quote p {
|
||||
margin: 0.75rem 0 0;
|
||||
color: #d1d5db;
|
||||
font-size: 1.1rem;
|
||||
.frc-testimonials-layout {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.frc-testimonial-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frc-testimonial-main {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.frc-quote-mark {
|
||||
color: #c5a368;
|
||||
font-size: 7rem;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
line-height: 0.7;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frc-testimonial-text blockquote {
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.frc-testimonial-text blockquote p {
|
||||
margin: 0;
|
||||
color: #e5e7eb;
|
||||
font-size: clamp(1.05rem, 2vw, 1.4rem);
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.frc-testimonial-source {
|
||||
margin-top: 1.5rem !important;
|
||||
color: #c5a368 !important;
|
||||
font-size: 0.75rem !important;
|
||||
letter-spacing: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-style: normal !important;
|
||||
letter-spacing: 0.3em;
|
||||
color: #c5a368;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.frc-logo-strip-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frc-logo-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
opacity: 0.35;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
opacity: 0.4;
|
||||
filter: grayscale(100%);
|
||||
transition: opacity 0.7s ease;
|
||||
}
|
||||
|
||||
.frc-logo-strip span {
|
||||
.frc-logo-strip:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.frc-logo-avec {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.frc-logo-cofano {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.frc-logo-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.frc-logo-cofano span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.frc-logo-zuiderkempen {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.2em;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.frc-logo-depaep {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.frc-logo-depaep-main {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.frc-logo-depaep-sub {
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 0.3em;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.frc-logo-trilec {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
letter-spacing: -0.03em;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.frc-testimonials {
|
||||
padding: 5rem 6rem;
|
||||
padding: 6rem max(6rem, calc((100% - 64rem) / 2));
|
||||
}
|
||||
|
||||
.frc-testimonials-layout {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,6 +30,7 @@ h1:focus {
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--frc-nav-offset: 6rem;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -69,4 +70,8 @@ a {
|
||||
.frc-outline-btn:hover {
|
||||
background-color: #c5a368;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
[id]:not(#top) {
|
||||
scroll-margin-top: var(--frc-nav-offset);
|
||||
}
|
||||
Reference in New Issue
Block a user