🚀 Zero Theorem - Next.js Portfolio & Agency Template

Welcome to Zero Theorem! This is a beautifully designed, production-ready starter template for modern digital agencies, studios, and freelancers. It's built with the best of the modern web: Next.js, TypeScript, Tailwind CSS, and ShadCN UI, and brought to life with silky-smooth animations powered by GSAP.

We've poured our passion for clean code and elegant design into this project, and we're thrilled to share it with the community. Our goal is to give you a massive head-start in building a stunning, high-performance website.

---

✨ Core Features

• Stunning Animations: Fluid, professional animations using GSAP that engage and delight users.
• Fully Responsive: Meticulously crafted to look and work beautifully on all devices, from mobile phones to 4K displays.
• Component-Based Architecture: Built with reusable and customizable React components.
• Dynamic Content: Easily update services, portfolio items, testimonials, and blog posts.
• Dark & Light Mode: A sleek, modern dark mode is the default, with support for light mode via next-themes.
• Optimized for Performance: Built with Next.js App Router, Server Components, and image optimization for blazing-fast load times.
• SEO-Ready: Best practices for SEO are baked in to help you get discovered.

---

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: ShadCN UI
• Animations: GSAP
• Form Handling: React Hook Form & Zod
• Icons: Lucide React

---

🚀 Getting Started

Getting this project up and running on your local machine is a breeze.

1. Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/abbeyzerotheorem/0-theorem.git
cd 0-theorem

2. Install Dependencies

We use npm to manage our packages. Run the following command to install all the necessary dependencies:

npm install

3. Set Up Environment Variables

The contact form uses Web3Forms. To get it working, you'll need to provide your own access key.

Create a new file named .env.local in the root of your project and add your key:

# Get your free access key from https://web3forms.com/
NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=YOUR_ACCESS_KEY_HERE

Note: I've updated the contact form to use this environment variable for you.

4. Run the Development Server

You're all set! Start the development server with:

npm run dev

Open http://localhost:9002 in your browser to see the result. You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.

---

📂 Project Structure

The project follows a standard Next.js App Router structure, designed for clarity and scalability.

/
├── public/         # Static assets (images, fonts, favicons)
├── src/
│   ├── app/        # All pages and routes
│   ├── components/ # Reusable React components (UI, layout, sections)
│   ├── lib/        # Helper functions and utilities (cn, placeholder-images)
│   └── hooks/      # Custom React hooks
├── tailwind.config.ts # Tailwind CSS configuration
└── next.config.ts     # Next.js configuration

---

🤝 Contributing

We built Zero Theorem to be a community-driven project, and we welcome contributions of all kinds! Whether you're fixing a bug, improving a feature, or suggesting a new idea, your help is greatly appreciated.

• Found a Bug? Open an issue and let us know.
• Have an Idea? We'd love to hear it! Start a discussion.
• Want to Contribute Code? Fork the repository and submit a pull request.

🎯 What's Next?

• Customize the content in the component files to make it your own
• Update the color scheme in tailwind.config.ts
• Deploy to Vercel with one click:

💫 From Our Studio to Yours

We can't wait to see what incredible experiences you'll build with Zero Theorem. Tag us on Twitter or show us your creations, we'd love to feature them

---

Built with ❤️ by Abiodun (Abbey) Aina