B2B landing page · Matterport 3D service · Next.js + Framer Motion
Overview
I designed and built a modern landing page prototype for a Matterport-based 3D scanning service concept.
The goal was to create a professional B2B-facing website that explains the value of 3D scanning for real estate, insurance, construction, and documentation use cases.
The project was built as a full frontend product prototype, not just a static page. It covers the marketing sections (hero, services, pricing, gallery, process, about), a working contact form with backend API, SEO metadata and structured data, and the German legal pages (Impressum, Datenschutz, AGB).
The challenge
A technical 3D scanning service is not always easy to explain to non-technical users.
Potential customers need to understand what the service does, where it creates value, how the process works, what packages are available, and how to request an offer.
The challenge was to design a landing page that feels premium and trustworthy while still being clear, practical, and easy to navigate.
What I did
I designed and built the website prototype.
My work covered the full frontend layer: the page structure, dark premium visual style, and reusable React components in TypeScript. I implemented the responsive layouts with Tailwind, Framer Motion animations, and the working contact form with a Microsoft Graph email backend. SEO metadata, structured data, and the German legal pages are also part of the project.
Project structure
Page sections
Hero section
The landing page starts with a cinematic hero section using a Matterport-related visual background, dark overlay, animated typewriter text, and brand positioning. The hero communicates the main message quickly: Your space. Digital. Precise. The purpose is to make the service feel premium, modern, and technically advanced within the first few seconds.
Services section
The services section explains the main use cases for the 3D scanning offer. It is structured around clear service cards including real estate and virtual tours, insurance and damage documentation, and construction and architecture. Each card uses icons, short benefit-driven bullet points, hover animations, and a consistent visual style.
Pricing packages
The website includes a package/pricing section. The structure presents different service levels and helps users compare what is included in each package. A B2B service page should not only look good; it should also help visitors understand the commercial offer and decide what to request.
Gallery section
The gallery section gives the page a more visual and concrete feeling. Instead of explaining the service only with text, the page includes image-based previews and sample Matterport-style links. For the public portfolio version, links, customer references, and project data are replaced with demo content.
Process section
The process section explains how the service works step by step. This reduces uncertainty for potential customers because they can understand the journey from first contact to scan delivery. Especially useful for services involving physical appointments, technical equipment, documentation, and digital delivery.
About section
The page includes an about section that positions the service around precision, reliability, and data-conscious handling. This section helps the landing page feel less generic and more brand-driven. For the public version, internal references and sensitive claims are replaced with neutral demo branding.
Contact form
The project includes a contact form and backend API route. The form allows users to request an offer and provide relevant project information. This turns the landing page from a simple showcase into a functional lead-generation prototype.
SEO and supporting pages
The project includes metadata, sitemap, robots configuration, structured data, and legal/supporting pages including Impressum, Datenschutz, and AGB. This shows the site was built with practical website requirements in mind, not only as a visual mockup.
Technical decisions
Next.js as the frontend framework
Next.js was used to structure the website as a modern React application with file-based routing, reusable components, metadata support, and API route handling.
Tailwind CSS for responsive UI
Tailwind CSS was used to build the visual design directly with utility classes and responsive breakpoints. This allowed fast iteration on layout, spacing, typography, dark theme styling, and mobile responsiveness.
Framer Motion for animations
Framer Motion was used for animated UI behavior such as section reveal animations, hover effects, typewriter timing, and smoother interaction feel.
Component-based structure
The website is split into reusable components such as Header, Hero, Leistungen, Pakete, Galerie, Prozess, Über Uns, KontaktForm, Footer, Logo, and StructuredData. This makes the page easier to maintain and extend.
Realistic business-page structure
The project includes not only visual sections, but also business-critical parts such as pricing, contact form, SEO metadata, legal pages, robots, sitemap, and structured data.
Reliability and quality
The outcome
This project shows that I can build more than backend automations.
It demonstrates frontend product thinking: how to turn a technical service idea into a clear, structured, professional landing page.
The main value of the project is that it connects technical 3D scanning capabilities with business communication: visitors can understand the service, compare packages, see example use cases, follow the process, and request contact through a form.
Tech stack
Proof / Evidence
This case study is based on a frontend prototype built as a Matterport / 3D scanning landing page concept. The original prototype is not published, since it contains company names, contact details, internal references, customer examples, private assets, domain configuration, and credentials.
Public proof shown on this page
A page structure diagram showing the BauScope 3D landing page: Next.js app with service sections, pricing, gallery, contact form with API backend, SEO metadata, and responsive layout.
Public code & documentation
A reference repository documenting the frontend patterns behind this prototype: Microsoft Graph email integration, Framer Motion + IntersectionObserver scroll animations, JSON-LD structured data, and Next.js 15 App Router SEO setup. Architecture documentation and selected snippets, not the full source.
Code excerpt: Microsoft Graph email backend
The contact form does not use SMTP or a third-party relay. It uses Azure AD's client_credentials flow to obtain a Microsoft Graph token, then calls Graph's sendMail endpoint to dispatch the email through a Microsoft 365 mailbox. Deliverability matches any internal email; sent items are saved to the sender's Outlook for an audit trail.
Full handler in snippets/api-contact-graph.ts. The repository also covers Framer Motion scroll-reveal patterns, IntersectionObserver-based typewriter triggers, JSON-LD LocalBusiness schema, and Next.js App Router sitemap and robots configuration. The original prototype was never deployed to production; the public repository documents the patterns, not the full application.
Prototype Publication Note
This project is a frontend/product prototype for a Matterport-based 3D scanning service concept. The public version uses demo branding, mock contact data, and placeholder project examples. The source repository documents the architecture patterns rather than republishing the full prototype.