Site Breakdown

Project Overview

Technology Stack

  • React 18 with TypeScript
  • Vite for build tooling
  • Tailwind CSS for styling
  • shadcn/ui component library (Card, Button, Dialog, Drawer, Accordion, etc.)
  • React Router v6 for client-side routing
  • Lucide React for icons (NO emoji in the UI)
  • Supabase for backend (edge functions for partner auth, contact enquiries)
  • React Query (@tanstack/react-query) for data fetching
  • next-themes for theme provider (light mode default)

Application Architecture

  • App.tsx: defines all routes using React Router
  • Index.tsx: wraps AppLayout in AppProvider context
  • AppLayout.tsx: homepage layout composing: Header, HeroSection, SolutionPillars, FeaturedVendors, WhyCloudReady, PartnerTestimonials, DualPathSection, Footer, plus modals (PartnerModal, EnquiryModal, VendorDrawer)

Contexts:

  • AuthContext.tsx: partner authentication with login/logout/password reset, session tokens stored in localStorage/sessionStorage, validates via Supabase edge function "partner-auth"
  • AppContext.tsx: simple sidebar toggle state

Vendor Portfolio

Vendor Data (src/data/vendorData.ts):

A single TypeScript file exporting a Record<string, VendorData> with comprehensive data for each vendor. Each vendor entry includes:

  • id, name, logo (initials), logoColor (gradient classes), brandColor (hex)
  • tagline, valueProposition, category, description, fullDescription (multi-paragraph)
  • forWhom (string array), keyCapabilities (string array), useCases (string array)
  • whyDistribute (why CRS distributes this vendor), crsValue (how CRS adds value)
  • website URL
  • technicalSpecs (grouped specs with label/value pairs)
  • pricingTiers (name, description, features array, optional highlight boolean)
  • caseStudies (title, company, industry, challenge, solution, results array)
  • integrations (name, description, type: Platform|API|Plugin|Native)
  • faqs (question/answer pairs)
  • For Keepit specifically: supportedWorkloads (categorised SaaS platforms)

The 9 vendors are:

  1. Wasabi — Hot cloud storage, no egress fees, 80% cheaper than hyperscalers, S3-compatible, Object Lock immutability. Green brand.
  2. Keepit — Independent SaaS backup for M365, Google Workspace, Salesforce, and 14+ SaaS platforms. Teal/cyan brand. Has a special "Supported Workloads" section showing all protected SaaS platforms by category.
  3. UFSConnect — Cloud-enable existing file servers without migration, secure HTTPS access, no VPN. Purple brand.
  4. StoneFly — Enterprise storage & DR appliances, air-gapped protection, iSCSI pioneers. Amber/stone brand.
  5. NAKIVO — VM & cloud backup for VMware, Hyper-V, Nutanix, AWS, M365. Multi-tenant MSP architecture. Orange brand.
  6. Proxmox — Open-source virtualisation (KVM + LXC), no per-socket licensing, web management. Orange/amber brand.
  7. QSAN — Enterprise SAN/NAS storage, dual controllers, NVMe, up to 11PB. Red brand.
  8. Cibecs — Endpoint backup for laptops/desktops/remote workers, continuous protection. Green/emerald brand.
  9. RackCorp — Australian sovereign cloud infrastructure, IRAP assessed, Tier III+ data centres. Red/slate brand.

Solution Pages Structure

Design System

Database & Backend

Supabase edge functions:

  1. "partner-auth" — handles login, logout, session validation, password reset request, password reset
  2. "contact-enquiry" — handles form submission, stores enquiries with fields: first_name, last_name, email, phone, company_name, job_title, enquiry_type, subject, message, preferred_contact_method, how_did_you_hear, newsletter_opt_in

Database tables:

  • partners (id, email, password_hash, company_name, contact_name, phone, location, business_type, status, created_at)
  • partner_sessions (id, partner_id, token, expires_at, created_at)
  • contact_enquiries (id, first_name, last_name, email, phone, company_name, job_title, enquiry_type, subject, message, preferred_contact_method, how_did_you_hear, newsletter_opt_in, status, created_at)

Key Design Decisions:

  1. Vendor data is hardcoded in vendorData.ts, not fetched from database — this is intentional for performance and because vendor info changes infrequently.
  2. Solution pages follow a consistent template but are individual files (not generated from data) to allow per-solution customisation.
  3. The homepage uses composition of separate components (HeroSection, SolutionPillars, etc.) rather than one monolithic file.
  4. Partner authentication uses custom session tokens stored in Supabase, not Supabase Auth — this was a deliberate choice for the partner portal.
  5. The site positions CRS as a distributor throughout — never as a consultant or MSP. This messaging is critical and should be maintained.
  6. Australian English spelling is used throughout (virtualisation, organisation, colour, etc.).
  7. Real partner testimonials with first names and company names are used — these are verified quotes from Quotient reviews.