🌐 InfiniteCS Website

Enterprise BPO landing page for Infinite Contact Solutions LLC

A modern, animation-rich marketing site with glassmorphism design, GSAP scroll effects, and a conversion-focused layout.

---

✨ Features

🎨 Design System

• Glassmorphism — backdrop-blur cards with translucent borders
• Responsive layout — fluid grids from mobile to ultrawide
• Custom design tokens — centralized CSS variables for colors, radii, shadows
• Inter + Playfair Display typography pairing

🎬 Animations

• Loading screen — branded loader with progress bar
• GSAP ScrollTrigger — staggered reveals on scroll for all sections
• Hero entrance — sequenced fade-in with badge, heading, subtitle, buttons, and stats
• Animated counters — numbers count up when scrolled into view
• SVG ring charts — smooth stroke-dashoffset transitions
• Marquee scroller — infinite horizontal text loop
• Blob background — organic morphing shapes behind the hero

📊 Sections

Section	Description
Hero	Centered headline, animated stats bar, dual CTA buttons
Marquee	Infinite text scroll with gradient typography
About	Layered glass cards with company info and value props
Impact	Metric cards with mini bar charts, ring chart, before/after comparison
Services	3-card grid with hover blobs and icon scaling
Strategy	4-step numbered process on dark background with glowing orbs
Global Ops	Live operation status with animated counters and location cards
Contact	Dual-column layout with form and company details
Footer	3-column link grid with brand

⚡ Performance

• No frameworks — pure HTML, CSS, JS (8 KB gzipped JS)
• CDN-only dependencies — GSAP, Lucide, Google Fonts
• Vite build — optimized production bundle

---

🚀 Quick Start

git clone https://github.com/hatimhtm/InfiniteCS-Website.git
cd InfiniteCS-Website
npm install
npm run dev

Open http://localhost:5173.

Production Build

npm run build
npm run preview

---

📁 Project Structure

InfiniteCS-Website/
├── index.html                # Single-page entry point
├── package.json              # Dependencies & scripts
├── vite.config.js            # Build config
└── src/
    ├── main.js               # GSAP animations, loader, nav, counters
    └── styles/
        ├── variables.css     # Design tokens & resets
        ├── layout.css        # Grid, cards, buttons, typography
        ├── nav.css           # Glassmorphism navbar + mobile menu
        ├── hero.css          # Hero section, stats bar, marquee
        ├── sections.css      # About, Impact, Services, Strategy, Global, Footer
        ├── contact.css       # Contact form & details
        └── animations.css    # Loader, keyframes, GSAP targets

---

🔧 Customization

Branding

Edit src/styles/variables.css to change the color palette, fonts, and spacing tokens.

Content

All content is in index.html — modify text, add sections, or update contact details directly.

Contact Form

Replace yourformid in the form's action attribute with your Formspree endpoint to enable submissions.

---

📄 License

MIT — free for personal and commercial use.

---

_{Infinite Contact Solutions LLC — Carrollton, Texas}