🌌 NewTech Agency Suite

An ultra-premium, full-stack creative agency portfolio suite built for modern studios. Equipped with standard-defining interactive micro-animations, a flexible administrative control center, MERN core architecture, and elite visual interactions inspired by award-winning designs on Godly, Behance, and Dribbble.

---

⚡ Elite Micro-Interactions & Features

This suite features highly optimized, high-performance interactions built directly on the GPU to combine responsive scrolling with immersive, playful tactile feedback:

1. 🦠 Liquid Gooey Metaball Worm (Bottom CTA)

• GPU-Accelerated SVG Refraction: Combines 5 coordinate nodes inside a live SVG filter (feGaussianBlur + feColorMatrix) that melts and merges trailing circles into a single organic, liquid worm body.
• Plasma Shimmer & Motion: A real-time fractal noise generator (feTurbulence) vibrates the gooey edges with a shimmering energy state.
• Physics-Based Scale: Features velocity-based squash-and-stretch that elongates the trailing cells on swift mouse movement and relaxes into a breathing sine-wave pulse when idle.

2. 🔮 Localized 3D Spherical Lens Grid Warp

• Refraction Physics: Divides grid lines inside the interactive hover zone into 16 discrete segments, shifting coordinates away from the pointer using Euclidean distance quadratic falloff.
• magnifying bubble: Simulates a physical glass magnifying lens, creating a striking 3D convex warping grid that snaps instantly and fluidly back to flat coordinates on mouse exit.

3. 💎 Dribbble & Godly-Inspired Services Overhaul

• Aurora Mesh Glows: Adds a hidden, low-overhead radial ambient light emission (::after) at the bottom-right of the service cards, fading in smoothly on hover.
• Glass Squircle Icon Capsules: Replaces traditional circular icons with high-end squircle boundaries (border-radius: 24px) made of glass refracting gradients that rise, rotate 6deg, and scale up on user hover.
• Pill Capsule Links: Transforms raw text links into elegant physical pill buttons that dynamically fill with gradient color and float up into localized shadows.

🔄 4. Reversed elegant card borders

• Base State (Default): All cards have a clean, visible, elegant border (1.5px solid rgba(148, 163, 184, 0.15)) to frame the items beautifully.
• Active State (Hover/Focus): The card borders dissolve completely to transparent in a 0.3s transition as the cards translate upwards and dissolve into a premium floating shadow.

🖼️ 5. Immersive Portfolio Lightbox Track

• Renders using React Portals directly to the DOM root, bypassing parent container stacking contexts.
• Features a slide track layout with keyboard arrow-slide navigation (ArrowLeft / ArrowRight), escape close (Escape), and full scroll blocking.

---

🛠️ Technology Stack

Frontend (/frontend)

• Core: Next.js (App Router, dynamic page optimization)
• Animation: GSAP ScrollTrigger + @gsap/react (for smooth staggered reveals)
• Styles: Pure CSS Modules + global Tailwind CSS compatibility layers
• Portals: React Portals for seamless lightbox rendering

Backend (/backend)

• Core: Node.js + Express (Robust API services)
• Database: MongoDB via Mongoose ORM
• Uploads: Multi-format local image stream uploads (storing inside /uploads)
• Mail: Integrated SMTP service for inquiry routing

---

📂 Project Architecture

NewTech/
├── backend/                  # MERN API Server
│   ├── src/
│   │   ├── config/           # DB & Env configurations
│   │   ├── models/           # Mongoose schemas (SiteSettings, Inquiries, etc.)
│   │   ├── routes/           # Express endpoints
│   │   ├── seed/             # Default content seeding routines
│   │   └── server.js         # Entry point
│   └── package.json
├── frontend/                 # Next.js Application
│   ├── public/               # Static images & media
│   ├── src/
│   │   ├── app/              # Next.js App Router (pages & layout)
│   │   ├── components/       # Highly polished UI components
│   │   └── lib/              # API connections & alerts helper
│   └── package.json
├── shared/                   # Universal default data templates
└── scripts/                  # Multi-process boot scripts

---

🚀 Getting Started

1. Prerequisites

Ensure you have Node.js (v20+) and MongoDB installed and running locally.

2. Configuration

Copy the .env.example file located in the root directory to a new file named .env:

cp .env.example .env

Fill in the environment variables:

• DATABASE_URL: Your MongoDB connection string (e.g. mongodb://localhost:27017/newtech).
• JWT_SECRET: A secure key for admin user sessions.
• PORT: Port for the MERN server (default: 5000).

3. Installation

Install all client, server, and workspace dependencies from the root directory:

npm run setup

(Alternatively, run npm install inside /frontend and /backend separately).

4. Running the Application

Launch both the Next.js development server and the MERN API server in parallel:

npm run dev

• Frontend Site: http://localhost:3000
• MERN backend Server: http://localhost:5000
• Admin dashboard: http://localhost:3000/admin/login

(The database will seed default services, showcase projects, and setting templates automatically upon your first server boot if empty).

---

🔒 Admin dashboard Control

Access the complete dynamic configuration engine at http://localhost:3000/admin/login to manage:

1. Site Settings: Edit your agency brand name, description, social links, process steps, and upload site logos/favicons.
2. Services Grid: Add, delete, and manage services rendered.
3. Showcase Projects: Upload projects, enter descriptive case summaries, tags, client specifications, and add multiple image slideshow assets.
4. Client Inquiries: Instantly receive, review, and filter incoming contact forms.

---

📜 License

This project is licensed under the MIT License.