X.com Mock — Websites in Container

A faithful recreation of X.com's desktop interface showcasing a concept feature: hosting static websites directly inside post media containers.

✨ The Concept

This project demonstrates how X (formerly Twitter) could host entire static websites within the media container of posts. Instead of linking out to external sites, users can scroll through and interact with full websites directly in their feed.

Demo features:

• A main feed post containing an embedded SpaceX Lunar Voyager landing page
• Full scroll and interaction within the iframe container
• Seamless integration with the native X UI

🚀 Features

• Pixel-Perfect UI: Faithful recreation of X's desktop interface
• Interactive Website Container: iframe within post media allows embedded sites to be scrolled independently
• Static Site Demo: SpaceX Lunar Voyager product announcement as embedded content
• Light Mode Design: Clean, modern theme matching X's current design

📁 Project Structure

src/
├── app/
│   ├── page.tsx              # Main layout
│   ├── globals.css           # Global styles
│   └── embedded-site/
│       └── page.tsx          # The embedded static website
├── components/
│   ├── Sidebar.tsx           # Navigation sidebar
│   ├── Feed.tsx              # Main timeline with posts
│   ├── Post.tsx              # Post component with verified badges
│   ├── RightSidebar.tsx      # Search, trending, suggestions
│   └── WebsiteContainer.tsx  # iframe container for embedded sites

🛠️ Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Open http://localhost:3000 to view the app.

🌐 Deploy on Vercel

Or deploy via CLI:

npm i -g vercel
vercel

📄 License

MIT