next-microsoft

A Microsoft-style marketing site built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS v4 — expanded from a single static page into a 10-page site.

Getting started

npm install
npm run dev

Then open http://localhost:3000.

Production build:

npm run build
npm start

Lint:

npm run lint

Node.js 18.18+ is required (Node 20+ recommended).

Pages (10 total)

Route	Purpose
/	Home — hero, product cards, Xbox + sustainability banners
/office	Word, Excel, PowerPoint, Teams
/windows	Windows 11 Home/Pro, business, accessories
/surface	Surface Pro 7, Laptop 3, Pro X, accessories
/xbox	Consoles, Game Pass, controllers, Xbox Live Gold
/deals	Rotating device and subscription deals
/support	Orders, account & billing, devices, software help
/education	Devices, Microsoft 365, Teams, and Minecraft for schools
/enterprise	Azure, Microsoft 365 Enterprise, security, Power Platform
/company	Mission, careers, newsroom, sustainability

All 10 pages share the same header/footer chrome (app/layout.tsx) and are reachable from the top nav (Office, Windows, Surface, Xbox, Deals, Support) and the footer (Education, Enterprise, Company link through their column headings; Home is the logo).

Project structure

app/
  layout.tsx        # Shared chrome: Navbar, page content, LinksSection, Footer
  globals.css       # Tailwind entry point + design tokens (@theme) + preserved base rules
  page.tsx          # Home page
  office/page.tsx   # ...and 8 more page.tsx routes, one per page above
components/
  Navbar/           # Top navigation + logo
  PageHero/         # Reusable hero banner (title, copy, CTA, background image)
  ContentPage/      # Hero + card-grid template used by all 9 non-home pages
  Card/              # Single reusable product card
  HomeCards/        # Responsive grid wrapper rendering a list of Card components
  PromoBanner/      # Shared component for the Xbox Game Pass + Carbon-negative banners
  FollowSection/    # Social icon row
  LinksSection/     # Six-column footer link grid
  Footer/           # Bottom locale/legal bar
  ui/Button/        # Shared button/link element (dark + light variants)
constants/          # All copy/content as typed data — navLinks, homeCards, banners,
                    # footerLinks, and pages.ts (hero + cards for the 9 new pages)
types/              # Shared TypeScript interfaces for the content above
public/img/         # All original images/icons (a few renamed to remove spaces)

Every page's copy lives in constants/*.ts, typed via types/*.ts — adding an 11th page means adding one object to constants/pages.ts and one page.tsx that renders <ContentPage data={...} />.

Styling: Tailwind CSS v4

Styling was converted from CSS Modules to Tailwind utility classes:

• app/globals.css imports Tailwind (@import "tailwindcss";) and defines the site's design tokens in an @theme block: --color-ms-dark (#262626), --color-ms-blue (#0067b8), --color-ms-gray (#f2f2f2), --color-ms-gray-text (#616161), used throughout as bg-ms-dark, text-ms-blue, etc.
• Responsive behavior uses Tailwind's arbitrary breakpoints (max-[700px]:..., max-[500px]:...) to match the original site's exact 700px/500px media queries rather than Tailwind's default breakpoint scale, so the responsive behavior stays pixel-accurate.
• No tailwind.config.ts is needed — Tailwind v4 auto-detects template files and reads tokens straight from the @theme block in globals.css.

What was preserved from the original static page

The home page keeps the original copy verbatim, typos included ("Selct Surfaceare", "desgin", "battrey", "Micrisoft Edge", "Enterprice", "Falllow Microsoft", etc.), along with one deliberate CSS quirk:

• The original stylesheet's .content h2,p { color:#fff; margin-top:10px; } rule is a comma-separated selector list — .content h2 and a bare p. That unintentionally applies white text + a 10px top margin to every paragraph on the page unless something more specific overrides it. That rule is preserved in app/globals.css's @layer base, and overridden with text-black utility classes exactly where the original CSS did the same (card descriptions, the "Falllow Microsoft" label) — the footer's "English(United States)" line is left un-overridden, matching the original's own (accidental) white-on-light-gray rendering.

The 9 new pages are original content written for this rebuild, so they don't carry this quirk forward — their card copy uses normal black text throughout and real alt text on images (the home page's original images intentionally keep their original empty alt="" attributes for fidelity).

Notes on specific decisions

• Images: reused from the original img/ folder across the new pages (there are no new source assets), matched thematically to each new topic. A few original filenames with spaces were renamed with hyphens for URL/path safety (game pass.jpg → game-pass.jpg, etc.) — a filesystem/reference change only, no visual effect.
• next/image is used for all <img> elements (logo, card thumbnails, social icons); the three full-bleed section backgrounds (home hero, Xbox banner, carbon banner, and each new page's hero) stay plain CSS background images via Tailwind's bg-cover bg-center bg-no-repeat plus an inline backgroundImage style, since next/image isn't a fit for CSS backgrounds.
• Fonts: Segoe UI (with Tahoma/Geneva/Verdana fallbacks) is declared as the --font-sans token — it's a system font, not a distributable web font, so there's no file for next/font to optimize.
• Navigation: the top nav's 6 links (Office, Windows, Surface, Xbox, Deals, Support) and 3 footer column headings (Education, Enterprise, Company) now route to real pages instead of # placeholders. Every other footer link remains an unimplemented # placeholder, matching the original site (which had no working links at all).

Known limitations

There's no live commerce, search, or account backend — every "LEARN MORE" / "SHOP NOW" / "JOIN NOW" style link that isn't one of the 10 real routes above is a placeholder href="#", exactly as in the source static page.