A premium, professional portfolio website for Teebot, showcasing our four core divisions with sophisticated design and functional contact capabilities.

• ✅ Premium Design - Clean, sophisticated aesthetic with professional typography
• ✅ Next.js 16 with App Router and Turbopack
• ✅ TypeScript for type safety
• ✅ Tailwind CSS 4 for modern styling
• ✅ Functional Contact Form - With email delivery via Resend API
• ✅ Newsletter Subscription - Built-in audience building
• ✅ Rate Limiting & Security - Bot protection and spam prevention
• ✅ SEO Optimized with comprehensive metadata
• ✅ Responsive Design - Works beautifully on all devices
• ✅ Dark Mode support
• ✅ Production Ready - Thoroughly tested and optimized

Premium & Professional

• Playfair Display (serif) for elegant headings
• Inter (sans-serif) for clean body text
• Sophisticated color palette (black, white, refined grays)
• No heavy gradients - just clean, timeless design
• Asymmetric layouts for visual interest

npm install

Create .env.local for email functionality:

RESEND_API_KEY=your_resend_api_key
[email protected]

npm run dev

Open http://localhost:3000 🎉

npm run build
npm start

All documentation is organized in the docs/ folder:

• Getting Started - Start here for project introduction
• Configuration Guide - Email and security setup
• Testing Guide - How to test all features
• Redesign Summary - Complete list of changes
• Deployment - How to deploy to production

👉 See docs/README.md for the complete documentation index

teebot-portfolio/
├── app/
│   ├── api/
│   │   ├── contact/         # Contact form API endpoint
│   │   └── newsletter/      # Newsletter subscription API
│   ├── layout.tsx           # Root layout with fonts & metadata
│   ├── page.tsx             # Main page
│   └── globals.css          # Premium design system
├── components/
│   ├── Hero.tsx             # Premium hero section
│   ├── About.tsx            # Clean about section
│   ├── Divisions.tsx        # Asymmetric divisions layout
│   ├── Contact.tsx          # Functional contact form
│   ├── Footer.tsx           # Footer with newsletter
│   ├── Navigation.tsx       # Minimal navigation
│   └── ScrollToTop.tsx      # Scroll to top button
├── lib/
│   └── utils/
│       ├── rateLimit.ts     # Rate limiting logic
│       └── validation.ts    # Input validation
├── docs/                    # 📚 All documentation
├── public/                  # Static assets
└── README.md               # You are here!

1. Hero - Bold, minimal landing with elegant typography
2. About - Mission, vision, and core specializations
3. Divisions - Four specialized divisions (asymmetric layout)
   • Teebot Consulting - Strategy & Architecture
   • Teebot Labs - Research & Innovation (clickable link)
   • Teebot Systems - Hardware & IoT
   • Teebot Studio - Digital Experiences
4. Contact - Functional form with real-time validation
5. Footer - Newsletter subscription + social links

• ✅ Rate limiting on all form submissions
• ✅ Input validation and sanitization
• ✅ XSS protection
• ✅ Email validation
• ✅ Bot protection infrastructure
• ✅ CORS-ready for production

The site uses Resend for modern email delivery:

1. Sign up at resend.com (free tier available)
2. Get your API key
3. Add to .env.local:

   RESEND_API_KEY=re_xxxxxxxxxxxxx
   [email protected]

Without configuration: Forms will work but only log to console.

See ENV-CONFIGURATION.md for details.

• Edit CSS variables in app/globals.css
• Customize color palette (currently: sophisticated neutrals)
• Update logo in public/logo.png

• Edit components in components/ folder
• Update division details in components/Divisions.tsx
• Modify metadata in app/layout.tsx

• Currently using: Playfair Display + Inter
• Change in app/layout.tsx if desired

# Deploy in one command
vercel

Or connect your GitHub repo for automatic deployments.

Don't forget to add environment variables in Vercel dashboard!

Works with:

• Netlify
• AWS Amplify
• Docker
• Any Node.js hosting

See DEPLOYMENT.md for detailed instructions.

• Framework: Next.js 16 (App Router, Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Email: Resend API
• Icons: Lucide React
• Fonts: Playfair Display + Inter (Google Fonts)

This project is created for Teebot. All rights reserved.

• Email: [email protected]
• Website: iteebot.com
• Labs: labs.iteebot.com

Built with precision and care by Teebot 🚀