As a Data Engineer, design the database schema to support multilingual content, user roles, and form submissions.
As a DevOps Engineer, set up a CI/CD pipeline for automated testing and deployment of the website.
As a frontend developer, implement the HomeHero section for the Home page. This section features a blueprint-to-3D morphing animation using motion/react, with a headline ('Engineering Excellence Meets Digital Innovation'), a subheadline, and a primary CTA button ('Explore Our Work'). The animation should loop continuously over 10 seconds, with hover and zoom interactions allowing deeper engagement. The section should maintain the design structure/theme from the source and be accessible to both Admin and Visitor personas. Acceptance criteria: The HomeHero must render exactly once on the Home page, showcase the blueprint morphing animation, and provide interactive zoom and rotate features. The headline and CTA must remain stable in the foreground, and the animation must not block interaction. The section must be responsive and maintain the visual design as specified.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeServices section on the Home page. This section displays a grid of service cards showcasing the company's core offerings. Each card includes an icon, title, and description, and uses a surface background with blue text accents and orange hover highlights. The grid should be responsive, stacking vertically on mobile and displaying in a 3-4 column layout on desktop. Implement scroll-triggered animations using motion/react's `useInView` hook to reveal cards as they enter the viewport. Cards should lift and highlight on hover, and clicking a card or the 'View All Services' link should navigate to the /services page. Ensure the section is accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeModelShowcaseContainer section on the Home page. This section manages the responsive layout of the 3D model showcase, arranging the HomeModelShowcaseInfo and HomeModelShowcaseViewer components. On desktop, it should display a two-column layout with a 40/60 split, and on mobile, it should stack the components vertically. The section includes a heading and a 'View More Models' CTA that links to the /models page. Ensure the layout transitions smoothly between breakpoints and is accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the HomeCompanyOverview section to provide a brief introduction of AR Engineering Office OÜ. This section should include a headline 'Why Choose Areo', supporting paragraphs, and trust badges with animations. The headline should fade in as the section scrolls into view, and each trust badge should pop in sequentially with a scale and opacity animation. The badges should include icons that rotate slowly and glow on hover. The section concludes with a secondary CTA 'Learn More About Us' linking to the Company page. Ensure the design uses the specified colors and typography. Acceptance criteria: The Home page must render the HomeCompanyOverview section once, with all animations and interactions functioning as described. The section must visually separate itself with a light grey background and use the primary color for headings. The 'Learn More About Us' link must navigate to the Company page. Access is shared between Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the ServicesCatalog section to display a directory of 14 service fields as cards. Each card should include a title, description, and image, supporting bilingual content (ET/EN). Featured services should be prominently displayed at the top, with the rest in a responsive grid layout. Acceptance criteria: The Services page must render the ServicesCatalog section exactly once. The section must display all service cards with correct titles and descriptions based on the language setting. The grid must be responsive, collapsing to a single column on mobile. The section must be accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the ServicesCategories section to group services by category, such as Facades, Structural, Drawings, and Safety. Each category should display a title, description, and related service names or icons. The layout should be responsive, adapting from multi-column to vertical stack on mobile. Acceptance criteria: The Services page must render the ServicesCategories section exactly once. The section must display categories with correct titles and descriptions based on the language setting. The layout must be responsive, supporting quick scanning and navigation. The section must be accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
As a frontend developer, implement the ServicesCTA section to encourage visitor engagement with a compelling headline, supporting text, and a prominent CTA button linking to the Contact page. The section should support bilingual content (ET/EN) and include an optional secondary link to the Portfolio page. Acceptance criteria: The Services page must render the ServicesCTA section exactly once. The section must display the headline and description based on the language setting. The primary CTA button must link to the /Contact page, and the secondary link must point to /Portfolio. The section must be accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Implement and verify the project capability `3d.model.viewer.state` required by generated downstream tasks. Expose a stable implementation contract and satisfy every linked consumer without frontend mocks.
Implement and verify the project capability `bim.models` required by generated downstream tasks. Expose a stable implementation contract and satisfy every linked consumer without frontend mocks.
Implement and verify the project capability `portfolio.browsing` required by generated downstream tasks. Expose a stable implementation contract and satisfy every linked consumer without frontend mocks.
As a Backend Developer, create an API to handle contact form submissions and store them in the database.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the Navbar section for the Login page. This section provides a shared navigation shell with responsive design, including AR Engineering Office OÜ branding, navigation links (Company, Services, Portfolio, Models, References, Contact), a language toggle (Estonian/English), and a mobile hamburger menu for small screens. The Navbar should manage state for menu visibility and language selection, and update the URL to reflect language changes. Ensure the Navbar is responsive and adapts to different screen sizes, with a mobile menu that animates open/close transitions. Acceptance criteria:
- The Navbar component must render exactly once on the Login page.
- It must include all specified navigation links and a language toggle.
- The design must match the provided CSS, ensuring responsive behavior.
- The language toggle must update the URL and reflect the current language.
- The Navbar must be accessible to all personas, with links conditionally shown based on persona access context.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the LoginPanel section for the Login page. This section includes a centered authentication card panel with email and password input fields, a remember-me checkbox, a login submit button, a password visibility toggle, a forgot-password link, and an optional signup redirect. The panel should support real-time input validation, error message display, and disabled/loading states on the submit button during authentication. It must adapt to both desktop and mobile layouts, with language support for Estonian and English. Acceptance criteria:
- The LoginPanel component must render exactly once on the Login page.
- It must include all specified form elements and interactions.
- The design must match the provided CSS, ensuring responsive behavior.
- The form must validate inputs and display errors as specified.
- The Login page is accessible only to Admin persona.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the Footer section for the Login page. This section is a shared global footer that appears on every routed page, including the Login page. It includes the company name (AR Engineering Office OÜ), contact information (email, phone, address), quick links to main pages (Company, Services, Portfolio, Models, References, Contact), social media icons, a language toggle, and legal links (Privacy Policy, Terms of Service). The footer uses a light grey background (#f2f2f2) with text in dark grey (#333333). On mobile, the footer content stacks vertically; on desktop, it arranges in responsive columns. The footer must remain consistent across all pages. The component may already exist from a previous page implementation. Acceptance criteria: The Footer component must render exactly once on the Login page; all links must be functional and navigate to the correct pages; the design structure and theme must match the provided JSX and CSS; no backend integration is required for this static section; access is shared by Admin and Visitor personas.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the HomeModelShowcaseInfo section on the Home page. This read-only panel displays metadata about the currently selected 3D model, including the model title, description, and technical specifications. The panel should update its content via prop drilling from the HomeModelShowcaseViewer's state, with fade-in transitions for text and staggered slide-reveal for spec list items. Ensure the section is styled with a white background and subtle border, and is accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#9
Waiting for dependencies
As a frontend developer, implement the HomeModelShowcaseViewer section to enable interactive 3D/BIM model exploration and part inspection. This section uses @react-three/fiber and @react-three/drei to render a 3D canvas where users can rotate models via mouse drag, zoom via scroll wheel, and interact with model parts via hover (tooltips) and click (detail selection). The viewer manages its own state, including selectedModelId, rotationX, rotationY, zoomLevel, and hoveredPartId. Ensure tooltips appear on hover over model geometry and model selector buttons allow switching between models. Acceptance criteria:
- The Home page must render the HomeModelShowcaseViewer section exactly once.
- Users must be able to rotate models (X/Y constraints, max ±30°) and zoom (1.0–2.5× range) using mouse interactions.
- Tooltips must display part names and specs on hover, with an emissive glow effect (#ff9900).
- The section must not emit state to siblings; HomeModelShowcaseInfo receives only immutable selectedModel data.
- The design structure/theme must match the provided CSS, including responsive controls for desktop and mobile.
- Access is shared between Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the HomeFeaturedProjects section to showcase completed projects in a carousel or grid format. This section displays 3-4 representative projects with imagery, project title, brief description, completion year, and project status. Ensure the section includes a heading and a 'View All Projects' or 'Explore Portfolio' CTA linking to the References page. Acceptance criteria:
- The Home page must render the HomeFeaturedProjects section exactly once.
- Projects must animate into view as the section scrolls into view, with hover effects that expand the card and apply a parallax effect to the image.
- The design must adhere to the provided CSS, supporting a responsive 3-column grid on desktop and horizontal scroll on mobile.
- The CTA must navigate to the References page, accessible by Visitor personas.
- Access is shared between Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CMSSidebar section for the CMS page. This section provides navigation for CMS sections such as Content, Media, and Languages. It should highlight the active section and collapse into a hamburger menu on mobile devices. The sidebar should be responsive and maintain visual consistency with the provided CSS. Acceptance criteria: The CMSSidebar must render exactly once on the CMS page, allow navigation between sections, and collapse correctly on mobile. The active section should be visually distinct. The section is restricted to Admin access only.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CMSContentManager section for the CMS page. This section includes a list of website pages with status badges, an inline editor for page content, and controls for saving, publishing, and canceling edits. It also features a publish-all button, a preview button, and a deployment log. The section should manage its state independently and alert the admin to unsaved changes. Acceptance criteria: The CMSContentManager must render exactly once on the CMS page, display the page list with correct statuses, and provide a functional editor with save, publish, and cancel capabilities. The publish-all and preview buttons must work as expected, and the deployment log should display recent actions. The section is restricted to Admin access only.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CMSMediaLibrary section for the CMS page. This section is a media asset management interface that displays a grid of uploaded images, 3D models, and documents. It includes a drag-and-drop upload zone, filter by tag options, sort options, and an inline asset details panel. Users can edit metadata, delete assets, and download files. The section uses React state hooks to manage assets, selected asset IDs, and UI states like uploading and drag-over. Ensure the interface supports filtering by tags such as 'facade', 'glass', 'aluminium', 'bim', 'drawing', 'steel', etc., and sorting by date, size, or name. The upload functionality should handle file selection and preview, with a confirmation step before adding to the media grid. The asset details panel should allow editing of tags and descriptions, and confirm deletion actions. This page is accessible by Admin only, so ensure that any navigation links to this section are conditionally shown based on user role. Acceptance criteria: The CMS page must render the CMSMediaLibrary component exactly once. The media grid, upload zone, filter bar, and asset details panel must be visible and functional. The design structure and theme must match the provided CSS. The backend must support media asset CRUD operations, including upload, delete, and metadata updates. Access to this page must be restricted to Admin personas only.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CMSTranslationSync section for the CMS page. This section provides a bilingual content management interface for Estonian and English, allowing Admin users to manage translations. The interface includes a language selector, a translation status table, a content comparison view, a sync button, and status badges indicating translation status (Translated, Pending, Out-of-Sync). Implement state management using React hooks to handle language swapping, syncing content, and marking pages as translated. Ensure the sync button updates the translation status and the content comparison view accurately reflects the source and target content. Acceptance criteria:
- The CMSTranslationSync component must render on the CMS page, accessible only by Admin users.
- The language selector must allow switching between Estonian and English.
- The translation status table must display the correct status for each page.
- The sync button must update the translation status to 'Translated' and propagate changes from source to target.
- The content comparison view must show source and target content side-by-side.
- The design must adhere to the provided CSS styles, maintaining the layout and theme.
- Backend integration is required to fetch and update translation statuses.
- The section must respect the restricted access for Admin users only.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyHero section to introduce AR Engineering Office with a compelling headline, tagline, and hero imagery. This section should set the professional tone and context for the company page. Ensure the section displays the company name 'AR Engineering Office OÜ', the headline 'Engineering Excellence Since 2005', and the subtitle 'We transform architectural visions into built reality through precision engineering, innovative design, and reliable delivery.' The background should be a gradient as specified in the CSS. Acceptance criteria: The CompanyHero section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified gradient background and text styles. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#7#1
Waiting for dependencies
As a frontend developer, implement the CompanyMission section to present the company's mission, vision, and purpose. This section should include the mission statement 'Delivering Engineering Solutions with Precision and Integrity' and highlight cards for 'Precision Engineering', 'Trusted Partnerships', and 'Complete Delivery'. Acceptance criteria: The CompanyMission section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified grid layout and text styles. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyExpertise section to showcase the company's expertise and service specializations. This section should display all 14 service fields in a visually scannable grid format, each with an image and brief description. Acceptance criteria: The CompanyExpertise section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified grid layout and hover effects. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyCredentials section to display company credentials, certifications, and experience metrics. This section should include metrics like '19+ Years of Experience' and certifications such as 'ISO 9001 Quality Management'. Acceptance criteria: The CompanyCredentials section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified grid layout and text styles. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyTeam section to introduce the company team with key personnel profiles. This section should include roles, photos, brief bios, and expertise areas for team members like 'Andres Reiljan' and 'Mart Tamm'. Acceptance criteria: The CompanyTeam section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified grid layout and hover effects. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyValues section to articulate company values and principles. This section should include value statements like 'Precision', 'Innovation', and 'Sustainability', each with supporting icons and descriptions. Acceptance criteria: The CompanyValues section must render exactly once on the Company page, visible to Visitors only. It should maintain the design structure with the specified grid layout and text styles. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the CompanyCTA section to encourage visitors to engage with the company. This section should include a headline 'Ready to Start Your Project?' and buttons for 'Request a Quote', 'View Our Services', and 'Browse Portfolio'. Acceptance criteria: The CompanyCTA section must render exactly once at the end of the Company page, visible to Visitors only. It should maintain the design structure with the specified button styles and hover effects. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ServicesBanner section to introduce the Services page with a professional headline and subheading. The section should support bilingual content (ET/EN) and set the visual hierarchy and tone for the page. The language should be determined by the 'lang' URL parameter, defaulting to Estonian ('et'). The section includes a title, a subtitle, and a decorative line with an animation. Acceptance criteria: The Services page must render the ServicesBanner section exactly once. The section must display the title 'Teenused' or 'Services' and the appropriate subtitle based on the language setting. The design must match the provided CSS, including the animation for the line. The section must be accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#7
Waiting for dependencies
As a frontend developer, implement the PortfolioGrid section for the Portfolio page. This section displays 12 categories of engineering drawings and design solutions, supporting bilingual labels, category selection, view mode toggle (grid/list), and sorting controls. Each category card includes a thumbnail, title, description, and project count. The section must be responsive, adapting to different screen sizes. Acceptance criteria: The Portfolio page must render the PortfolioGrid section exactly once. All 12 categories must be displayed with accurate bilingual content. The view mode toggle and sorting controls must function correctly, updating the display without page reload. The design must adhere to the provided CSS, ensuring responsive behavior across devices. The section is accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#52
Waiting for dependencies
As a frontend developer, implement the ModelViewer section for the Models page. This section displays a selected BIM model using @react-three/fiber, allowing users to rotate, zoom, pan, and reset the view. It includes a model info panel showing title, category, and description, and manages the selected model state and camera controls. Acceptance criteria: The ModelViewer section must render exactly once on the Models page, visible to Visitors only. The 3D canvas must support interactive controls as specified, and the info panel must display metadata from the model_viewer_state. Ensure the loading state is handled correctly. Backend integration is required for model data retrieval.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1#51
Waiting for dependencies
As a frontend developer, implement the ModelsGrid section for the Models page. This section displays a gallery of available 3D/BIM models as cards in a responsive grid. Each card shows a thumbnail, title, category label, and brief description. Clicking a card selects that model in the viewer above. Acceptance criteria: The ModelsGrid section must render exactly once on the Models page, visible to Visitors only. The grid must be responsive and display model metadata correctly. Ensure the card click interaction updates the selected model in the ModelViewer section. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#51#1
Waiting for dependencies
As a frontend developer, implement the ModelsBenefits section for the Models page. This section highlights the value and use cases of 3D/BIM models for engineering and design. It lists key benefits such as better visualization, coordination, accuracy, and client communication, with brief iconography or accent elements. Acceptance criteria: The ModelsBenefits section must render exactly once on the Models page, visible to Visitors only. The design must match the provided CSS, and the benefits must be presented with icons and descriptive text. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the FooterNavigation section for the Models page. This section provides navigation links and company branding. It includes a brand logo and tagline, language selection buttons, and navigation links to various site sections such as Home, Services, Portfolio, Company, References, and Contact. The section uses motion animations for the navigation columns and a scroll-to-top button that appears after scrolling down. Ensure the language selection updates the URL parameters correctly. Acceptance criteria: The FooterNavigation component must render exactly once on the Models page. It should display the brand identity and navigation links as specified in the JSX. The design structure and theme must match the provided CSS. The language selection must update the URL without page reloads. The scroll-to-top button should appear after scrolling 480px and function smoothly. Access is restricted to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the FooterServices section for the Models page. This section highlights service specialties and expertise. It includes a list of services such as Klaasfassaadid, Klaaspiirded, Projekteerimine, and more, each with an associated icon. The section uses motion animations for interactive effects when hovering over service items. Acceptance criteria: The FooterServices component must render exactly once on the Models page. It should display the service specialties as specified in the JSX. The design structure and theme must match the provided CSS. The hover effects should be smooth and responsive. Access is restricted to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the FooterLegal section for the Models page. This section includes legal links, social media icons, and a copyright notice. It provides links to Privacy Policy, Terms of Service, and Cookie Policy, as well as social media links to LinkedIn, Facebook, and Instagram. The section uses magnetic icon effects for social media links. Acceptance criteria: The FooterLegal component must render exactly once on the Models page. It should display the legal links and social media icons as specified in the JSX. The design structure and theme must match the provided CSS. The magnetic icon effects should be smooth and responsive. Access is restricted to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ModelCard component for the Models page. This component displays individual model information with a category color accent, a thumbnail placeholder, a type badge, and a description. It supports selection interaction to highlight the currently viewed model. Acceptance criteria: The ModelCard component must render for each model on the Models page. It should display the model information as specified in the JSX. The design structure and theme must match the provided CSS. The selection interaction should update the card's appearance to indicate the selected state. Access is restricted to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ModelInfoPanel section on the Models page. This section displays detailed information about a model, including its category, type, title, and description. The category is styled with specific colors based on predefined categories such as 'Klaasfassaadid' and 'Alumiiniumfassaadid'. The panel includes metadata icons for 'Interactive 3D', 'BIM Ready', and 'GLB Format'. It also features action buttons for 'Request Full Model' and 'Download Specs'. Ensure the panel is sticky at the top of the viewport and adapts to different screen sizes. Acceptance criteria: The ModelInfoPanel must render exactly once on the Models page when a model is provided. It should display the correct category colors and metadata icons. The action buttons must be functional, though backend integration for these actions is not required at this stage. The section should be accessible to Visitors only, as per the page access context.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ModelViewerControls section on the Models page. This section provides interactive controls for manipulating the 3D model view, including gestures for rotating and zooming the model. It includes a reset button that triggers the onReset function to restore the model's default view. Acceptance criteria: The ModelViewerControls must render exactly once on the Models page and provide functional gesture instructions and a reset button. The reset button must call the onReset function when clicked. The section should be accessible to Visitors only, as per the page access context.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ReferencesPortfolio section for the References page. This section displays a responsive grid of project cards with filtering and sorting capabilities. Each card includes an image, title, description, year, category badge, and technologies list. The grid should support bilingual labels and adjust to different screen sizes, showing 3-4 columns on desktop, 2 on tablet, and 1 on mobile. Acceptance criteria: The ReferencesPortfolio must render on the References page, displaying all projects with correct filtering and sorting functionality. The grid should be responsive and support bilingual UI labels. The section should be visible to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ReferencesFooterCTA section for the References page. This section includes a compelling headline, supporting copy, and a primary CTA button linking to the Contact page. It also features an optional secondary link to the Services page. The CTA button should have a magnetic hover effect and span full width on mobile. Acceptance criteria: The ReferencesFooterCTA must render on the References page, displaying the correct bilingual text. The primary CTA button should link to the Contact page and the secondary link to the Services page. The section should be visible to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ContactInfo section to display company contact information including address, phone, email, and business hours. The section should be organized in a card or multi-column layout and support bilingual display based on the 'lang' URL parameter. Each contact method should be interactive, allowing users to initiate contact via email or phone. Acceptance criteria: The ContactInfo component must render exactly once on the Contact page. It should display contact details in the selected language, with interactive links for phone and email. The section is accessible to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the HomeCallToAction section to drive visitor engagement with a prominent call-to-action. This section should feature a headline with a typing effect, supporting copy, and a primary CTA button with a magnetic hover effect. The button should navigate to the Contact page. Ensure the design uses the accent red for the button and white text for contrast. The section should also include optional contact information. Acceptance criteria: The Home page must render the HomeCallToAction section once, with the headline typing effect and magnetic button hover interaction functioning as described. The primary CTA button must navigate to the Contact page. Access is shared between Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#2
Waiting for dependencies
As a frontend developer, implement the CMSHeader section for the CMS page. This section includes a page title 'CMS Dashboard', a live site status indicator, and a preview link to the published site. The header should also include a breadcrumb navigation with links to 'Admin' and the current 'CMS Dashboard'. The preview link should open the site in a new tab. Ensure the design matches the provided CSS, including responsive adjustments for mobile. Acceptance criteria: The CMSHeader must render exactly once on the CMS page, display the correct title and status, and provide a functional preview link. The breadcrumb navigation should be accessible and visually consistent with the design. The section is restricted to Admin access only.
Page access: Admin only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1#4
Waiting for dependencies
As a frontend developer, implement the PortfolioHeader section for the Portfolio page. This section includes a bilingual title, subtitle, and description to introduce the portfolio. It features a language switcher to toggle between English and Estonian without reloading the page. The header should have a visual separator or light background accent to set the visual tone. Acceptance criteria: The Portfolio page must render the PortfolioHeader section exactly once. The section must display the title 'Portfolio' or 'Portfoolio' based on the selected language, with corresponding subtitles and descriptions. The language switcher must toggle the language state and update the text accordingly. The design must match the provided CSS, including the gradient background and responsive layout. The section is accessible to both Admin and Visitor personas.
Page access: shared by all personas (Admin, Visitor). This is verification context and does not request role-specific implementation.
Depends on:#27
Waiting for dependencies
As a frontend developer, implement the ContactForm section to capture visitor inquiries and quotation requests. The form should include fields for name, email, phone, company, subject, inquiry type, and message. It must handle form validation, error states, and display a success confirmation upon submission. The form should own its submission state and interactions. Acceptance criteria: The ContactForm component must render exactly once on the Contact page. It should validate inputs on blur and submit the form data, displaying success or error states as appropriate. The form is accessible to Visitors only. Backend integration is required for form submission.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#2#1
Waiting for dependencies
As a frontend developer, implement the ModelsHero section for the Models page. This section introduces the 3D/BIM model showcase with a headline, subheading, and optional background visual cue. Ensure the section communicates the page's purpose and establishes a professional tone. The section should include a '3D / BIM' badge, a headline 'Interactive 3D Models', and a descriptive subheading. The background should feature a linear gradient and optional radial gradients for visual accents. Acceptance criteria: The ModelsHero section must render exactly once on the Models page, visible to Visitors only. The design must match the provided CSS, including the scroll hint animation. No backend integration is required.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#31#1
Waiting for dependencies
As a Tech Lead, verify the end-to-end integration between the Contact Form frontend implementation and the Contact Form API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Depends on:#48#2#1
Waiting for dependencies
As a frontend developer, implement the ReferencesHeader section for the References page. This section introduces the portfolio gallery with a bilingual header, description, and an optional hero image. It includes a language toggle button to switch between Estonian and English, using the URL parameter 'lang'. The header text uses a scramble animation effect for the main heading. Ensure the layout is responsive, stacking vertically on mobile devices. Acceptance criteria: The ReferencesHeader must render on the References page, displaying the correct bilingual text based on the URL parameter. The scramble animation should complete within 1.2 seconds. The language toggle must update the URL and switch text language without page reload. The section should be visible to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#33#1
Waiting for dependencies
As a frontend developer, implement the ContactHero section to introduce the Contact page with a bilingual headline and subheading. This section should dynamically switch between Estonian and English based on the 'lang' URL parameter. The section includes a visual accent and animations for the headline and subheading. Acceptance criteria: The ContactHero component must render exactly once on the Contact page. It should display the headline and subheading in the selected language, with animations defined in the CSS. The visual accent must be present as a decorative element. The section is accessible to Visitors only.
Page access: Visitor only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.
Depends on:#1#43
Waiting for dependencies
No comments yet. Be the first!