Compare commits

...

4 commits

Author SHA1 Message Date
Bob Vandevliet
7c6823e7b2 Minor tweaks. 2025-12-17 20:20:03 +01:00
Bob Vandevliet
465794755b Simplified spacing and anchor handling. 2025-12-17 20:06:06 +01:00
Bob Vandevliet
94bd9aab61 Adding dedicated contact page (WIP). 2025-12-17 20:05:20 +01:00
Bob Vandevliet
2709054415 Adding dedicated service pages (WIP). 2025-12-17 15:51:51 +01:00
10 changed files with 306 additions and 74 deletions

37
public/contact.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<head>
<!--# include file="/includes/head.html" -->
<title>Vandevliet Aerial Shots</title>
<meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:title" content="Vandevliet Aerial Shots">
<meta property="og:description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com">
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body>
<header>
<!--# include file="/includes/nav.html" -->
</header>
<main class="mt-5 text-center">
<section class="container-xxl mt-5 text-center">
<p class="lead">
Stuur mij gerust een mailtje voor een vrijblijvend gesprek! 🙂
<br>🡇
</p>
</section>
<!-- Nothing more here yet, contact form will be added later, contact info is in the footer -->
</main>
<!--# include file="/includes/footer.html" -->
</body>
</html>

View file

@ -1,18 +1,17 @@
<footer class="bg-secondary-subtle">
<footer class="bg-secondary-subtle pt-3">
<section class="container-xxl pt-4">
<section class="container-xxl">
<div class="row justify-content-center">
<div class="col-6 col-lg-3">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h2 class="section fs-3 card-title" id="contact">Contact</h2>
<p class="fs-5 ff-header">Bob Vandevliet</p>
<h2 class="section fs-3 card-title">Bob Vandevliet</h2>
<p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
<p>
<a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
<!-- <a href="tel:+31612345678">+31 6 12345678</a> -->
<br>Arnhem, Gelderland
</p>
<!-- <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p> -->
<p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
<p style="margin-top: 0 !important;">
KvK: 94567255<br>

View file

@ -11,14 +11,19 @@
https://cdn.jsdelivr.net
https://*.fontawesome.com;
media-src 'self'
https://www.youtube.com https://youtu.be
https://www.youtube.com
https://youtu.be
https://www.linkedin.com;
frame-src 'self'
https://www.youtube.com/embed/ https://youtu.be/embed/
https://www.youtube.com/embed/
https://youtu.be/embed/
https://www.linkedin.com/embed/;
style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
font-src 'self' https://*.fontawesome.com;
connect-src 'self' https://*.fontawesome.com;
style-src 'self' 'unsafe-inline'
https://*.fontawesome.com;
font-src 'self'
https://*.fontawesome.com;
connect-src 'self'
https://*.fontawesome.com;
object-src 'none';
img-src 'self' data:;
">

View file

@ -12,13 +12,13 @@
<a class="nav-link" href="/#diensten">Diensten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#prijzen">Prijzen</a>
<a class="nav-link" href="#prijzen">Prijzen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#over-mij">Over mij</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary" href="/#contact">Contact</a>
<a class="nav-link btn btn-primary" href="/contact">Contact</a>
</li>
<li class="nav-item socials">
<a class="nav-link" href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on Instagram" aria-label="Vandevliet Aerial Shots on Instagram"><i class="fab fa-instagram"></i></a>

View file

@ -2,10 +2,10 @@
<div class="card-body">
<h3 class="card-title">Open categorie</h3>
<p class="card-text fs-4 ff-header">vanaf €350,-</p>
<p class="card-text">Geschikt voor indoor en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
<p class="card-text">Geschikt voor indoor drone tours en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
<ul>
<li>Bedrijfsvideo</li>
<li>Vastgoed</li>
<li><a href="/bedrijfsvideo#">Bedrijfsvideo</a></li>
<li><a href="/vastgoed#">Vastgoed</a></li>
</ul>
<p class="card-text">Inclusief:</p>
<ul>

View file

@ -15,7 +15,7 @@
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body class="has-hero">
<body>
<header>
<!--# include file="/includes/nav.html" -->
@ -31,18 +31,16 @@
</header>
<main>
<section class="container-xxl text-center">
<h2 id="diensten">FPV drone opnames laten maken</h2>
<div class="row">
<p>
FPV staat voor <b>First Person View</b> en levert cinematische dronebeelden op. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers. FPV beelden vertellen een compleet verhaal in één vlucht. Vaak worden deze vluchten vastgelegd met een GoPro of vergelijkbare actiecamera. Het resultaat is <b>vloeiend, filmisch en dynamisch</b> en overtreft traditionele drone-videografie.
</p>
</div>
<section id="diensten" class="container-xxl text-center">
<h2>FPV drone opnames laten maken</h2>
<p>
FPV staat voor <b>First Person View</b> en levert cinematische dronebeelden op. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers. FPV beelden vertellen een compleet verhaal in één vlucht. Vaak worden deze vluchten vastgelegd met een GoPro of vergelijkbare actiecamera. Het resultaat is <b>vloeiend, filmisch en dynamisch</b> en overtreft traditionele drone-videografie.
</p>
<div class="row">
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/fittings-2784899_640.jpg" alt="Abstracte close-up afbeelding van een machine.">
<div class="card-body bg-light text-dark">
<div class="card-body d-flex flex-column bg-light text-dark">
<h3 class="card-title">
<i class="fa-solid fa-industry"></i>
<br>Bedrijfsvideo
@ -50,13 +48,16 @@
<p class="card-text">
Laat productieprocessen, kantoren of werkplaatsen van binnenuit zien met een vloeiende indoor drone tour door jouw bedrijf.
</p>
<p style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="/bedrijfsvideo#" class="btn btn-primary stretched-link">Lees meer</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/sa-rapita-2483668_640.jpg" alt="Afbeelding van een moderne woning.">
<div class="card-body bg-light text-dark">
<div class="card-body d-flex flex-column bg-light text-dark">
<h3 class="card-title">
<i class="fa-solid fa-house"></i>
<br>Vastgoed
@ -64,13 +65,16 @@
<p class="card-text">
Een virtuele rondleiding door jouw (vakantie)woning geeft potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
</p>
<p style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="/vastgoed#" class="btn btn-primary stretched-link">Lees meer</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/ferris-wheel-7299042_640.jpg" alt="Afbeelding van een attractie in een recreatiepark.">
<div class="card-body bg-light text-dark">
<div class="card-body d-flex flex-column bg-light text-dark">
<h3 class="card-title">
<i class="fa-solid fa-house"></i>
<br>Recreatie (binnenkort mogelijk)
@ -84,7 +88,7 @@
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/motor-cross-1634206_640.jpg" alt="Afbeelding van motorcross sport.">
<div class="card-body bg-light text-dark">
<div class="card-body d-flex flex-column bg-light text-dark">
<h3 class="card-title">
<i class="fa-solid fa-motorcycle"></i>
<br>Sport (binnenkort mogelijk)
@ -98,7 +102,7 @@
<div class="col-sm-6 col-lg">
<div class="card h-100">
<img class="card-img grayscale-effect" style="height: 10rem;" src="/assets/static/audience-1850119_640.jpg" alt="Afbeelding van publiek bij een concert.">
<div class="card-body bg-light text-dark">
<div class="card-body d-flex flex-column bg-light text-dark">
<h3 class="card-title">
<i class="fa-solid fa-guitar"></i>
<br>Evenementen (binnenkort mogelijk)
@ -112,18 +116,18 @@
</div>
</section>
<section class="container-xxl">
<section id="prijzen" class="container-xxl">
<div class="row justify-content-center text-center">
<div class="col-lg-8">
<div class="col-lg-8 mt-0">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 id="prijzen" class="text-center" itemprop="name">Wat kost een dronevideo?</h2>
<h2 itemprop="name">Wat kost een dronevideo?</h2>
<p itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<span itemprop="text">
FPV dronebeelden heb je al vanaf €350,- per vlucht. Inclusief montage en nabewerking vanaf €750,-. De uiteindelijke prijs wordt bepaald door locatie, vluchtduur en complexiteit van de eventuele montage.
</span>
</p>
</div>
<p class="text-center">
<p>
Hieronder vind je meer informatie over de verschillende categorieën en bijbehorende indicatieprijzen. Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.
</p>
</div>
@ -143,8 +147,7 @@
</div>
</section>
<section class="container-xxl">
<div id="over-mij"></div>
<section id="over-mij" class="container-xxl">
<div class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0">
@ -184,7 +187,7 @@
<h3>Klaar om jouw verhaal te vertellen?</h3>
<p>
Ik werk vanuit Arnhem, vooral in Gelderland en omgeving. Als ZZP'er naast mijn parttime baan als software engineer kan ik flexibel werken volgens jouw planning.
Neem gerust <a href="/#contact">contact</a> op voor een vrijblijvend gesprek.
Neem gerust <a href="/contact">contact</a> op voor een vrijblijvend gesprek.
</p>
</div>
</div>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<head>
<!--# include file="/includes/head.html" -->
<title>Dronebedrijfsvideo laten maken • Vandevliet Aerial Shots</title>
<meta name="description" content="Trek de aandacht met een krachtige bedrijfsvideo met dronebeelden. Ideaal voor social media, website of presentaties. Laat je merk écht bewegen.">
<meta property="og:title" content="Dronebedrijfsvideo laten maken • Vandevliet Aerial Shots">
<meta property="og:description" content="Trek de aandacht met een krachtige bedrijfsvideo met dronebeelden. Ideaal voor social media, website of presentaties. Laat je merk écht bewegen.">
<meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com/bedrijfsvideo">
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body>
<header>
<!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="height: 100vh;">
<div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h2">Laat jouw bedrijf spreken met een dynamische dronevideo</h1>
<p>Trek de aandacht met een krachtige bedrijfsvideo met dronebeelden. Ideaal voor social media, website of presentaties. Laat je merk écht bewegen.</p>
<p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
</div>
<div class="cover parallax ratio ratio-16x9">
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7346800134644531200?compact=1" frameborder="0" allowfullscreen="" title="Ingevoegde bijdrage"></iframe>
</div>
</div>
</header>
<main>
<section id="prijzen" class="container-xxl">
<h2 class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Wat kost een bedrijfs-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">
<div class="col-lg-8">
<!--# include file="/includes/pricing/cat-open.html" -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<!--# include file="/includes/pricing/post-edit.html" -->
</div>
</div>
</section>
</main>
<!--# include file="/includes/footer.html" -->
</body>
</html>

165
public/pages/vastgoed.html Normal file
View file

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="nl" data-bs-theme="dark">
<head>
<!--# include file="/includes/head.html" -->
<title>Dronevideo voor (vakantie)woning of vastgoedproject • Vandevliet Aerial Shots</title>
<meta name="description" content="Maak jouw woning of vastgoedobject onweerstaanbaar met een dronevideo. Professionele luchtbeelden zorgen voor meer views en snellere verkoop.">
<meta property="og:title" content="Dronevideo voor (vakantie)woning of vastgoedproject • Vandevliet Aerial Shots">
<meta property="og:description" content="Maak jouw woning of vastgoedobject onweerstaanbaar met een dronevideo. Professionele luchtbeelden zorgen voor meer views en snellere verkoop.">
<meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com/bedrijfsvideo">
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body>
<header>
<!--# include file="/includes/nav.html" -->
<div class="hero" style="margin-top: 7rem;">
<div class="hero-body">
<h1 class="h2">Luchtbeelden die woningen sneller verkopen</h1>
<p>Laat potentiële kopers de locatie, ruimte en sfeer direct ervaren met een professionele dronevideo woning.</p>
<p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
</div>
</div>
</header>
<main>
<section id="waarom-fpv" class="container-xxl">
<h1>Waarom kiezen voor FPV dronevideo bij vastgoed?</h1>
<ul>
<li>
<strong>Verhoogt de zichtbaarheid</strong><br>
Word gezien op social media en vastgoedwebsites.
</li>
<li>
<strong>Snellere verkoop</strong><br>
Woningen met dronebeelden krijgen tot 68 % meer views op Funda.
</li>
<li>
<strong>Volledig perspectief</strong><br>
Toon ligging, perceelgrootte en omgeving in één vloeiende luchtvideo.
</li>
<li>
<strong>Professionele kwaliteit</strong><br>
4K/60 FPS-beelden met filmische nabewerking.
</li>
<li>
<strong>Betaalbaar & snel</strong><br>
Basispakket vanaf €299, geleverd binnen 3 werkdagen.
</li>
</ul>
</section>
<section id="werkwijze" class="container-xxl">
<h1>Werkwijze</h1>
<ol>
<li>
<strong>Intake gesprek</strong><br>
We bespreken jouw wensen, doelen en creatieve ideeën. Wat wil je bereiken met de dronevideo? Wie is je doelgroep? Op basis hiervan maak ik een passende offerte.
</li>
<li>
<strong>Script of draaiboek</strong><br>
Samen maken we een script of draaiboek. Zo komt jouw boodschap optimaal in beeld. Komen er ook mensen in beeld? Dan zorgen we ervoor dat zij goed voorbereid zijn.
</li>
<li>
<strong>Opnames (binnen & buiten)</strong><br>
Op de afgesproken datum en locatie begin ik met het opnemen van jouw dronevideo. Ik houd rekening met jouw wensen en zorg ervoor dat we binnen de afgesproken tijd en budget blijven.
</li>
<li>
<strong>Montage & color grading</strong><br>
Na de opname bewerk ik de beelden tot een professionele video, inclusief kleurcorrectie en muziek.
</li>
<li>
<strong>Levering & revisie</strong><br>
Binnen 3 werkdagen ontvang je de eerste versie en eventueel passen we nog wat aan. Dan maak ik de definitieve versie gereed in hoge resolutie in de gewenste formaten, klaar voor gebruik op social media, websites of in presentaties.
</li>
</ol>
</section>
<section id="faq" class="container-xxl">
<h1>Veelgestelde vragen (FAQ)</h1>
<p></p>
<div class="accordion" itemscope itemtype="https://schema.org/FAQPage">
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="accordion-header" itemprop="name">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-sales-gain" aria-controls="faq-panel-sales-gain" aria-expanded="false">
Helpt een dronevideo echt bij de verkoop van mijn woning?
</button>
</h2>
<div id="faq-panel-sales-gain" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="accordion-body" itemprop="text">
Absoluut! Objecten met dronebeelden woning krijgen gemiddeld 68% meer views op huizenplatforms, wat vaak leidt tot snellere biedingen.
</div>
</div>
</div>
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="accordion-header" itemprop="name">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-where-allowed" aria-controls="faq-panel-where-allowed" aria-expanded="false">
Mag je overal vliegen voor een vastgoedvideo?
</button>
</h2>
<div id="faq-panel-where-allowed" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="accordion-body" itemprop="text">
We mogen boven eigen terrein vliegen en kunnen in de meeste woonwijken werken. In gecontroleerd luchtruim regelen we tijdig een ontheffing.
</div>
</div>
</div>
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="accordion-header" itemprop="name">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-indoor-possible" aria-controls="faq-panel-indoor-possible" aria-expanded="false">
Kunnen jullie ook binnen filmen?
</button>
</h2>
<div id="faq-panel-indoor-possible" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="accordion-body" itemprop="text">
Ja, met lichte cinewhoop-FPV drones vliegen we veilig door kamers en gangen voor een virtuele rondleiding.
</div>
</div>
</div>
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 class="accordion-header" itemprop="name">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-panel-lead-time" aria-controls="faq-panel-lead-time" aria-expanded="false">
Wat is de levertijd?
</button>
</h2>
<div id="faq-panel-lead-time" class="accordion-collapse collapse" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="accordion-body" itemprop="text">
Je ontvangt de gemonteerde video meestal binnen 3 werkdagen na de shoot.
</div>
</div>
</div>
</div>
</section>
<section id="prijzen" class="container-xxl">
<h2 class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Wat kost een vastgoed-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">
<div class="col-lg-8">
<!--# include file="/includes/pricing/cat-open.html" -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<!--# include file="/includes/pricing/post-edit.html" -->
</div>
</div>
</section>
<section class="container-xxl text-center">
<h2>Klaar om jouw woning beter in beeld te brengen?</h2>
<p>Neem vandaag nog contact op voor een prijsindicatie voor jouw dronevideo!</p>
<p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
</section>
</main>
<!--# include file="/includes/footer.html" -->
</body>
</html>

View file

@ -1,24 +1,3 @@
const highlightSectionFromHash = () =>
{
const { hash } = window.location;
if (hash === '#contact')
{
const section = document.getElementById(hash.substring(1))?.parentElement;// .closest('section');
if (section)
{
setTimeout(() =>
{
section.classList.add('scrollto-highlight');
setTimeout(() => section.classList.remove('scrollto-highlight'), 1000);
}, 500);
}
}
};
window.addEventListener('hashchange', highlightSectionFromHash);
window.addEventListener('pageshow', () =>
{
/**
@ -45,8 +24,6 @@ window.addEventListener('pageshow', () =>
refreshScrollLinkedPositioningEffect();
window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
highlightSectionFromHash();
});
document.addEventListener('DOMContentLoaded', () =>
@ -54,14 +31,13 @@ document.addEventListener('DOMContentLoaded', () =>
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('section');
const sectionsWithId = document.querySelectorAll('section[id]');
sections.forEach(section =>
sectionsWithId.forEach(anchorTarget =>
{
const anchorTarget = section.querySelector('[id]');
const anchorHeader = section.querySelector('h1,h2');
const anchorHeader = anchorTarget.querySelector('h1,h2');
if (anchorTarget && anchorHeader)
if (anchorHeader)
{
const anchorLink = document.createElement('a');
anchorLink.className = 'anchor-link';

View file

@ -89,12 +89,8 @@ $ff-subheader: 'Eras ITC',
var(--#{$prefix}font-sans-serif);
main {
@extend .pb-4;
padding-top: 7rem !important;
}
body.has-hero main {
@extend .pt-3;
@extend .pb-4;
}
section,
@ -108,12 +104,8 @@ main>* {
background-color: $red-200;
}
:target::before {
content: "";
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
:target {
scroll-margin-top: 4.5rem;
}
.anchor-link {