Micro-Vision Computers: Architect Landing Page

High-performance landing page for Micro-Vision Computers' Architect Performance Assurance Package.

Getting Started

1. Clone this repository
2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open http://localhost:3000 in your browser

Troubleshooting

If styles are not loading properly:

1. Clear the Next.js cache

   rm -rf .next
   # Or on Windows
   rmdir /s /q .next

2. Restart the development server with a clean slate

   npm run dev -- --turbo

3. Check for CSS class conflicts

   • Make sure you're using the proper Tailwind classes
   • Verify @layer components is being used for custom classes

4. Check browser console for errors

   • Look for any JavaScript or CSS loading errors

Deploying to Vercel

Step 1: Push to GitHub

1. Create a new repository on GitHub
2. Initialize git in your local project:

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/architect-landing-page.git
   git push -u origin main

Step 2: Connect to Vercel

1. Go to Vercel and sign up or log in
2. Click "New Project"
3. Import your GitHub repository
4. Configure the project (defaults should work fine)
5. Click "Deploy"

Customizing the Landing Page

Images

To maintain optimal page speed, replace the placeholder images in /public/images/ with properly optimized images:

• logo.svg - Micro-Vision logo
• logo-white.svg - White version for dark backgrounds
• hero-image.webp - Main hero image (workstation for architects)
• case-study-preview.webp - Case study visual

Brand Colors

The current brand colors are:

• Primary Color: #479AD5 (Blue Lotus)
• Accent Color: #46A4DC (Sky Accent)
• Secondary Color: #607E8C (Slate Gray)
• Complementary Color: #1A1C17 (Deep Forest)

You can adjust these in the tailwind.config.js file.

Brand Fonts

The page uses Poppins (loaded via Google Fonts) for body text. Custom fonts can be added in the /public/fonts/ directory and referenced in globals.css.

Adding the Full Page Components

We've created a simplified test page. To add all components:

1. Uncomment the imports in src/app/page.js
2. Add each component to the main section in the same file
3. Make sure all images are available in the public directory