Sprintos

Printos Website

Welcome to the central hub for the Printos website codebase! This document provides a high-level overview of what this project is, the tools we use to build it, and how to get it running on your own computer.

🦅 Bird’s Eye View: What is this project?

This repository contains all the code that powers the Printos website (printos.co.in). It’s a modern, fast, and highly interactive web application designed to showcase our products, which includes custome apparels, gifts, packaging, among others.

Key features of this website include:

3D Animations: An interactive top banner (the “Hero” section) featuring engaging 3D graphics.
Smooth Scrolling Effects: Elements like printers and paper that elegantly animate into view as you scroll down the page.
Dynamic Product Showcases: Beautifully styled sections for “Best Sellers”, “Popular Categories”, and “Shop By Business Needs” to guide users to exactly what they are looking for.

Think of this project as a digital storefront that not only looks great but is built to be fast, reliable, and easy for our customers to use.

📚 The Toolbox: What did we use to build this?

We used a combination of powerful, modern web technologies to create this experience. If you’re a non-developer, think of these as the different materials (wood, metal, paint) used to construct and decorate a house:

Next.js & React: The core foundation of our website. React helps us build the user interface (the buttons, text, and images), while Next.js stitches it all together to make the site incredibly fast and search-engine friendly.
Tailwind CSS & DaisyUI: Our styling system. These tools allow us to quickly “paint” our website with beautiful layouts, colors, and modern components without having to write complex rules from scratch.
Three.js & React Three Fiber: The magic behind the 3D graphics on our site. They allow us to render interactive 3D models right inside the web browser without requiring users to download any special software.
GSAP (GreenSock): The animation engine that powers our ultra-smooth scrolling effects. It’s the industry standard for creating premium web animations.
Swiper: The tool we use to create nice, swipeable carousels (image sliders) for sections like our Customer Testimonials.
Material Design Icons: A massive library of high-quality icons used throughout the site for buttons and visual cues.

🛠️ Helpful Commands (For Developers)

If you are a developer looking to run, edit, or test this project on your machine, here is a quick guide.

Prerequisites

Make sure you have Node.js installed on your computer.

Standard Workflow

Install dependencies: Before running the site for the first time (or after receiving new updates from other team members), you need to download all the necessary tools mentioned above.
```
npm install
```
Start the Development Server: This command runs a local version of the website on your computer so you can see your changes live.
```
npm run dev
```
After running this, open http://localhost:3000 in your web browser. The page will automatically update whenever you save a change to the code!
Check for Code Errors (Linting): To automatically scan the code for any styling or syntax formatting consistency issues:
```
npm run lint
```
Build for Production: When the website is ready to be published to the real world, this command packages and optimizes everything for maximum speed and performance.
```
npm run build
```
Test the Production Build: To see exactly how the site will behave when it’s live (you must run the build command first):
```
npm run start
```

This README is designed to be a living document. As the project evolves, please feel free to update it to keep everyone on the same page!