🚀 Linear Homepage Clone: "We Cloned Linear Homepage So You Don't Have To"

A pixel-perfect, butter-smooth clone of the Linear homepage that's so good, you might forget which one is the original.

Built with modern web wizardry including Astro, TypeScript, Framer Motion, and enough Tailwind classes to make your CSS-in-JS friends jealous.

---

🎭 What Makes This Special?

"It's Linear, but with more personality" ✨

We've reverse-engineered Linear's gorgeous UI and added our own secret sauce of smooth animations, responsive design, and clean code that would make Marie Kondo proud. This isn't just another clone—it's a love letter to modern web development.

🧰 The Arsenal (Tech Stack)

Technology	Why We Chose It	Coolness Factor
Astro	Because who needs JavaScript when you don't need it?	🚀 Blazingly Fast
React + TypeScript	For when you want your components to be both interactive AND type-safe	🛡️ Bug-Proof
Tailwind CSS	class="flex items-center justify-center h-screen" says it all	💨 Utility Paradise
Framer Motion	Making things move beautifully since... well, recently	🎬 Hollywood-Level Animations

Power-Ups:

• clsx - For when your className logic gets complicated 🤹
• tailwind-merge - Preventing CSS class conflicts like a diplomatic peacekeeper 🕊️

---

🎪 Features That'll Make You Go "Wow!"

• 📱 Responsive AF: Works on everything from your smartwatch to your smart fridge

• 🎭 Framer Motion Magic: Animations so smooth, they're basically illegal in 12 countries

• 📲 Mobile-First Mindset: Because 70% of your users are probably reading this on their phone right now

• 🎨 Linear-Style Components:

  • Hero section with text that dances into view
  • Interactive cards that respond to your every hover
  • A card stack that defies the laws of CSS physics
  • Customer logos arranged in perfect harmony
  • Sidebar that's more feature-packed than a Swiss Army knife
  • Navigation that navigates better than GPS
  • Footer that actually makes you want to scroll down

• 🎬 Cinematic Experience: Background videos that don't make your CPU cry

---

🏃‍♂️ Quick Start (Or: "How to Get This Thing Running")

Prerequisites (The Boring Stuff)

# You'll need these installed, or nothing will work:
Node.js 18.x+ (because we're not savages)
npm 8.x+ or yarn (whatever floats your boat)

Installation (The Fun Part)

1. Grab the code:

# Clone this masterpiece
git clone https://github.com/muzzammil022/linear-clone.git

# Enter the matrix
cd linear-clone

2. Install the magic:

# npm gang
npm install

# or if you're team yarn
yarn install

3. Fire it up:

# Start the development server
npm run dev

# Then visit http://localhost:4321 and prepare to be amazed

🏗️ Building for Production (Making It Official)

# Create a production-ready build
npm run build

# Preview your masterpiece
npm run preview

Pro tip: The production build is so optimized, it loads faster than you can blink.

---

🗂️ Project Architecture (Or: "Where Everything Lives")

linear-clone/
├── 📁 public/                  # Static goodies (videos, images)
│   ├── 🎥 TC.webm             # That smooth background video
│   ├── 🎥 b8.webm             # More video magic
│   └── ✨ ...more assets
├── 📁 src/
│   ├── 📁 assets/             # Future home of more static stuff
│   ├── 📁 components/         # React components that actually work
│   │   ├── 🃏 CardLayout.tsx   # Cards that flip and dance
│   │   ├── 📚 CardStack.tsx    # Stacking cards like a pro
│   │   └── 🎪 ...more magic
│   ├── 📁 layouts/            # The skeleton of our pages
│   │   ├── 🏗️ Layout.astro     # Master template
│   │   ├── 🚀 Landing.astro    # Homepage layout
│   │   └── 🧭 navbar.astro     # Navigation central
│   ├── 📁 pages/              # Where URLs become reality
│   │   └── 🏠 index.astro      # The main event
│   └── 📁 styles/             # Making things pretty
│       └── 🎨 global.css       # Global styling sauce
├── ⚙️ astro.config.mjs         # Astro's control panel
├── 📦 package.json             # Dependency manifest
├── 🔧 tsconfig.json           # TypeScript rulebook
└── 📖 README.md               # You are here!

---

🎯 Configuration Files (The Technical Stuff)

• astro.config.mjs - Where we tell Astro how to behave
• package.json - The grocery list of dependencies
• tsconfig.json - TypeScript's instruction manual
• src/styles/global.css - The global style headquarters

---

🤝 Contributing (Join the Fun!)

Found a bug? Want to add a feature? Think you can make our animations even smoother? We're all ears!

Just remember: With great pull requests comes great responsibility.

---

📜 License & Credits

Built with ❤️ and probably too much coffee by developers who care about the details.

Linear is a trademark of Linear Orbit, Inc. This project is an educational clone and is not affiliated with Linear.

---

⚡ Quick Stats:

• Lines of code that actually matter: Lots
• Bugs per feature: Approaching zero
• Developer happiness: Through the roof
• Time spent perfecting animations: Don't ask