Lumistra

A modern company site with a premium glassmorphism feel.

Lumistra is a modern company website for Lumistra Labs, designed to present the brand, team, projects, milestones, and social presence in a polished dark and light glassmorphism UI. It is aimed at prospective clients, partners, and talent who need a fast, credible first impression and a simple path to explore the company.

Business Goals

  • Increase qualified inquiry submissions by 25% within 90 days of launch.
  • Improve homepage-to-contact engagement rate to 12%+ within 60 days.
  • Raise average session duration to 1:45 or more within 45 days through richer storytelling and project content.
  • Achieve 95% mobile usability scores and reduce bounce rate by 15% within the first 8 weeks.
  • Support a consistent brand presence across web and social channels with 100% centralized content updates from one admin source.

User Goals

  • Understand what Lumistra Labs does within 10 seconds of landing.
  • Explore company projects and services without friction.
  • See the team behind the company and build trust quickly.
  • Find social links and contact paths in one click from any page.
  • Experience a visually modern site that works well in both dark and light mode.

Non-Goals

  • No client portal or authenticated dashboard in the first release.
  • No ecommerce, checkout, or payment flows.
  • No CMS-driven blog or article publishing system in MVP.
  • No complex animation-heavy 3D experiences that compromise performance.

Prospective Client Nina, 34 - Nina is evaluating agencies and studios for a digital product engagement. She wants to quickly assess credibility, style, and fit before reaching out.

Prospective Client Nina, 34

  • As a prospective client, I want to see the company overview and projects quickly, so that I can decide whether to contact Lumistra Labs.
  • As a prospective client, I want a clear social and footer link structure, so that I can verify the company’s online presence.
  • As a prospective client, I want the site to feel premium and modern, so that it reflects the quality I expect from the team.

Potential Hire Dimas, 27 - Dimas is a designer or developer exploring whether Lumistra Labs is a place he would like to work with or join. He wants to learn about the people and culture fast.

Potential Hire Dimas, 27

  • As a potential hire, I want to view the management and staff profiles, so that I can understand the team structure and credibility.
  • As a potential hire, I want to see the company journey and milestones, so that I can judge growth and momentum.
  • As a potential hire, I want the site to be easy to navigate on mobile, so that I can browse it during a commute.

Returning Visitor Rani, 41 - Rani has visited before and now wants specific proof points such as projects, milestones, and social links. She expects fast access and consistent branding.

Returning Visitor Rani, 41

  • As a returning visitor, I want dock navigation always available, so that I can jump between sections instantly.
  • As a returning visitor, I want the copyright year to update automatically, so that the site stays current without manual edits.
  • As a returning visitor, I want the site to remember theme preference, so that I do not need to switch between dark and light mode every visit.

Brand Hero Section · High priority

  • The landing section must create an immediate premium first impression with a centered logo/image, title, and concise description.
  • Display a large centered icon or logo image above the hero title.
  • Support a primary CTA such as Contact Us and a secondary CTA such as View Projects.
  • Use responsive typography and spacing so the hero remains balanced on mobile and desktop.
  • Load the hero image in optimized formats with fallback alt text.
  • Include subtle glassmorphism layering and ambient background effects without hurting readability.

Section-Based Company Storytelling · High priority

  • The site must present key company information in clear, scrollable sections: About Us, Our Projects, Our Managements, Our Milestones, and Our Socials.
  • Each section should be accessible from dock navigation and anchor links.
  • Projects should show project name, short description, visual preview, and status if available.
  • Managements should display staff cards with portrait images, role titles, and short bios.
  • Milestones should show a chronological journey with dates or years and key achievements.
  • Social section should include branded icons linking to external channels.

Dock Navigation · High priority

  • Navigation should be implemented as a bottom dock-style control using icon buttons, not a top navbar, to create a distinctive modern UX.
  • Dock must stay fixed near the bottom on desktop and mobile with safe-area spacing.
  • Icons should include clear labels or accessible titles for screen readers.
  • Active section state should be visible as the user scrolls or taps anchors.
  • Dock should collapse gracefully on very small screens without blocking content.
  • Navigation must support keyboard focus and full tab order.

Theme and Visual System · Medium priority

  • The UI must support both dark and light glassmorphism themes with consistent tokens, shadows, blur, and contrast rules.
  • Provide a theme toggle persisted in local storage.
  • Maintain WCAG AA contrast for text and interactive elements in both modes.
  • Use consistent glass cards, borders, blur, and elevation across sections.
  • Ensure images, icons, and overlays adapt cleanly to both themes.
  • Use motion sparingly and respect reduced-motion preferences.

Footer and Site Metadata · Medium priority

  • The footer must provide useful site-level information and remain current automatically.
  • Show social icons, short company description, and quick links to core sections.
  • Display the line Built with heart by Lumistra Labs under the footer description.
  • Render the copyright year automatically from the current year.
  • Include legal text placeholders if needed for privacy or terms.
  • Keep footer content responsive and readable across all screen sizes.

First Visit Experience

  • Land on a striking hero with centered logo, title, and description in under 2 seconds.
  • See clear dock navigation at the bottom with icons for each section.
  • Scroll or tap to explore About Us, Projects, Managements, Milestones, and Socials.
  • Switch between dark and light themes with one tap if desired.
  • Reach a meaningful company overview within 30 seconds and a contact or social path within 45 seconds.

1. Hero First Impression

  • The user immediately sees the Lumistra Labs identity and value proposition.
  • Use a prominent centered logo/image with supporting headline and concise copy.
  • Show one primary CTA and one secondary CTA for easy next action.
  • If the image fails to load, show a branded fallback mark and preserve layout.

2. About the Company

  • The About Us section explains what the company does and what it stands for.
  • Use short paragraphs or cards rather than dense text blocks.
  • Highlight company focus, strengths, and approach in a scannable format.
  • If content is not available, show a graceful placeholder instead of empty space.

3. Explore Work and Team

  • Users browse projects and management staff to assess capability and trust.
  • Project cards should open detail modals or expandable panels if deeper info exists.
  • Team cards should show photo, name, role, and brief bio.
  • Images should lazy-load and maintain consistent aspect ratios to avoid layout shift.

4. See Progress and Journey

  • The milestones section communicates growth, credibility, and timeline.
  • Present milestones as a vertical or horizontal journey depending on screen size.
  • Include dates, achievement summaries, and notable moments.
  • Handle missing years or duplicate entries with validation rules in the content model.

5. Connect via Socials and Footer

  • The user finds social channels and footer links as the final trust and conversion layer.
  • Display external links with recognizable icons and hover/focus states.
  • Show quick links to the main sections and branding line in the footer.
  • Keep external links opening in a new tab with safe rel attributes.

Advanced Experience Options

  • Persistent theme preference stored locally and synced on load.
  • Scroll-spy behavior that highlights the current dock icon automatically.
  • Optional reduced-motion mode for users sensitive to animations.
  • Section deep-linking so each block can be shared via URL anchor.
  • Mobile dock adaptation with larger tap targets and gesture-safe spacing.

Visual and Accessibility Principles

  • Glassmorphism cards should use blur, transparency, and layered gradients without sacrificing legibility.
  • Support dark and light modes with semantic color tokens instead of hard-coded colors.
  • Maintain keyboard accessibility, visible focus states, and screen-reader labels for every icon button.
  • Keep image loading performant using modern formats, lazy loading, and responsive sizes.
  • Use subtle motion only for transitions and respect prefers-reduced-motion.

Rani lands on the Lumistra Labs homepage and immediately sees a polished glassmorphism hero with a centered logo, a crisp value statement, and a bottom dock that feels modern and distinctive. In a few taps she moves from About Us to Projects, then to the team section, gaining a fast sense of professionalism and technical capability.

By the time she reaches Milestones and Socials, she has enough confidence to follow the contact path or check the company’s external profiles. The site turns a casual first visit into a credibility-building experience, helping Lumistra Labs convert attention into inquiries and partnerships without needing a sales conversation first.

User-Centric Metrics

  • 70% of visitors scroll past the hero into at least one deeper section.
  • Average time to first meaningful interaction under 10 seconds.
  • At least 60% of users can reach Projects or Managements within 2 clicks.
  • Theme toggle usage above 15% indicates users notice and value the visual mode switch.
  • Mobile bounce rate below 40% within 60 days.

Business Metrics

  • 25% increase in contact or inquiry clicks within 90 days.
  • 12%+ homepage engagement rate from visits to project or team sections within 60 days.
  • 30% growth in social profile referrals from the website within 90 days.
  • At least 20% of repeat visitors return within 30 days.
  • Reduce content update turnaround time to under 10 minutes through a simple content structure.

Technical Metrics

  • 99.9% uptime monthly.
  • First contentful paint under 1.8 seconds on broadband and under 3.0 seconds on 4G.
  • Interaction latency for dock navigation under 100 ms.
  • Zero critical accessibility blockers in production audit.

Tracking Plan

  • Track page_view for homepage and section anchor views.
  • Track dock_icon_click with section name and device type.
  • Track theme_toggle with selected mode and persistence status.
  • Track project_card_open with project identifier.
  • Track staff_card_view with position and scroll depth.
  • Track outbound_social_click with destination network.
  • Track footer_cta_click for contact or quick link actions.

Technical Needs

  • Next.js with App Router for fast SSR and static generation.
  • Tailwind CSS or equivalent design system for glassmorphism tokens and responsive layout.
  • Framer Motion or CSS-based micro-interactions with reduced-motion support.
  • Image optimization using next/image and properly sized assets.
  • Local storage theme persistence with hydration-safe initialization.
  • Accessible icon system such as Lucide React or React Icons.
  • Content modeled as JSON, MDX, or a lightweight headless CMS schema.

Integration Points

  • Google Analytics 4 for event tracking.
  • Vercel for deployment and edge hosting.
  • Resend or Formspree if a future contact form is added.
  • Cloudinary or another image CDN for staff and project assets.
  • GitHub for source control and preview deployments.

Data Storage & Privacy

  • Store only minimal public-facing content and avoid collecting personal data in MVP.
  • If analytics are enabled, disclose cookie or tracking usage in a privacy notice.
  • Use alt text and consent-aware handling for any staff photos or external media.
  • Ensure outbound social links open safely without leaking sensitive referrer data when possible.
  • Prepare the site structure to support GDPR and CCPA compliant disclosures if contact forms are introduced later.

Scalability & Performance

  • Use static generation for most sections so the site loads quickly and cheaply.
  • Lazy-load images below the fold and defer non-critical animations.
  • Keep dock navigation lightweight because it is persistent across the site.
  • Serve optimized assets from a CDN and limit bundle size through code splitting.

Potential Challenges

  • Glassmorphism can reduce text readability; mitigate with strict contrast tokens, layered overlays, and AA testing.
  • Bottom dock may overlap content on mobile; mitigate with safe-area padding and reserved bottom space.
  • Large images can hurt performance; mitigate with responsive sizes, compression, and lazy loading.
  • Content may become stale if hard-coded; mitigate with a simple content schema or lightweight CMS.
  • Theme implementation can cause hydration mismatches; mitigate with server-safe defaults and client-only preference sync.

Team & resourcing - Small team - 2 front-end engineers, 1 designer, part-time PM/content owner.

Phase 1: MVP Shell · Weeks 1-2

  • Homepage layout with hero, about, projects, managements, milestones, socials, and footer sections.
  • Bottom dock navigation with icons and anchor scrolling.
  • Dark and light theme support with persisted preference.
  • Responsive glassmorphism design system and basic accessibility pass.

Phase 2: Content System · Weeks 3-4

  • Structured content model for projects, staff, milestones, and social links.
  • Image handling, alt text support, and fallback states.
  • Auto-updating copyright year and branded footer content.
  • Analytics instrumentation for key interactions.

Phase 3: Polish and QA · Weeks 5-6

  • Scroll-spy active states and refined motion micro-interactions.
  • Performance optimization to meet core web vitals targets.
  • Cross-device QA for desktop, tablet, and mobile browsers.
  • Accessibility fixes for keyboard navigation, focus states, and contrast.

Phase 4: Launch and Iteration · Weeks 7-8

  • Production launch on Vercel with monitoring and error logging.
  • Content review workflow for future updates.
  • Post-launch analytics review and conversion tuning.
  • Optional future-ready hooks for contact form or CMS expansion.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a modern company website for Lumistra Labs using Next.js 14 App Router, TypeScript, Tailwind CSS, and Framer Motion. The design must use a premium glassmorphism aesthetic with both dark and light themes, smooth but subtle motion, and strong accessibility.

Core pages/sections on one landing page:
1. Hero section with a large centered logo/image, company title, short description, and CTA buttons
2. About Us section
3. Our Projects section with project cards
4. Our Managements section with staff cards and images
5. Our Milestones section as a journey/timeline
6. Our Socials section with social icon links
7. Footer with social icons, short company description, quick links, the line “Built with heart by Lumistra Labs”, and an auto-updating copyright year

Navigation requirements:
Implement a bottom dock-style navbar using icon buttons, inspired by a dock component like reactbits.dev/components/dock. It should be fixed near the bottom, mobile-friendly, keyboard accessible, show active section state, and scroll smoothly to each section.

Data model:
Use a simple typed content structure for hero, about, projects, staff, milestones, socials, and footer links. Projects should include title, description, image, and optional status. Staff should include name, role, bio, and image. Milestones should include year/date and description. Social links should include platform, url, and icon.

UX requirements:
- Support theme toggle with localStorage persistence
- Respect prefers-reduced-motion
- Use optimized images with lazy loading and responsive sizes
- Maintain WCAG AA contrast in both themes
- Add scroll-spy highlighting for the dock
- Add section anchor ids for deep linking

Implementation details:
- Create reusable components for Hero, SectionHeading, ProjectCard, StaffCard, TimelineItem, SocialLink, DockNav, Footer, and ThemeToggle
- Use semantic HTML and accessible labels for all icons and buttons
- Use a clean layout with responsive spacing for desktop and mobile
- Use placeholder content and realistic sample data for Lumistra Labs
- Include auto-generated copyright year from new Date().getFullYear()

Default stack:
Next.js App Router, TypeScript, Tailwind CSS, Framer Motion, Lucide React icons, next/image, and Vercel deployment. Make the code production-ready, modular, and easy to replace placeholder content with a CMS later.

Business Idea

sebuah website company bernama "Lumistra Labs" dengan ui/ux modern tema Glassmorphism dark dan terang. berikut isi/fitur : 1. hero title dan deskripsi dengan icon/logo image besar di tengah 2. about us 3. our projects 4. our managements (staffs) dengan gambar 5. our milestones (journey) 6. our socials 7. footer dengan icon socials, deskripsi, quick links, dibawah deskripsi (Built with ❤️ by Lumistra Labs), copyright dengan tahun otomatis ganti 8. navbar berbentuk dock/tombol icon dibawah bukan diatas (https://www.reactbits.dev/components/dock)

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company