🚀 TechConf 2026 - The Future of Innovation

A premium, high-performance landing page built with the cutting-edge Svelte 5, Tailwind CSS 4, Shadcn UI and Lucide Icons.

✨ Features

• 🎨 Modern Design: Beautiful, glassmorphic UI with a sophisticated dark/light theme system.
• ⚡ Supercharged Tech Stack: Built on Svelte 5 Runes for next-gen reactivity.
• 🌊 Fluid Animations: Powered by motion-svelte and svelte-particles for an immersive experience.
• 📱 Fully Responsive: Optimized for all devices, from mobile phones to 4K desktops.
• 🌗 Mode Watcher: Seamless dark mode toggling with persisted user preference.
• 🛠️ Robust Components: Reusable UI components based on bits-ui and shadcn-svelte.

🛠️ Tech Stack

Core Framework

Styling & UI

Animation & Effects

🚀 Getting Started

Follow these steps to get the project up and running locally.

Prerequisites

• Node.js 20+
• npm

Installation

1. Clone the repository

   git clone https://github.com/JonniTech/TechConf-LandingPage.git
   cd TechConf-LandingPage
   

2. Install Dependencies

   npm install
   

3. Start Development Server

   npm run dev
   

4. Build for Production

   npm run build
   

🧩 Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── sections/       # Hero, Features, Speakers, etc.
│   │   ├── ui/             # Reusable Shadcn components (Button, Card, Sheet...)
│   │   ├── Navbar.svelte   # Responsive Navigation
│   │   ├── ScrollToTop.svelte # Floating Action Button
│   │   └── ThemeToggle.svelte # Dark Mode Switcher
│   └── utils.ts
├── routes/
│   ├── +page.svelte        # Main Landing Page
│   └── +layout.svelte      # Global Layout (Providers)
└── app.css                 # Global Tailwind Directives

💎 Premium Features Implemented

📱 Premium Mobile Navigation

A custom-built side drawer using the Sheet component, featuring:

• Glassmorphism: Backdrop blur effects.
• Micro-interactions: Subtle hover states and smooth transitions.
• Smart State: Automatically closes on navigation.

📜 Scroll Reveal System

A custom intersection-observer based system that reveals content as you scroll:

• Zero Layout Shift: Fixed geometry prevents jank.
• Fail-Safe: Content defaults to visible ensuring accessibility even if JS fails.
• Performance: Optimized for 60fps scrolling.

🔄 Dynamic "Scroll to Top"

A floating action button that politely appears only when you need it:

• Threshold Detection: Appears after 300px scroll.
• Pulse Animation: Subtle attention-grabbing effect on hover.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.