DaizLabRatZ

Day 1 · Architecture & Aesthetics

Executive Profile Card

Today you move from writing foundational code to engineering production-ready systems. We follow one principle: systems over hustle. How your code is structured, maintained and rule-bound matters as much as the visual result.

Build a reusable Expert to Expert (E2E) Executive Profile Card for a platform connecting top-tier professionals. It must feel ultra-premium, minimal and luxurious.

Technical requirements

  • Next.js (App Router preferred) or standard React
  • Tailwind CSS only. No custom CSS files unless needed for one specific animation
  • JavaScript, or TypeScript if you feel confident

Design rules

  • Background and base: Matte Black #0A0A0A and #121212 for depth
  • Primary accent: Emerald Green #047857 (emerald-700)
  • Highlights and buttons: Metallic Gold #D4AF37
  • Typography: clean, sans-serif, high contrast

Component features

  • Placeholder profile image, professional stock photo, 4:5 vertical crop
  • Name and job title
  • Two-sentence professional bio
  • Three core skills as minimal tags or badges
  • A primary Connect or View Profile button

Acceptance criteria

  • Responsive: flawless on mobile and desktop using Grid or Flexbox
  • Attention to detail: spacing, padding and alignment read as a luxury corporate asset
  • Code quality: organised Tailwind classes and a modular component, not one block of HTML

Submission

  • Initialise a Git repository
  • Commit with clear conventional messages, e.g. feat: implement executive profile card layout
  • Push to a public GitHub repository
  • Submit the repository link below before the end of the day