📚 SWC Partnership Website

🎯 Project Overview

Main Repository: https://github.com/splitlight-prod/swc-partnership-website (Private)

🏗️ Architecture & Technology Stack

📁 Project Structure

🚀 Key Features & Capabilities

🎨 Dynamic CSS Variables System

The design system uses configurable CSS variables that are dynamically generated from Sanity CMS brand settings:

:root {
  /* Configurable Brand Colors (Set via Sanity CMS) */
  --color-primary: [Dynamic from Sanity brandColors.primary];
  --color-secondary: [Dynamic from Sanity brandColors.secondary];
  --color-accent: [Dynamic from Sanity brandColors.accent];
  --color-dark-gray: [Dynamic from Sanity brandColors.darkGray];
  
  /* Configurable Typography (Set via Sanity CMS) */
  --font-primary: [Dynamic from Sanity typography.primaryFont];
  --font-secondary: [Dynamic from Sanity typography.secondaryFont];
}

📊 Lead Scoring Algorithm

const leadScore = {
  companyProvided: 20,      // Business context
  phoneNumber: 15,          // Contact preference
  businessEmail: 20,        // Professional domain
  highIntentSubject: 25,    // Service-related inquiry
  detailedMessage: 10,      // Message length > 100 chars
  maximumScore: 100
}

🛠️ Setup Instructions

📋 Prerequisites

• Node.js >= 20.0.0
• npm or yarn package manager
• Git version control
• Required Accounts: Sanity.io, AWS, HubSpot (optional), Vercel

1️⃣ Local Development Setup

Terminal Commands
# Clone the repository
git clone https://github.com/splitlight-prod/swc-partnership-website.git
cd swc-partnership-website

# Install dependencies
npm install

# Create environment file
cp .env.example .env.local

2️⃣ Environment Variables

Create .env.local with the following variables:

.env.local
# Site Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Sanity CMS
NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your_api_token

# AWS S3 Storage
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
AWS_REGION=us-east-1
AWS_S3_BUCKET_NAME=your-bucket-name

# HubSpot CRM (Optional)
NEXT_PUBLIC_HUBSPOT_PORTAL_ID=your_portal_id
HUBSPOT_ACCESS_TOKEN=your_access_token
HUBSPOT_FORM_GUID=your_form_guid

# Security (Production)
NEXTAUTH_SECRET=your_secret_key
REVALIDATE_SECRET=your_revalidate_secret

3️⃣ Start Development

Development Commands
# Start Next.js development server
npm run dev
# Access at: http://localhost:3000

# Start Sanity Studio
npm run sanity:dev
# Access at: http://localhost:3000/admin

💻 Development Workflow

📦 Available Scripts

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm run start

# Type checking
npm run type-check

# Start Sanity Studio
npm run sanity:dev

# Deploy Studio
npm run sanity:deploy

# Sanity build
npm run sanity:build

🔧 Development Best Practices

• Hot Reload: Changes reflect instantly during development
• TypeScript: Use strict type checking for all components
• Component Library: Build reusable components in components/ui/
• Server Components: Use React 19 server components by default
• Performance: Monitor Core Web Vitals during development

🏗️ Building New Features

1. Create Component: Add to appropriate components/ subfolder
2. Add Types: Define in lib/types.ts
3. Test Integration: Verify with Sanity CMS data
4. Performance Check: Ensure no regressions in Lighthouse score

🌐 API Routes & Endpoints

📡 Available API Endpoints

POST /api/contact
{
  "name": "John Doe",
  "email": "john@example.com",
  "company": "Acme Corp",
  "phone": "+1234567890",
  "subject": "Partnership Inquiry",
  "message": "Detailed message...",
  "source": "contact_form"
}

POST /api/upload
# Form Data Upload
Content-Type: multipart/form-data

{
  "file": [File object],
  "folder": "documents"
}

POST /api/revalidate
{
  "secret": "your_revalidate_secret",
  "path": "/",
  "type": "page"
}

Internal Service
# Automatic features:
- Visitor tracking
- Lead scoring (0-100)
- Contact creation
- Marketing workflows
- Sales notifications

🔐 API Security Features

• Rate Limiting: Prevents spam and abuse
• Input Validation: Zod schema validation on all inputs
• CORS Configuration: Proper origin restrictions
• Environment Secrets: All API keys server-side only
• Webhook Verification: Secret-based webhook authentication

📊 Lead Scoring Implementation

lib/hubspot/scoring.ts
const calculateLeadScore = (formData) => {
  let score = 0;
  
  // Company provided (+20 points)
  if (formData.company?.trim()) score += 20;
  
  // Phone number provided (+15 points)  
  if (formData.phone?.trim()) score += 15;
  
  // Business email domain (+20 points)
  if (isBusinessEmail(formData.email)) score += 20;
  
  // High-intent subject keywords (+25 points)
  if (hasHighIntentKeywords(formData.subject)) score += 25;
  
  // Detailed message (+10 points)
  if (formData.message?.length > 100) score += 10;
  
  return Math.min(score, 100); // Cap at 100
};

📝 Content Management with Sanity

📊 Content Types

🎨 Design System & Styling

🌈 Dynamic Brand Colors

The design system uses CSS Custom Properties that are dynamically set from Sanity CMS:

app/globals.css
:root {
  /* Core Brand Colors (Dynamic from Sanity) */
  --color-primary: #1a73e8;
  --color-secondary: #34a853;
  --color-accent: #fbbc04;
  --color-dark-gray: #202124;
  --color-medium-gray: #5f6368;
  --color-light-gray: #f8f9fa;
  
  /* Semantic Colors */
  --color-success: #34a853;
  --color-warning: #fbbc04;
  --color-error: #ea4335;
  --color-info: #1a73e8;
}

🎯 Component Design Patterns

components/ui/button.tsx
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'accent';
  size: 'small' | 'medium' | 'large';
  children: React.ReactNode;
}

export const Button = ({ 
  variant = 'primary', 
  size = 'medium',
  ...props 
}) => {
  return (
    <button
      className={cn(
        buttonVariants({ variant, size })
      )}
      {...props}
    />
  );
};

components/ui/container.tsx
export const Container = ({ 
  size = 'default',
  children 
}) => (
  <div className={cn(
    'mx-auto px-4 sm:px-6 lg:px-8',
    size === 'small' && 'max-w-4xl',
    size === 'default' && 'max-w-7xl',
    size === 'full' && 'max-w-none'
  )}>
    {children}
  </div>
);

📱 Responsive Design Breakpoints

tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',   // Mobile landscape
      'md': '768px',   // Tablet
      'lg': '1024px',  // Desktop
      'xl': '1280px',  // Large desktop
      '2xl': '1536px'  // Ultra-wide
    }
  }
}

🎭 Animation System

Built with Framer Motion for smooth, performant animations:

components/sections/hero-section.tsx
const fadeInUp = {
  initial: { opacity: 0, y: 60 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: "easeOut" }
};

<motion.div {...fadeInUp}>
  Hero content with smooth entrance animation
</motion.div>

🚀 Deployment

📦 Vercel Deployment (Recommended)

1. Connect Repository: Import from GitHub in Vercel dashboard
2. Configure Environment Variables: Add all production environment variables
3. Deploy: Automatic deployments on main branch pushes

🔧 Troubleshooting

# Check environment variables
echo $NEXT_PUBLIC_SANITY_PROJECT_ID
echo $SANITY_API_TOKEN

# Verify client configuration
# File: lib/sanity/client.ts

# Check if settings are loading
# File: app/layout.tsx

# Force content revalidation
curl -X POST "/api/revalidate" \
     -d '{"secret": "your_secret"}'

# Test API connection
curl -H "Authorization: Bearer $TOKEN" \
     "https://api.hubapi.com/contacts/..."

# Clear Next.js cache
rm -rf .next

# Reinstall dependencies
rm -rf node_modules
npm install

📊 Monitoring & Analytics

🔄 Maintenance Schedule

• Weekly: Monitor Core Web Vitals and lead capture rates
• Monthly: Update dependencies and review AWS costs
• Quarterly: Performance audit and security review