FreeFlex Website Technical Specification
Budget: €250 – €750 EUR
I need a comprehensive technical specification that will guide the build of a modern, high-converting single-product website for FreeFlex, our reversible, binary-coded stainless-steel key and cylinder system. The look and feel must read as a seamless, premium extension of amadeo.com—clean, security-oriented, precise typography, and a bold interplay of dark and light sections—while highlighting the key’s nickel-free, lead-free advantages.
Scope
The site will consist of one core page: the Product Details page. This page must carry all conversion responsibility, so every element has to work hard. I will rely on you to define structure, visual hierarchy, and functional requirements that turn visitors into buyers.
Technical specifications for a modern, high-converting website for a single product, focusing exclusively on FreeFlex (the stainless steel key, a reversible key system, a binary-coded, nickel-free and lead-free stainless steel key and cylinder system). It should feel like a high-quality extension of amadeo.com (clear, technical, security-oriented design with high contrast in dark and light tones, featuring expressive product images and AI animations of the products).
1. General objectives & tone
• Target audience: B2B (locksmiths, planners, facility managers, architects) + B2C (private customers, families).
• Tone: Technical, high-quality, factual, trustworthy. No marketing clichés – focus on technology, patents, security benefits and digital logic in the mechanics.
• Core message: “FreeFlex – The world’s first digital-mechanical key system made of stainless steel. Reversible key, 96-bit binary coding, patented, stainless steel. One key for everything with an NFC chip”
• Style template: Inspired by Amadeo.com but also by https://door.com/?from=latch (minimalist, large hero videos/animations, close-ups of products, technical diagrams, dark mode-friendly, sans-serif typography).
Recommended tech stack (for developers):
• Next.js 14+ (App Router) or Astro for performance + SEO.
• Tailwind CSS + custom design system.
• Framer Motion or GSAP for smooth animations.
• Headless CMS (Sanity.io or Payload CMS) for easy content updates (news, shop products).
• Shop: Shopify buy button / Snipcart / custom API integration with Weclapp.com.
• Hosting: Vercel.
• Multilingual support: i18next + subfolders (/de, /en).
2. Site structure (main navigation)
Home page
├── Products (keys + cylinders)
├── Apps & Planners
├── News / Security information / Health: what does lead in the blood do, nickel allergy – what to do?
├── Accessories (Flexline)
├── Shop (configurator)
├── About FreeFlex / AMADEO
└── Service network
├── Contact / Partner portal
Footer: Legal notice, Downloads (catalogues, certificates), Link to partner login.
3. Detailed page layout
Homepage / Landing page
• Hero section (full screen):
• Background: AI-animated video loop (reversible key insertion, animation of the disc being scanned, close-up of stainless steel with light reflections).
• Headline: “FreeFlex – Digital security in stainless steel” “Sound of Safety”
• Subheading: “Nickel-free, lead-free, patented, Art, binary-coded • reversible key, REACH-compliant”
• CTA buttons: “Discover now” + “To the shop”
• Trust seals: Patents, EN1303, Made in Austria.
• Key benefits (grid with icons/animations):
1. Stainless steel – lead-free, nickel-free, acid-resistant
2. Reversible key (in either direction)
3. NFC chip to prevent cloning and copying
4. Extremely high number of possible combinations (over 79 sextillion)
5. Dynamic locking plans (cylinders remain unchanged, only the keys are updated)
6. One key for all (up to 25 user groups)
• Product family teaser
• Areas of application: Homes, schools, hospitals, industry (cards with images).
• Teaser for security news + CTA to the news section.
• Footer CTA: “Become a partner” + “Configure now”.
Products by application
• Filterable product grid: keys, front door cylinders, double cylinders, door cylinders, half cylinders, round cylinders, letterbox cylinders, bicycles, padlocks, etc.
• Each card: High-resolution image + technical data (material, certifications, lengths, colours).
• Detail pages: 3D/animated views, technical drawings, ‘Comparison with conventional keys’ table.
Flexline / Locking systems
• Teaser for the interactive configurator.
• Examples of complex locking systems.
• Benefits of dynamic planning.
Software & Planner
• Screenshots / demo videos of the FreeFlex Planner (Cloud + Desktop).
• Features: real-time order status, audit trails, management of locking plans, API integration.
News / Security Knowledge
• Blog-style articles: Acid attacks, copy protection, metal detection, nickel silver vs. other materials, etc.
• SEO-optimised.
Shop
• Direct ordering + configuration tool for individual cylinders/keys and complete systems. Easy to order
• Integration with AMADEO backend (if available) or manual approval workflow.
About FreeFlex / AMADEO
• Company history, patents (>6, protection until 2044), in-house development & manufacturing.
• “Custom profile system” – customer protection & dedicated customer portal.
. see Instagram posts
Contact / Partner Portal
• Form + map.
• Partner area: Downloads (catalogues, price lists, videos, certificates, training materials).
4. Design & UI/UX Guidelines
• Colour palette: see amadeo.com and CD guidelines. Dark background (#0A0A0A or #111), accent colour stainless steel silver (#C0C0C0 / #E5E5E5), accents in safety green/blue (#00FF9F or similar to Amadeo).
• Typography: as on amadeo.com
• Imagery:
• Macro photography of keys/cylinders.
• Animated SVG / Lottie for scanning data carriers, flow of binary code.
• Application photos (homes, hospitals, schools).
• Interactions:
• Scroll-triggered animations (fade-in, parallax effect on the hero image).
• Hover effects on products showing the internal structure.
• Mobile-first, fully responsive.
• Performance: Core Web Vitals >95. Lazy loading for videos/images. Optimised for AI search / Google.
5. Technical features to be implemented
• SEO: Structured data (product, FAQ, organisation), fast loading, multilingual hreflang.
• Analytics: Google Analytics + Tag Manager, conversion tracking for shop/configurator.
• Forms: Contact, configurator enquiries → email + CRM (e.g. via Make.com or direct API).
• Security: HTTPS, form validation, rate limiting.
• Accessibility: WCAG 2.2 AA.
• Future-proof: API-enabled structure for internal administration (no traditional CMS).
Examples:
https://door.com/?from=latch
https://www.apple.com/
Scope
The site will consist of one core page: the Product Details page. This page must carry all conversion responsibility, so every element has to work hard. I will rely on you to define structure, visual hierarchy, and functional requirements that turn visitors into buyers.
Technical specifications for a modern, high-converting website for a single product, focusing exclusively on FreeFlex (the stainless steel key, a reversible key system, a binary-coded, nickel-free and lead-free stainless steel key and cylinder system). It should feel like a high-quality extension of amadeo.com (clear, technical, security-oriented design with high contrast in dark and light tones, featuring expressive product images and AI animations of the products).
1. General objectives & tone
• Target audience: B2B (locksmiths, planners, facility managers, architects) + B2C (private customers, families).
• Tone: Technical, high-quality, factual, trustworthy. No marketing clichés – focus on technology, patents, security benefits and digital logic in the mechanics.
• Core message: “FreeFlex – The world’s first digital-mechanical key system made of stainless steel. Reversible key, 96-bit binary coding, patented, stainless steel. One key for everything with an NFC chip”
• Style template: Inspired by Amadeo.com but also by https://door.com/?from=latch (minimalist, large hero videos/animations, close-ups of products, technical diagrams, dark mode-friendly, sans-serif typography).
Recommended tech stack (for developers):
• Next.js 14+ (App Router) or Astro for performance + SEO.
• Tailwind CSS + custom design system.
• Framer Motion or GSAP for smooth animations.
• Headless CMS (Sanity.io or Payload CMS) for easy content updates (news, shop products).
• Shop: Shopify buy button / Snipcart / custom API integration with Weclapp.com.
• Hosting: Vercel.
• Multilingual support: i18next + subfolders (/de, /en).
2. Site structure (main navigation)
Home page
├── Products (keys + cylinders)
├── Apps & Planners
├── News / Security information / Health: what does lead in the blood do, nickel allergy – what to do?
├── Accessories (Flexline)
├── Shop (configurator)
├── About FreeFlex / AMADEO
└── Service network
├── Contact / Partner portal
Footer: Legal notice, Downloads (catalogues, certificates), Link to partner login.
3. Detailed page layout
Homepage / Landing page
• Hero section (full screen):
• Background: AI-animated video loop (reversible key insertion, animation of the disc being scanned, close-up of stainless steel with light reflections).
• Headline: “FreeFlex – Digital security in stainless steel” “Sound of Safety”
• Subheading: “Nickel-free, lead-free, patented, Art, binary-coded • reversible key, REACH-compliant”
• CTA buttons: “Discover now” + “To the shop”
• Trust seals: Patents, EN1303, Made in Austria.
• Key benefits (grid with icons/animations):
1. Stainless steel – lead-free, nickel-free, acid-resistant
2. Reversible key (in either direction)
3. NFC chip to prevent cloning and copying
4. Extremely high number of possible combinations (over 79 sextillion)
5. Dynamic locking plans (cylinders remain unchanged, only the keys are updated)
6. One key for all (up to 25 user groups)
• Product family teaser
• Areas of application: Homes, schools, hospitals, industry (cards with images).
• Teaser for security news + CTA to the news section.
• Footer CTA: “Become a partner” + “Configure now”.
Products by application
• Filterable product grid: keys, front door cylinders, double cylinders, door cylinders, half cylinders, round cylinders, letterbox cylinders, bicycles, padlocks, etc.
• Each card: High-resolution image + technical data (material, certifications, lengths, colours).
• Detail pages: 3D/animated views, technical drawings, ‘Comparison with conventional keys’ table.
Flexline / Locking systems
• Teaser for the interactive configurator.
• Examples of complex locking systems.
• Benefits of dynamic planning.
Software & Planner
• Screenshots / demo videos of the FreeFlex Planner (Cloud + Desktop).
• Features: real-time order status, audit trails, management of locking plans, API integration.
News / Security Knowledge
• Blog-style articles: Acid attacks, copy protection, metal detection, nickel silver vs. other materials, etc.
• SEO-optimised.
Shop
• Direct ordering + configuration tool for individual cylinders/keys and complete systems. Easy to order
• Integration with AMADEO backend (if available) or manual approval workflow.
About FreeFlex / AMADEO
• Company history, patents (>6, protection until 2044), in-house development & manufacturing.
• “Custom profile system” – customer protection & dedicated customer portal.
. see Instagram posts
Contact / Partner Portal
• Form + map.
• Partner area: Downloads (catalogues, price lists, videos, certificates, training materials).
4. Design & UI/UX Guidelines
• Colour palette: see amadeo.com and CD guidelines. Dark background (#0A0A0A or #111), accent colour stainless steel silver (#C0C0C0 / #E5E5E5), accents in safety green/blue (#00FF9F or similar to Amadeo).
• Typography: as on amadeo.com
• Imagery:
• Macro photography of keys/cylinders.
• Animated SVG / Lottie for scanning data carriers, flow of binary code.
• Application photos (homes, hospitals, schools).
• Interactions:
• Scroll-triggered animations (fade-in, parallax effect on the hero image).
• Hover effects on products showing the internal structure.
• Mobile-first, fully responsive.
• Performance: Core Web Vitals >95. Lazy loading for videos/images. Optimised for AI search / Google.
5. Technical features to be implemented
• SEO: Structured data (product, FAQ, organisation), fast loading, multilingual hreflang.
• Analytics: Google Analytics + Tag Manager, conversion tracking for shop/configurator.
• Forms: Contact, configurator enquiries → email + CRM (e.g. via Make.com or direct API).
• Security: HTTPS, form validation, rate limiting.
• Accessibility: WCAG 2.2 AA.
• Future-proof: API-enabled structure for internal administration (no traditional CMS).
Examples:
https://door.com/?from=latch
https://www.apple.com/