From f343738db5728c7a98452dd18d7c2876b7bedf09 Mon Sep 17 00:00:00 2001 From: Arne Moerman Date: Sun, 3 May 2026 13:00:00 +0200 Subject: [PATCH] UI redesign & Docker support; improved navigation & layout 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. --- .env.example | 2 + .../Components/Pages/Home.razor | 1 + .../Components/Sections/FrcExpertise.razor | 83 +++++++++- .../Sections/FrcExpertise.razor.css | 72 +++++++-- .../Components/Sections/FrcFooter.razor | 64 ++++---- .../Components/Sections/FrcFooter.razor.css | 150 +++++++++++------ .../Components/Sections/FrcImpact.razor | 2 +- .../Components/Sections/FrcNav.razor | 2 +- .../Components/Sections/FrcProcess.razor.css | 2 +- .../Components/Sections/FrcTeam.razor | 38 +++-- .../Components/Sections/FrcTeam.razor.css | 149 ++++++++++++----- .../Components/Sections/FrcTestimonials.razor | 49 ++++-- .../Sections/FrcTestimonials.razor.css | 153 +++++++++++++++--- .../For Real Consulting/wwwroot/app.css | 5 + docker-compose.yml | 50 ++++++ 15 files changed, 637 insertions(+), 185 deletions(-) create mode 100644 .env.example create mode 100644 docker-compose.yml diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..6216fd9 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +# SQL Server SA Password (minimum 8 characters, at least one uppercase letter, one lowercase letter, one number, and one special character) +SA_PASSWORD=YourSecurePassword123! diff --git a/For Real Consulting/For Real Consulting/Components/Pages/Home.razor b/For Real Consulting/For Real Consulting/Components/Pages/Home.razor index fe06ae1..bff8980 100644 --- a/For Real Consulting/For Real Consulting/Components/Pages/Home.razor +++ b/For Real Consulting/For Real Consulting/Components/Pages/Home.razor @@ -3,6 +3,7 @@ FRC - Finance Experts & Business Partners +
diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor b/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor index 1fbcac6..5b69b57 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor @@ -1,10 +1,83 @@

Onze Expertise

+
-
Financial Strategy
-
Cash & Liquidity
-
Performance
-
Mergers & Acq.
-
Interim Finance
+
+
+ + + + + + + + + +
+
Financial Strategy
+

Van strategie naar financieel kompas.

+
+ +
+
+ + + + + + + + + + + + + +
+
Cash & Liquidity Management
+

Grip op cashflow, vandaag en morgen.

+
+ +
+
+ + + + + + +
+
Performance & Reporting
+

Inzichtelijke sturing op resultaat.

+
+ +
+
+ + + + + + +
+
Mergers & Acquisitions
+

Begeleiding bij groei, aankoop of verkoop.

+
+ +
+
+ + + + +
+
Interim Finance Leadership
+

Tijdelijke versterking, blijvende impact.

+
diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor.css b/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor.css index 823cbdd..7dfacce 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor.css +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcExpertise.razor.css @@ -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); } } diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor b/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor index 7ce1164..ff9d2cd 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor @@ -1,33 +1,43 @@ diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor.css b/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor.css index 5d63fc9..969af2a 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor.css +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcFooter.razor.css @@ -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; } } diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcImpact.razor b/For Real Consulting/For Real Consulting/Components/Sections/FrcImpact.razor index 588126d..a837355 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcImpact.razor +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcImpact.razor @@ -54,7 +54,7 @@
-
"
+
“

Wij helpen ambitieuze ondernemers grip te krijgen op hun cijfers, met strategisch inzicht en een duidelijke focus op waardecreatie.
Dat is waar wij voor staan.

diff --git a/For Real Consulting/For Real Consulting/Components/Sections/FrcNav.razor b/For Real Consulting/For Real Consulting/Components/Sections/FrcNav.razor index 31e7139..e3fddc3 100644 --- a/For Real Consulting/For Real Consulting/Components/Sections/FrcNav.razor +++ b/For Real Consulting/For Real Consulting/Components/Sections/FrcNav.razor @@ -1,6 +1,6 @@ @rendermode InteractiveServer -