We are looking for a Webflow developer to implement the following Figma design:

👉 Link: Figma Valudio Website

Refer to the section: figma.com/design/5GtwTyKdSNu9jedEdnOSBa/Valudio-Website---V2--Copy-?node-id=4112-8754&t=ZCW5FiZB2mN49Xmt-1

Page Overview

The design includes the following pages:

• Home

• About Us

• Case Study List Page

• Case Study Detail Page

• Blog List Page

• Blog Detail Page

• Contact Page

Additional required pages:

• Privacy Policy

• Legal Notice

• Cookies Policy

• Cookie consent banner (must be functional and compliant)

Website Features

Multilingual support:

• German and English

Responsive design:

• Desktop and mobile views

Animations:

• Use components like this logo slider as reference: webflow.com/made-in-webflow/website/automatic-logo-slider

Case Studies & Blog:

• Existing case studies and blog posts must retain their current URL structure

Contact Form:

• Submissions should be sent via email

Other Requirements

• Google Analytics integration and setup

• Custom 404 page

• Target Lighthouse scores:

• Performance: 85+ (ideal: 95–100)

• Accessibility, SEO, Best Practices: 90+

• Image optimization:

• Use WebP and SVG formats where appropriate

• Ensure responsive sizing and lazy loading

• Images must be compressed before upload

• Performance best practices:

• Minimal use of custom fonts and third-party scripts

• Clean semantic HTML

• Optimized animations, especially for mobile

SEO Technical Requirements

• Clean, semantic HTML (e.g., h1, h2, nav, main, article, section, footer)

• Editable and unique meta titles & descriptions for all pages

• Crawlable and consistent URL structure (retain current blog/case study URLs)

• Proper use of canonical tags

• sitemap.xml and robots.txt auto-generated and accessible

• Open Graph and Twitter Card metadata for sharing

• Descriptive alt text on all images

• lang and hreflang attributes for multilingual support

• 301 redirects for changed/deprecated URLs

• No broken links (internal or external)

• Mobile-optimized and passes Google’s mobile usability tests

• Structured data (Schema.org / JSON-LD) for:

• Blog posts (Article)

• Organization (Organization, LocalBusiness)

• Breadcrumbs (BreadcrumbList)

• Sitemap should auto-update on new CMS item publication

Accessibility – Minimum Requirements

Keyboard Navigation:

• All interactive elements (buttons, links, forms) must be accessible using only the keyboard (Tab, Enter, Space, etc.)

Text Alternatives (Alt Text):

• All images must have meaningful alt attributes

• Decorative images should use alt=""

Color Contrast:

• Text and interactive elements must meet a contrast ratio of at least 4.5:1 (normal text) and 3:1 (large text)

Focus Indicators:

• Provide visible focus styles (e.g., outlines or highlights) for tabbed elements

Semantic HTML:

• Use appropriate semantic tags like button, nav, header, footer, form, label

• Avoid using div or span for interactive elements

Heading Hierarchy:

• Maintain a logical structure using h1 to h6 without skipping levels

Form Accessibility:

• Ensure form fields have associated label tags

• Include proper error messages and aria-describedby attributes where needed

ARIA Roles (if needed):

• Use ARIA roles only when semantic HTML is insufficient, not as a substitute

Language Attribute:

• Set the correct language attribute on each page (lang="en" or lang="de") for screen readers

Avoid Auto-Playing Media:

• Do not auto-play audio or video unless it’s muted and user-controlled

Optional Feature

Language Detection:

• Automatically detect browser language and default to:

• German for German-language browsers

• English otherwise

• Cookies Policy
• Cookie consent banner (must be functional and compliant)
• German and English
• Google Analytics integration and setup
• Custom 404 page
• Accessibility, SEO, Best Practices: 90+
• Image optimization:
• Use WebP and SVG formats where appropriate
• Images must be compressed before upload
• Minimal use of custom fonts and third-party scripts
• Clean semantic HTML
• Optimized animations, especially for mobile
• SEO Technical Requirements
• Clean, semantic HTML (e.g., h1, h2, nav, main, article, section, footer)
• Crawlable and consistent URL structure (retain current blog/case study URLs)
• Proper use of canonical tags
• sitemap.xml and robots.txt auto-generated and accessible
• Open Graph and Twitter Card metadata for sharing
• lang and hreflang attributes for multilingual support
• 301 redirects for changed/deprecated URLs
• No broken links (internal or external)
• Mobile-optimized and passes Google’s mobile usability tests
• Breadcrumbs (BreadcrumbList)
• Sitemap should auto-update on new CMS item publication
• All interactive elements (buttons, links, forms) must be accessible using only the keyboard (Tab, Enter, Space, etc.)
• All images must have meaningful alt attributes
• Decorative images should use alt=""
• Text and interactive elements must meet a contrast ratio of at least 4.5:1 (normal text) and 3:1 (large text)
• Use appropriate semantic tags like button, nav, header, footer, form, label
• Avoid using div or span for interactive elements
• Maintain a logical structure using h1 to h6 without skipping levels
• Ensure form fields have associated label tags
• Include proper error messages and aria-describedby attributes where needed
• Use ARIA roles only when semantic HTML is insufficient, not as a substitute
• Set the correct language attribute on each page (lang="en" or lang="de") for screen readers
• Automatically detect browser language and default to:
• German for German-language browsers
• English otherwise

• Desktop and mobile views
• Use components like this logo slider as reference: webflow.com/made-in-webflow/website/automatic-logo-slider
• Existing case studies and blog posts must retain their current URL structure
• Submissions should be sent via email
• Performance: 85+ (ideal: 95–100)
• Ensure responsive sizing and lazy loading
• Editable and unique meta titles & descriptions for all pages
• Descriptive alt text on all images
• Provide visible focus styles (e.g., outlines or highlights) for tabbed elements