[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useEffect } from "react" import { Header } from "@/components/header" import { HeroSection } from "@/app/components/hero-section" import { ServicesSection } from "@/app/components/services-section" import { SolutionsSection } from "@/app/components/solutions-section" import { ApproachSection } from "@/app/components/approach-section" import { TestimonialsSection } from "@/app/components/testimonials-section" import { StatsSection } from "@/app/components/stats-section" import { CTASection } from "@/app/components/cta-section" import Image from "next/image" import Link from "next/link" export default function Home() { // Add scroll animation effect useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-fade-in") } }) }, { threshold: 0.1, rootMargin: "0px 0px -100px 0px" }, ) const hiddenElements = document.querySelectorAll(".initially-hidden") hiddenElements.forEach((el) => observer.observe(el)) return () => { hiddenElements.forEach((el) => observer.unobserve(el)) } }, []) return (

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#00A3E0", // Intellectual Clouds blue foreground: "#FFFFFF", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/services/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, ShoppingCart, Laptop, Cloud, Users, Rocket, Heart, TrendingUp, BarChart, Bot, Network, } from "lucide-react" export default function ServicesPage() { const services = [ { icon: , title: "E-Commerce Development", description: "Custom Shopify and Commerce Cloud solutions to power your online store.", link: "/services/ecommerce-development", }, { icon: , title: "Web Development", description: "Custom websites and web applications built with the latest technologies.", link: "/services/web-development", }, { icon: , title: "Salesforce Consultancy", description: "Expert guidance on implementing and optimizing Salesforce solutions.", link: "/services/salesforce-consultancy", }, { icon: , title: "Staff Augmentation", description: "Skilled technology professionals to supplement your team on-demand.", link: "/services/staff-augmentation", }, { icon: , title: "Tech for Startups", description: "Tailored technology solutions to help startups launch and scale quickly.", link: "/services/tech-for-startups", }, { icon: , title: "Customer Experience", description: "Strategic solutions to enhance customer engagement and satisfaction.", link: "/services/customer-experience", }, { icon: , title: "Growth Hacking", description: "Innovative strategies to accelerate business growth and user acquisition.", link: "/services/growth-hacking", }, { icon: , title: "Digital Marketing", description: "Performance-driven marketing strategies to maximize ROI and growth.", link: "/services/digital-marketing", }, { icon: , title: "AI Agents", description: "Intelligent AI-powered solutions that automate tasks and enhance customer experiences.", link: "/services/ai-agents", }, { icon: , title: "Cloud Integrations", description: "Seamless cloud platform integrations that optimize your infrastructure and drive business agility.", link: "/services/cloud-integrations", }, ] return (

{/* Hero Section */}

Our Services

Comprehensive technology solutions to drive your business growth and digital transformation.

{/* Services Grid */}

{services.map((service, index) => (

{service.icon}

{service.title}

{service.description}

Learn more

))}

{/* CTA Section */}

Ready to Transform Your Business?

) } [V0_FILE]typescriptreact:file="app/services/ecommerce-development/page.tsx" isFixed="true" isQuickEdit="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowRight, CheckCircle, ShoppingCart, CreditCard, Package, TrendingUp, BarChart, ShoppingBag, Users, } from "lucide-react" export default function EcommerceDevelopmentPage() { return (

{/* Hero Section */}

E-Commerce Solutions

E-Commerce Development

Custom Shopify and Commerce Cloud solutions to power your online store and drive sales growth.

{/* Features Section */}

Key Features

Comprehensive E-Commerce Solutions

We deliver end-to-end e-commerce solutions tailored to your specific business needs.

Shopify Development

Custom Shopify store development with tailored themes, apps, and integrations to create a unique shopping experience.

Commerce Cloud Solutions

Salesforce Commerce Cloud implementation and customization for enterprise-level e-commerce operations.

Headless Commerce

Modern headless commerce solutions that separate the frontend and backend for maximum flexibility and performance.

{/* Approach Section */}

Our Approach

How We Build Your E-Commerce Platform

Our proven methodology ensures a successful e-commerce implementation that drives sales and customer satisfaction.

Discovery & Strategy

We analyze your business needs, target audience, and competition to develop a comprehensive e-commerce strategy.

Design & Development

Our team creates a visually appealing, user-friendly store with seamless checkout processes and mobile optimization.

Integration & Testing

We integrate payment gateways, shipping solutions, and third-party services, followed by rigorous testing.

Launch & Optimization

After launch, we continuously monitor and optimize your store for performance, conversion rates, and user experience.

{/* Benefits Section */}

Benefits

Why Choose Our E-Commerce Solutions

Our e-commerce development services deliver tangible business results.

Increased Sales

Optimized user experience and checkout process to maximize conversion rates.

Scalable Solution

Built to grow with your business, handling increased traffic and orders with ease.

Data-Driven Insights

Advanced analytics to understand customer behavior and optimize your store.

Enhanced CX

Personalized shopping experiences that build customer loyalty and retention.

{/* Case Studies Section */}

Case Studies

Success Stories

See how our e-commerce solutions have transformed businesses.

Fashion Retailer Increases Sales by 150%

We helped a fashion retailer migrate from a legacy platform to Shopify Plus, resulting in a 150% increase in online sales and a 40% reduction in cart abandonment.

B2B Manufacturer Expands Global Reach

Our Commerce Cloud implementation helped a B2B manufacturer expand to 12 new international markets with localized storefronts, increasing global revenue by 85%.

{/* CTA Section */}

Ready to Transform Your E-Commerce Business?

) } [V0_FILE]typescriptreact:file="app/services/web-development/page.tsx" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowRight, CheckCircle, Laptop, Code, Layout, Smartphone, Zap, Globe } from "lucide-react" export default function WebDevelopmentPage() { return (

{/* Hero Section */}

Web Solutions

Web Development

Custom websites and web applications built with the latest technologies to drive your business forward.

{/* Features Section */}

Key Features

Comprehensive Web Development Solutions

We deliver end-to-end web solutions tailored to your specific business needs.

Custom Website Development

Bespoke websites designed and developed to meet your specific business requirements and brand identity.


                
                  Web Application Development
                  
                    Complex web applications with advanced functionality, user authentication, and data management
                    capabilities.


              
                
                  
                
                
                  Responsive Design
                  
                    Mobile-first approach ensuring your website performs flawlessly across all devices and screen sizes.



        {/* Approach Section */}
        
          
            
              
                
              
              
                
                  
                    Our Approach
                  
                  
                    How We Build Your Web Solution
                  
                  
                    Our proven methodology ensures a successful web development project that meets your business
                    objectives.
                  
                
                
                  
                    
                    
                      Discovery & Planning
                      
                        We analyze your business needs, target audience, and competition to develop a comprehensive web
                        strategy.
                      
                    
                  
                  
                    
                    
                      Design & Prototyping
                      
                        Our designers create wireframes and visual designs that align with your brand and provide
                        optimal user experience.
                      
                    
                  
                  
                    
                    
                      Development & Testing
                      
                        We build your website or application using modern technologies, followed by thorough testing
                        across devices.
                      
                    
                  
                  
                    
                    
                      Launch & Maintenance
                      
                        After launch, we provide ongoing support, maintenance, and optimization to ensure your web
                        solution continues to perform.
                      
                    
                  
                
              
            
          
        

        {/* Benefits Section */}
        
          
            
              
                
                  Benefits
                
                
                  Why Choose Our Web Development Services
                
                
                  Our web development services deliver tangible business results.
                
              
            
            
              
                
                  
                
                Performance Optimized
                
                  Fast-loading websites that provide excellent user experience and improve SEO rankings.
                
              
              
                
                  
                
                SEO Friendly
                
                  Built with search engine optimization in mind to improve visibility and organic traffic.
                
              
              
                
                  
                

                Scalable Architecture
                
                  Future-proof solutions that can grow with your business and adapt to changing requirements.
                
              

              
                
                  
                
                Easy to Manage
                
                  User-friendly content management systems that make updating your website simple.
                
              
            

          

        


        {/* Case Studies Section */}
        
          
            
              
                
                  Case Studies
                
                Success Stories
                
                  See how our web development solutions have transformed businesses.
                
              
            
            
              
                
                  
                  Healthcare Provider Increases Patient Engagement
                  
                    We developed a patient portal that increased online appointment bookings by 200% and improved
                    patient satisfaction scores by 35%.
                  
                
                
              
              
                
                  
                  Financial Services Firm Modernizes Web Presence
                  
                    Our redesign and development of a financial services website led to a 75% increase in lead
                    generation and a 40% reduction in bounce rate.
                  
                
                
              
            
          
        

        {/* CTA Section */}
        
          
            
              
                
                  Ready to Transform Your Web Presence?
                
                
                  Contact us today to discuss how our web development solutions can help you achieve your business
                  goals.


  )
}

[V0_FILE]typescriptreact:file="app/services/salesforce-consultancy/page.tsx"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowRight, CheckCircle, Cloud, Database, LineChart, Users, Zap, Shield } from "lucide-react"

export default function SalesforceConsultancyPage() {
  return (
    
      
        {/* Hero Section */}
        
          
            
              
                
                  
                    Salesforce Solutions
                  
                  
                    Salesforce Consultancy
                  
                  
                    Expert guidance on implementing and optimizing Salesforce solutions to transform your business
                    operations.
                  
                
                
                  
                  
                
              
              
                
              
            
          
        

        {/* Features Section */}
        
          
            
              
                
                  Key Features
                
                Comprehensive Salesforce Solutions
                
                  We deliver end-to-end Salesforce services tailored to your specific business needs.
                
              
            
            
              
                
                  
                
                
                  Salesforce Implementation
                  
                    Custom Salesforce implementation tailored to your business processes and requirements.
                  
                
              
              
                
                  
                
                
                  Integration Services
                  
                    Seamless integration of Salesforce with your existing systems and third-party applications.
                  
                
              
              
                
                  
                
                
                  Analytics & Reporting
                  
                    Advanced analytics and custom reporting to gain actionable insights from your Salesforce data.
                  
                
              
            
          
        

        {/* Approach Section */}
        
          
            
              
                
              
              
                
                  
                    Our Approach
                  
                  
                    How We Implement Salesforce
                  
                  
                    Our proven methodology ensures a successful Salesforce implementation that meets your business
                    objectives.
                  
                
                
                  
                    
                    
                      Discovery & Strategy
                      
                        We analyze your business processes, challenges, and goals to develop a comprehensive Salesforce
                        strategy.
                      
                    
                  
                  
                    
                    
                      Configuration & Customization
                      
                        We configure and customize Salesforce to align with your specific business requirements and
                        workflows.
                      
                    
                  
                  
                    
                    
                      Data Migration & Integration
                      
                        We securely migrate your data and integrate Salesforce with your existing systems and
                        applications.
                      
                    
                  
                  
                    
                    
                      Training & Ongoing Support
                      
                        We provide comprehensive training and ongoing support to ensure successful adoption and
                        optimization.
                      
                    
                  
                
              
            
          
        

        {/* Benefits Section */}
        
          
            
              
                
                  Benefits
                
                
                  Why Choose Our Salesforce Consultancy
                
                
                  Our Salesforce consultancy services deliver tangible business results.
                
              
            
            
              
                
                  
                
                Increased Efficiency
                
                  Streamlined processes and automation that save time and reduce manual effort.
                
              
              
                
                  
                
                Enhanced Collaboration
                
                  Improved communication and collaboration across departments and teams.
                
              
              
                
                  
                
                Data-Driven Insights
                
                  Advanced analytics and reporting for better decision-making and strategy development.
                
              
              
                
                  
                
                Scalable Solution
                
                  A platform that grows with your business and adapts to changing requirements.
                
              
            
          
        

        {/* Case Studies Section */}
        
          
            
              
                
                  Case Studies
                
                Success Stories
                
                  See how our Salesforce solutions have transformed businesses.
                
              
            
            
              
                
                  
                  Manufacturing Company Increases Sales by 35%
                  
                    Our Salesforce implementation helped a manufacturing company streamline their sales process,
                    resulting in a 35% increase in sales and a 25% reduction in sales cycle time.
                  
                
                
              
              
                
                  
                  Financial Services Firm Improves Customer Satisfaction
                  
                    Our Salesforce Service Cloud implementation helped a financial services firm improve customer
                    satisfaction scores by 40% and reduce case resolution time by 50%.
                  
                
                
              
            
          
        

        {/* CTA Section */}
        
          
            
              
                
                  Ready to Transform Your Business with Salesforce?
                
                
                  Contact us today to discuss how our Salesforce consultancy services can help you achieve your business
                  goals.
                
              
              
                
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/services/ai-agents/page.tsx"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowRight, CheckCircle, Bot, MessageSquare, Brain, Zap, Users, Shield, LineChart } from "lucide-react"

export default function AIAgentsPage() {
  return (
    
      
        {/* Hero Section */}
        
          
            
              
                
                  
                    AI Solutions
                  
                  AI Agents
                  
                    Intelligent AI-powered solutions that automate tasks, enhance customer experiences, and drive
                    business efficiency.
                  
                
                
                  
                  
                
              
              
                
              
            
          
        

        {/* Features Section */}
        
          
            
              
                
                  Key Features
                
                Comprehensive AI Agent Solutions
                
                  We deliver intelligent AI solutions tailored to your specific business needs.
                
              
            
            
              
                
                  
                
                
                  Conversational AI
                  
                    Intelligent chatbots and virtual assistants that provide 24/7 customer support and streamline
                    interactions.
                  
                
              
              
                
                  
                
                
                  Customer Service Automation
                  
                    AI-powered solutions that handle routine inquiries, freeing up your team to focus on complex issues.
                  
                
              
              
                
                  
                
                
                  Intelligent Process Automation
                  
                    AI agents that automate repetitive tasks, analyze data, and make intelligent recommendations.
                  
                
              
            
          
        

        {/* Approach Section */}
        
          
            
              
                
              
              
                
                  
                    Our Approach
                  
                  
                    How We Build Your AI Solutions
                  
                  
                    Our proven methodology ensures successful AI implementation that delivers real business value.
                  
                
                
                  
                    
                    
                      Discovery & Use Case Definition
                      
                        We identify the most valuable AI applications for your business and define clear success
                        metrics.
                      
                    
                  
                  
                    
                    
                      Data Assessment & Preparation
                      
                        We evaluate your data landscape and prepare the necessary datasets for AI training and
                        implementation.
                      
                    
                  
                  
                    
                    
                      AI Development & Training
                      
                        Our experts develop and train AI models tailored to your specific business requirements.
                      
                    
                  
                  
                    
                    
                      Integration & Continuous Improvement
                      
                        We seamlessly integrate AI solutions into your existing systems and continuously refine them
                        based on performance.
                      
                    
                  
                
              
            
          
        

        {/* Benefits Section */}
        
          
            
              
                
                  Benefits
                
                Why Choose Our AI Agent Solutions
                
                  Our AI solutions deliver tangible business results and competitive advantages.
                
              
            
            
              
                
                  
                
                Increased Efficiency
                
                  Automate routine tasks and processes, reducing operational costs and improving productivity.
                
              
              
                
                  
                
                Enhanced Customer Experience
                
                  Provide 24/7 support and personalized interactions that improve customer satisfaction.
                
              
              
                
                  
                
                Data-Driven Insights
                
                  Gain valuable insights from AI analysis of customer interactions and business processes.
                
              
              
                
                  
                
                Scalable Solutions
                
                  AI agents that grow with your business and adapt to changing requirements and volumes.
                
              
            
          
        

        {/* Case Studies Section */}
        
          
            
              
                
                  Case Studies
                
                Success Stories
                
                  See how our AI solutions have transformed businesses.
                
              
            
            
              
                
                  
                  E-commerce Retailer Reduces Support Costs by 40%
                  
                    Our AI chatbot implementation helped an e-commerce retailer handle 70% of customer inquiries
                    automatically, reducing support costs by 40% and improving response times by 85%.
                  
                
                
              
              
                
                  
                  Financial Services Firm Automates Document Processing
                  
                    Our intelligent document processing solution helped a financial services firm reduce manual document
                    handling by 85%, improving accuracy to 99.5% and reducing processing time from days to minutes.
                  
                
                
              
            
          
        

        {/* CTA Section */}
        
          
            
              
                
                  Ready to Transform Your Business with AI?
                
                
                  Contact us today to discuss how our AI agent solutions can help you achieve your business goals.
                
              
              
                
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/services/cloud-integrations/page.tsx"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowRight, CheckCircle, Cloud, Server, Network, Lock, Zap, LineChart, RefreshCw } from "lucide-react"

export default function CloudIntegrationsPage() {
  return (
    
      
        {/* Hero Section */}
        
          
            
              
                
                  
                    Cloud Solutions
                  
                  
                    Cloud Integrations
                  
                  
                    Seamless cloud platform integrations that optimize your infrastructure, enhance scalability, and
                    drive business agility.
                  
                
                
                  
                  
                
              
              
                
              
            
          
        

        {/* Features Section */}
        
          
            
              
                
                  Key Features
                
                
                  Comprehensive Cloud Integration Solutions
                
                
                  We deliver end-to-end cloud integration services tailored to your specific business needs.
                
              
            
            
              
                
                  
                
                
                  Multi-Cloud Strategy
                  
                    Strategic integration of multiple cloud platforms (AWS, Azure, Google Cloud) to optimize performance
                    and costs.
                  
                
              
              
                
                  
                
                
                  Cloud Migration
                  
                    Seamless migration of on-premises infrastructure and applications to cloud environments with minimal
                    disruption.
                  
                
              
              
                
                  
                
                
                  API Integration
                  
                    Development and management of APIs to connect cloud services, applications, and data sources.
                  
                
              
            
          
        

        {/* Approach Section */}
        
          
            
              
                
              
              
                
                  
                    Our Approach
                  
                  
                    How We Implement Cloud Integrations
                  
                  
                    Our proven methodology ensures successful cloud integration that meets your business objectives.
                  
                
                
                  
                    
                    
                      Assessment & Strategy
                      
                        We evaluate your current infrastructure, applications, and business requirements to develop a
                        comprehensive cloud strategy.
                      
                    
                  
                  
                    
                    
                      Architecture & Design
                      
                        Our experts design a secure, scalable cloud architecture tailored to your specific needs and
                        integration requirements.
                      
                    
                  
                  
                    
                    
                      Migration & Integration
                      
                        We execute the migration and integration plan with minimal disruption to your business
                        operations.
                      
                    
                  
                  
                    
                    
                      Optimization & Management
                      
                        Continuous monitoring, optimization, and management of your cloud environment to ensure
                        performance and cost-efficiency.
                      
                    
                  
                
              
            
          
        

        {/* Benefits Section */}
        
          
            
              
                
                  Benefits
                
                
                  Why Choose Our Cloud Integration Services
                
                
                  Our cloud integration services deliver tangible business results.
                
              
            
            
              
                
                  
                
                Increased Agility
                
                  Faster deployment of applications and services to respond quickly to market changes.
                
              
              
                
                  
                
                Cost Optimization
                
                  Reduced infrastructure costs and improved resource utilization through cloud optimization.
                
              
              
                
                  
                
                Scalability
                
                  Easily scale resources up or down based on demand without significant infrastructure investments.
                
              
              
                
                  
                
                Enhanced Security
                
                  Improved security posture with cloud-native security tools and best practices implementation.
                
              
            
          
        

        {/* Case Studies Section */}
        
          
            
              
                
                  Case Studies
                
                Success Stories
                
                  See how our cloud integration solutions have transformed businesses.
                
              
            
            
              
                
                  
                  Healthcare Provider Reduces IT Costs by 35%
                  
                    Our cloud migration and integration strategy helped a healthcare provider move from legacy systems
                    to a hybrid cloud environment, reducing IT costs by 35% and improving system reliability.
                  
                
                
              
              
                
                  
                  Retail Chain Improves Scalability During Peak Seasons
                  
                    Our multi-cloud integration solution helped a retail chain handle 300% traffic increases during
                    holiday seasons with zero downtime, while optimizing costs during off-peak periods.
                  
                
                
              
            
          
        

        {/* CTA Section */}
        
          
            
              
                
                  Ready to Transform Your Cloud Infrastructure?
                
                
                  Contact us today to discuss how our cloud integration services can help you achieve your business
                  goals.
                
              
              
                
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/header.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"

export function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  // Handle scroll effect
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    
      
        
          
            
          
        
        
          
            Services
            
          
          
            Solutions
            
          
          
            Our Approach
            
          
          
            Contact
            
          
        
        
          
          
          
        
      

      {/* Mobile menu */}
      {isMobileMenuOpen && (
        
          
            
               setIsMobileMenuOpen(false)}
              >
                Services
              
               setIsMobileMenuOpen(false)}
              >
                Solutions
              
               setIsMobileMenuOpen(false)}
              >
                Our Approach
              
               setIsMobileMenuOpen(false)}
              >
                Contact
              
              
                
              
            
          
        
      )}
    
  )
}

[V0_FILE]typescriptreact:file="components/header.tsx" isQuickEdit="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Menu } from "lucide-react"

export function Header() {
  return (
    
      
        
          
            
          
        
        
          
            Services
          
          
            Solutions
          
          
            Our Approach
          
          
            Contact
          
        
        
          
          
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/hero-section.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useEffect, useRef } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function HeroSection() {
  const heroRef = useRef(null)

  // Add parallax effect
  useEffect(() => {
    const handleScroll = () => {
      if (!heroRef.current) return
      const scrollY = window.scrollY
      const heroElement = heroRef.current

      // Apply parallax effect to background
      const backgroundElement = heroElement.querySelector(".hero-bg")
      if (backgroundElement) {
        backgroundElement.style.transform = `translateY(${scrollY * 0.1}px)`
      }

      // Apply parallax effect to content
      const contentElement = heroElement.querySelector(".hero-content")
      if (contentElement) {
        contentElement.style.transform = `translateY(${scrollY * 0.05}px)`
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    
      {/* Background gradient with subtle animation */}
      

      {/* Animated background dots/grid */}
      

      
        
          
            
              
                
                  
                  
                
                Innovative Technology Solutions
              
              
                Business Technology Solutions
              
              
                Powered by Intellect, Driven by Values. We help businesses transform through innovative technology
                solutions.
              
            
            
              
              
            

            {/* Trust indicators */}
            
              Trusted by innovative companies
              
                
                
                
              
            
          

          
            {/* Decorative elements */}
            

            {/* Main image with floating animation */}
            
              

              {/* Floating badge */}
              
                
                  
                    10+
                  
                  
                    Years of
                    Excellence
                  
                
              
            
          
        
      
    
  )
}

[V0_FILE]css:file="app/globals.css" isFixed="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 196 100% 44%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 196 100% 44%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 196 100% 44%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 196 100% 44%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-black text-white;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Better typography */
  p,
  li {
    @apply leading-relaxed;
  }
}

/* Animation keyframes */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes scroll-down {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(6px);
    opacity: 0;
  }
}

/* Animation utility classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-scale {
  animation: scale 0.5s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-scroll-down {
  animation: scroll-down 1.5s ease-in-out infinite;
}

/* Staggered animation delays */
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-400 {
  animation-delay: 0.4s;
}
.delay-500 {
  animation-delay: 0.5s;
}

/* Card hover effects */
.service-card {
  @apply transition-all duration-300;
}

.service-card:hover {
  @apply transform -translate-y-1 shadow-lg;
}

/* Button hover effects */
.btn-hover-effect {
  @apply transition-all duration-300;
}

.btn-hover-effect:hover {
  @apply transform -translate-y-1;
}

/* Page transitions */
.page-transition-enter {
  opacity: 0;
}
.page-transition-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.page-transition-exit {
  opacity: 1;
}
.page-transition-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

/* Gradient text */
.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-500;
}

/* Glassmorphism */
.glass-effect {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}

.dark .glass-effect {
  @apply bg-black/30 backdrop-blur-md border border-gray-800;
}

/* Shimmer effect for loading states */
.shimmer {
  @apply relative overflow-hidden;
}

.shimmer::after {
  content: "";
  @apply absolute top-0 left-0 w-full h-full;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: shimmer 2s infinite;
}

/* Smooth transitions for all interactive elements */
a,
button,
input,
select,
textarea {
  @apply transition-all duration-300;
}

/* 3D transform styles */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.translate-z-20 {
  transform: translateZ(20px);
}

[V0_FILE]typescriptreact:file="app/components/testimonials-section.tsx" isQuickEdit="true"
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
import { Quote } from "lucide-react"

export function TestimonialsSection() {
  const testimonials = [
    {
      quote:
        "Intellectual Clouds transformed our e-commerce platform, resulting in a 40% increase in conversion rates and significantly improved user experience.",
      author: "Sarah Johnson",
      title: "CTO, RetailTech Inc.",
      avatar: "/placeholder.svg?height=80&width=80",
    },
    {
      quote:
        "Their Salesforce implementation was flawless. The team's expertise and attention to detail helped us streamline our sales process and improve customer relationships.",
      author: "Michael Chen",
      title: "VP of Sales, GrowthForce",
      avatar: "/placeholder.svg?height=80&width=80",
    },
    {
      quote:
        "Working with Intellectual Clouds on our AI strategy has been a game-changer. Their innovative solutions have automated key processes and provided valuable insights.",
      author: "Jessica Williams",
      title: "Innovation Director, FutureTech",
      avatar: "/placeholder.svg?height=80&width=80",
    },
  ]

  return (
    
      
        
          
            
              Client Success Stories
            
            What Our Clients Say
            
              Don't just take our word for it. Hear from the businesses we've helped transform.
            
          
        

        
          {testimonials.map((testimonial, index) => (
            
              
                
                
                  "{testimonial.quote}"
                  
                    
                    
                      {testimonial.author}
                      {testimonial.title}
                    
                  
                
              
            
          ))}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/stats-section.tsx" isQuickEdit="true"
import { Card, CardContent } from "@/components/ui/card"
import { Users, BarChart, Award, Globe } from "lucide-react"

export function StatsSection() {
  const stats = [
    {
      icon: ,
      value: "200+",
      label: "Clients Served",
      description: "Across various industries",
    },
    {
      icon: ,
      value: "98%",
      label: "Client Satisfaction",
      description: "Based on post-project surveys",
    },
    {
      icon: ,
      value: "50+",
      label: "Technology Experts",
      description: "With specialized skills",
    },
    {
      icon: ,
      value: "10+",
      label: "Years of Excellence",
      description: "In technology solutions",
    },
  ]

  return (
    
      
        
          {stats.map((stat, index) => (
            
              
                
                  {stat.icon}
                  
                    {stat.value}
                  
                  {stat.label}
                  {stat.description}
                
              
            
          ))}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/service-card.tsx"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import type { LucideIcon } from "lucide-react"

interface ServiceCardProps {
  icon: LucideIcon
  title: string
  description: string
  link: string
  index: number
}

export function ServiceCard({ icon: Icon, title, description, link, index }: ServiceCardProps) {
  // Calculate animation delay based on index
  const delay = `${index * 0.1}s`

  return (
    
      
        
          
        
        
          {title}
          {description}
        
      
      
        
          Learn more 
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/services-section.tsx" isQuickEdit="true"
import { ServiceCard } from "@/app/components/service-card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ArrowRight, ShoppingCart, Laptop, Cloud, Bot } from "lucide-react"

export function ServicesSection() {
  const services = [
    {
      icon: ShoppingCart,
      title: "E-Commerce Development",
      description: "Custom Shopify and Commerce Cloud solutions to power your online store.",
      link: "/services/ecommerce-development",
    },
    {
      icon: Laptop,
      title: "Web Development",
      description: "Custom websites and web applications built with the latest technologies.",
      link: "/services/web-development",
    },
    {
      icon: Cloud,
      title: "Salesforce Consultancy",
      description: "Expert guidance on implementing and optimizing Salesforce solutions.",
      link: "/services/salesforce-consultancy",
    },
    {
      icon: Bot,
      title: "AI Agents",
      description: "Intelligent AI-powered solutions that automate tasks and enhance experiences.",
      link: "/services/ai-agents",
    },
  ]

  return (
    
      
        
          
            
              Our Services
            
            
              Comprehensive Technology Solutions
            
            
              We offer a range of services designed to transform your business operations and drive growth.
            
          
        

        
          {services.map((service, index) => (
            
          ))}
        

        
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/cta-section.tsx" isQuickEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function CTASection() {
  return (
    
      
        {/* Background decorative elements */}
        
          
          
        

        
          
            
              Ready to Transform Your Business?
            
            
              Contact us today to discuss how our technology solutions can help you achieve your business goals.
            
          
          
            
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/solutions-section.tsx"
"use client"

import { useRef } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { motion, useScroll, useTransform } from "framer-motion"
import { ArrowRight, ShoppingCart, Cloud, TrendingUp, Bot, Clock } from "lucide-react"

export function SolutionsSection() {
  const sectionRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start end", "end start"],
  })

  const y = useTransform(scrollYProgress, [0, 1], [100, -100])
  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.9, 1], [0, 1, 1, 0])

  const solutions = [
    {
      icon: ShoppingCart,
      title: "E-Commerce Excellence",
      description:
        "Custom Shopify and Commerce Cloud solutions that drive conversions and enhance customer experience.",
      delay: 0.2,
    },
    {
      icon: Cloud,
      title: "Salesforce Optimization",
      description: "Maximize your Salesforce investment with custom implementations and integrations.",
      delay: 0.4,
    },
    {
      icon: TrendingUp,
      title: "Growth-Driven Marketing",
      description: "Data-driven digital marketing strategies that deliver measurable results and ROI.",
      delay: 0.6,
    },
    {
      icon: Bot,
      title: "AI-Powered Automation",
      description: "Intelligent automation solutions that streamline operations and enhance customer experiences.",
      delay: 0.8,
    },
  ]

  return (
    
      {/* Animated background elements */}
      
        
        
        
      

      
        
          
            {/* Support Badge */}
            
              
                
                  
                  
                    
                  
                
                
                  24/7
                  Support Available
                
              
            

            {/* Main Image Container */}
            
              
              

              {/* Floating Stats */}
              
                
                  200+
                  Projects Delivered
                
                
                  98%
                  Client Satisfaction
                
              
            
          

          
            
              
                Our Solutions
              
              
                Driving Business Growth Through Technology
              
              
                We help businesses leverage contemporary technology solutions to optimize operations and accelerate
                growth.
              
            

            
              {solutions.map((solution, index) => (
                
                  
                    
                      
                    
                  
                  
                    
                      {solution.title}
                    
                    {solution.description}
                  
                
              ))}
            

            
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/approach-section.tsx"
import { Card, CardContent } from "@/components/ui/card"

export function ApproachSection() {
  const steps = [
    {
      number: "1",
      title: "Discover",
      description: "We analyze your business needs and identify opportunities for technology enhancement.",
    },
    {
      number: "2",
      title: "Design",
      description: "Our experts create a tailored solution designed to address your specific challenges.",
    },
    {
      number: "3",
      title: "Implement",
      description: "We deploy solutions with minimal disruption to your ongoing business operations.",
    },
    {
      number: "4",
      title: "Optimize",
      description: "Continuous improvement ensures your technology solutions evolve with your business.",
    },
  ]

  return (
    
      
        
          
            
              Our Approach
            
            
              How We Drive Technology Transformation
            
            
              Our proven methodology ensures successful implementation and adoption of technology solutions.
            
          
        
        
          {steps.map((step, index) => (
            
              
                
                  
                    {step.number}
                  
                  {step.title}
                  {step.description}
                
              
            
          ))}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "Intellectual Clouds - Business Technology Solutions",
  description:
    "Powered by Intellect, Driven by Values. We help businesses transform through innovative technology solutions.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
          {children}
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/about/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}

[V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Header } from "@/components/header"
import { Button } from "@/components/ui/button"
import { ArrowRight, Users, Lightbulb, Target, Compass, Briefcase, ChevronRight, Award, Zap } from "lucide-react"

export default function AboutPage() {
  const [activeTab, setActiveTab] = useState("vision")
  const statsRef = useRef(null)
  const [counters, setCounters] = useState({ years: 0, clients: 0, projects: 0, experts: 0 })

  // Animate counters when in view
  useEffect(() => {
    if (!statsRef.current) return

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          const duration = 2000 // ms
          const frameDuration = 1000 / 60 // 60fps
          const totalFrames = Math.round(duration / frameDuration)

          let frame = 0
          const targetValues = { years: 10, clients: 200, projects: 350, experts: 50 }

          const counter = setInterval(() => {
            frame++
            const progress = frame / totalFrames

            setCounters({
              years: Math.floor(progress * targetValues.years),
              clients: Math.floor(progress * targetValues.clients),
              projects: Math.floor(progress * targetValues.projects),
              experts: Math.floor(progress * targetValues.experts),
            })

            if (frame === totalFrames) {
              clearInterval(counter)
              setCounters(targetValues)
            }
          }, frameDuration)
        }
      },
      { threshold: 0.5 },
    )

    observer.observe(statsRef.current)
    return () => observer.disconnect()
  }, [])

  // Add scroll animation effect
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in")
            entry.target.classList.remove("opacity-0")
          }
        })
      },
      { threshold: 0.1, rootMargin: "0px 0px -100px 0px" },
    )

    const hiddenElements = document.querySelectorAll(".initially-hidden")
    hiddenElements.forEach((el) => observer.observe(el))

    return () => {
      hiddenElements.forEach((el) => observer.unobserve(el))
    }
  }, [])

  return (
    
      
      
        {/* Distinctive About Hero Section */}
        
          {/* Background with animated gradient */}
          
            
            
            
          

          
            {/* Timeline indicator */}
            

            
              {/* Left side: Timeline and content */}
              
                
                  {/* Timeline node */}
                  
                    
                  

                  
                    
                      Our Story
                    
                    
                      A Decade of 

                      
                        Digital Excellence
                      
                    
                  
                

                
                  {/* Timeline node */}
                  
                    
                  

                  
                    Founded in 2013, Intellectual Clouds has evolved from a small tech consultancy to a leading provider
                    of innovative business technology solutions across multiple industries.
                  
                

                
                  {/* Timeline node */}
                  
                    
                  

                  
                    
                    
                  
                
              

              {/* Right side: Stacked cards with company highlights */}
              
                

                {/* Main card */}
                
                  
                  

                  
                    
                      {/* Company values */}
                      
                        
                          
                        
                        
                          Our Mission
                          
                            To deliver exceptional technology solutions that create measurable value through expertise,
                            innovation, and unwavering commitment.
                          
                        
                      

                      {/* Key stats */}
                      
                        
                          
                            
                              
                            
                            
                              10+
                              Years of Excellence
                            
                          
                        

                        
                          
                            
                              
                            
                            
                              50+
                              Technology Experts
                            
                          
                        
                      

                      {/* Achievement highlight */}
                      
                        
                          
                            
                          
                          Our Impact
                        
                        
                          Transformed over 200+ businesses across healthcare, finance, retail, and manufacturing sectors
                          with innovative technology solutions.
                        
                      
                    
                  
                

                {/* Decorative elements */}
                
                  
                    
                      
                    
                    
                      Innovative
                      Solutions
                    
                  
                
              
            
          
        

        {/* Animated Stats Section */}
        
          {/* Background elements */}
          
            
            
          

          
            
              {/* Years Counter */}
              
                {counters.years}+
                
                Years of Excellence
              

              {/* Clients Counter */}
              
                {counters.clients}+
                
                Clients Served
              

              {/* Projects Counter */}
              
                {counters.projects}+
                
                Projects Delivered
              

              {/* Experts Counter */}
              
                {counters.experts}+
                
                Technology Experts
              
            
          
        

        {/* Interactive Vision & Mission Tabs */}
        
          {/* Animated background elements */}
          
            
            
            
          

          
            
              
                
                  Our Foundation
                
                
                  What Drives Us Forward
                
                
                  Our core principles guide everything we do, from strategy to execution.
                
              
            

            {/* Enhanced Tab Navigation */}
            
              
                {["vision", "mission", "strategy", "philosophy"].map((tab) => (
                  
                ))}
              

              {/* Enhanced Content Area */}
              
                {/* Background card with glassmorphism */}
                

                {/* Vision Content */}
                
                  
                    
                      
                        
                          
                            
                          
                        
                        
                          
                            Our Vision
                          
                          
                            To be the catalyst for technological transformation, empowering businesses to thrive in the
                            digital era through innovative solutions that drive growth, efficiency, and competitive
                            advantage.
                          
                        
                        
                          {[
                            "Pioneering technological advancement across industries",
                            "Creating sustainable digital ecosystems for businesses",
                            "Setting new standards for technology implementation",
                          ].map((point, index) => (
                            
                              
                                
                              
                              {point}
                            
                          ))}
                        
                      
                    
                    
                      
                      

                      {/* Floating achievement cards */}
                      
                        
                          200+
                          Global Clients
                        
                        
                          95%
                          Success Rate
                        
                      
                    
                  
                

                {/* Mission Content */}
                
                  
                    
                      
                      

                      {/* Achievement timeline */}
                      
                        
                          
                            
                              
                                
                              
                            
                            
                              Our Impact
                              
                                Transforming businesses through technology excellence
                              
                            
                          
                        
                      
                    
                    
                      
                        
                          
                            
                          
                        
                        
                          
                            Our Mission
                          
                          
                            To deliver exceptional technology solutions that address complex business challenges,
                            enhance operational efficiency, and create measurable value through expertise, innovation,
                            and unwavering commitment to excellence.
                          
                        
                        
                          {[
                            {
                              title: "Client Success",
                              description: "Delivering solutions that drive tangible business outcomes",
                            },
                            {
                              title: "Innovation",
                              description: "Staying ahead with cutting-edge technology solutions",
                            },
                            {
                              title: "Excellence",
                              description: "Maintaining the highest standards in everything we do",
                            },
                          ].map((item, index) => (
                            
                              
                                
                                {item.title}
                              
                              {item.description}
                            
                          ))}
                        
                      
                    
                  
                

                {/* Strategy Content */}
                
                  
                    
                      
                        
                          
                            
                          
                        
                        
                          
                            Our Strategy
                          
                          
                            We employ a comprehensive approach that combines deep industry knowledge, technical
                            expertise, and innovative thinking to develop solutions that not only address current
                            challenges but also anticipate future needs.
                          
                        
                        
                          {[
                            {
                              phase: "01",
                              title: "Discovery & Analysis",
                              description: "Understanding your business needs and challenges",
                            },
                            {
                              phase: "02",
                              title: "Solution Design",
                              description: "Creating tailored technology solutions",
                            },
                            {
                              phase: "03",
                              title: "Implementation",
                              description: "Executing with precision and expertise",
                            },
                          ].map((step, index) => (
                            
                              
                                {step.phase}
                              
                              {step.title}
                              {step.description}
                            
                          ))}
                        
                      
                    
                    
                      
                      

                      {/* Strategy progress indicators */}
                      
                        
                          
                            
                              Project Success Rate
                              98%
                            
                            
                              
                            
                          
                        
                      
                    
                  
                

                {/* Philosophy Content */}
                
                  
                    
                      
                      

                      {/* Philosophy highlights */}
                      
                        
                          Innovation
                          Driving digital transformation
                        
                        
                          Excellence
                          Pursuing perfection
                        
                      
                    
                    
                      
                        
                          
                            
                          
                        
                        
                          
                            Our Philosophy
                          
                          
                            We believe that technology should serve as an enabler for business success, not a
                            constraint. Our philosophy centers on creating solutions that are innovative, practical, and
                            aligned with human needs.
                          
                        
                        
                          {[
                            {
                              title: "Human-Centered",
                              description: "Technology that enhances human capabilities",
                            },
                            {
                              title: "Sustainable Growth",
                              description: "Long-term solutions for lasting success",
                            },
                            {
                              title: "Ethical Innovation",
                              description: "Responsible development of technology",
                            },
                          ].map((pillar, index) => (
                            
                              
                                
                                
                              
                              {pillar.title}
                              {pillar.description}
                            
                          ))}
                        
                      
                    
                  
                
              
            
          
        

        {/* Why Choose Us Categories Section */}
        
          
            
              
                
                  Why Choose Us
                
                
                  Comprehensive Business Technology Solutions
                
                
                  We deliver end-to-end technology services tailored to your specific business needs.
                
              
            

            
              {/* Experience */}
              
                
                
                  
                    
                  
                  
                    Experience
                    
                      With over 10 years of industry experience, our team of experts has successfully delivered hundreds
                      of projects across various sectors, ensuring you receive proven solutions that drive results.
                    
                  
                
              

              {/* Products */}
              
                
                
                  
                    
                  
                  
                    Products
                    
                      Our comprehensive suite of technology solutions includes custom software development, e-commerce
                      platforms, Salesforce implementations, and AI-powered tools designed to address your specific
                      business challenges.
                    
                  
                
              

              {/* Approach */}
              
                
                
                  
                    
                  
                  
                    Approach
                    
                      We follow a collaborative, client-centered methodology that begins with thorough discovery,
                      continues with strategic planning and expert implementation, and extends to ongoing optimization
                      and support.
                    
                  
                
              

              {/* Pricing */}
              
                
                
                  
                    
                  
                  
                    Pricing
                    
                      We offer transparent, value-based pricing models tailored to your business size and needs,
                      ensuring you receive maximum ROI from your technology investments with no hidden costs or
                      surprises.
                    
                  
                
              

              {/* Delivery */}
              
                
                
                  
                    
                  
                  
                    Delivery
                    
                      Our proven delivery framework ensures on-time, on-budget project completion with regular
                      milestones, transparent communication, and rigorous quality assurance at every stage of
                      development.
                    
                  
                
              

              {/* Support */}
              
                
                
                  
                    
                  
                  
                    Support
                    
                      We provide comprehensive post-implementation support with dedicated account managers, responsive
                      technical assistance, and ongoing maintenance to ensure your solutions continue to perform
                      optimally.
                    
                  
                
              
            
          
        

        {/* Team Section with Interactive Cards */}
        
          {/* Background elements */}
          
            
            
          

          
            
              
                
                  Our Team
                
                Meet the Experts
                
                  Our diverse team of specialists brings together decades of experience across various technology
                  domains.
                
              
            

            
              {/* Team Member 1 - Interactive Card */}
              
                
                  {/* Front */}
                  
                    
                      
                    
                    John Smith
                    Chief Executive Officer
                    
                      
                        View Bio 
                      
                    
                  

                  {/* Back */}
                  
                    John Smith
                    
                      With over 20 years of experience in technology leadership, John has led digital transformation
                      initiatives for Fortune 500 companies across multiple industries.
                    
                    
                      "Our mission is to empower businesses with technology solutions that drive real, measurable
                      value."
                    
                    
                      
                        
                      
                      
                        
                      
                      
                        
                      
                    
                  
                
              

              {/* Team Member 2 - Interactive Card */}
              
                
                  {/* Front */}
                  
                    
                      
                    
                    Sarah Johnson
                    Chief Technology Officer
                    
                      
                        View Bio 
                      
                    
                  

                  {/* Back */}
                  
                    Sarah Johnson
                    
                      With 15+ years of experience in cloud architecture and emerging technologies, Sarah leads our
                      technical strategy and ensures we stay at the cutting edge of innovation.
                    
                    
                      "Technology should solve real business problems. Our focus is on practical solutions that deliver
                      measurable results."
                    
                    
                      
                        
                      
                      
                        
                      
                      
                        
                      
                    
                  
                
              

              {/* Team Member 3 - Interactive Card */}
              
                
                  {/* Front */}
                  
                    
                      
                    
                    David Lee
                    Lead Software Engineer
                    
                      
                        View Bio 
                      
                    
                  

                  {/* Back */}
                  
                    David Lee
                    
                      David is a seasoned software engineer with over 10 years of experience in developing scalable and
                      robust applications.
                    
                    
                      "I believe in writing clean, maintainable code that solves real-world problems."
                    
                    
                      
                        
                      
                      
                        
                      
                    
                  
                
              

              {/* Team Member 4 - Interactive Card */}
              
                
                  {/* Front */}
                  
                    
                      
                    
                    Emily White
                    AI Solutions Architect
                    
                      
                        View Bio 
                      
                    
                  

                  {/* Back */}
                  
                    Emily White
                    
                      Emily specializes in designing and implementing AI-powered solutions that drive business
                      innovation and efficiency.
                    
                    
                      "AI is not just about technology; it's about creating intelligent solutions that empower people."
                    
                    
                      
                        
                      
                      
                        
                      
                    
                  
                
              
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/testimonial-card.tsx"
"use client"

import Image from "next/image"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Quote } from "lucide-react"

interface TestimonialCardProps {
  quote: string
  author: string
  position: string
  image: string
}

export function TestimonialCard({ quote, author, position, image }: TestimonialCardProps) {
  return (
    
      
        
          
          “{quote}”
          
            
            
              {author}
              {position}
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/case-study-card.tsx"
"use client"

import Image from "next/image"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

interface CaseStudyCardProps {
  title: string
  description: string
  image: string
  stats: Record
}

export function CaseStudyCard({ title, description, image, stats }: CaseStudyCardProps) {
  return (
    
      
        
        
          {title}
          {description}
          
            {Object.entries(stats).map(([key, value]) => (
              
                {value}
                {key}
              
            ))}
          
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/feature-showcase.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ShoppingCart, CreditCard, BarChart } from "lucide-react"

const features = [
  {
    id: "storefront",
    icon: ShoppingCart,
    title: "Custom Storefront",
    description: "Create a unique shopping experience that reflects your brand identity.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    id: "payments",
    icon: CreditCard,
    title: "Secure Payments",
    description: "Offer multiple payment options with top-notch security measures.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    id: "analytics",
    icon: BarChart,
    title: "Advanced Analytics",
    description: "Gain valuable insights into your customers and sales performance.",
    image: "/placeholder.svg?height=400&width=600",
  },
]

export function FeatureShowcase() {
  const [activeTab, setActiveTab] = useState("storefront")

  return (
    
      
        Interactive Feature Showcase
        
          
            {features.map((feature) => (
              
                
                {feature.title}
              
            ))}
          
          
            
              {features.map(
                (feature) =>
                  feature.id === activeTab && (
                    
                      
                        
                          
                            {feature.title}
                            {feature.description}
                          
                          
                            
                          
                        
                      
                    
                  ),
              )}
            
          
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/parallax-section.tsx"
"use client"

import type React from "react"

import { useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"

interface ParallaxSectionProps {
  children: React.ReactNode
}

export function ParallaxSection({ children }: ParallaxSectionProps) {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  })

  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])

  return (
    
      
        {children}
      
      
        
        
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/contact/components/contact-form.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Send } from "lucide-react"

interface ContactFormProps {
  onSubmitSuccess: () => void
}

export function ContactForm({ onSubmitSuccess }: ContactFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 2000))
    setIsSubmitting(false)
    onSubmitSuccess()
  }

  return (
    
      
        
          Name
        
        
      

      
        
          Email
        
        
      

      
        
          Message
        
              </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.3 }}
      >
        <Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white" disabled={isSubmitting}>
          {isSubmitting ? (
            "Sending..."
          ) : (
            <>
              Send Message <Send className="ml-2 h-4 w-4" />
            </>
          )}
        </Button>
      </motion.div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/contact/components/map-component.tsx"
"use client"

import { useEffect, useState } from "react"
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api"

const mapContainerStyle = {
  width: "100%",
  height: "300px",
}

const center = {
  lat: 37.7749, // Replace with your company's latitude
  lng: -122.4194, // Replace with your company's longitude
}

export function MapComponent() {
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => setIsLoaded(true), 1000)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="rounded-xl overflow-hidden shadow-lg">
      {isLoaded ? (
        <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""}>
          <GoogleMap mapContainerStyle={mapContainerStyle} center={center} zoom={14}>
            <Marker position={center} />
          </GoogleMap>
        </LoadScript>
      ) : (
        <div className="w-full h-[300px] bg-gray-800 animate-pulse flex items-center justify-center">
          <p className="text-gray-400">Loading map...</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/components/contact-info.tsx"
"use client"

import { motion } from "framer-motion"
import { MapPin, Phone, Mail, Clock } from "lucide-react"

export function ContactInfo() {
  const contactItems = [
    {
      icon: <MapPin className="h-6 w-6 text-primary" />,
      title: "Address",
      content: "1309 Coffeen Avenue STE 1200, Sheridan, Wyoming 82801",
    },
    {
      icon: <Phone className="h-6 w-6 text-primary" />,
      title: "Phone",
      content: "+1 (202) 827 6649",
    },
    {
      icon: <Mail className="h-6 w-6 text-primary" />,
      title: "Email",
      content: "hello@intellectualclouds.com",
    },
    {
      icon: <Clock className="h-6 w-6 text-primary" />,
      title: "Business Hours",
      content: "Monday - Friday: 9:00 AM - 5:00 PM EST",
    },
  ]

  return (
    <div className="space-y-8">
      <div className="bg-gradient-to-br from-primary to-blue-600 rounded-2xl p-6 shadow-lg">
        <h2 className="text-2xl font-bold mb-4">Contact Information</h2>
        <p className="text-gray-100">
          Reach out to us for any inquiries or support. We're here to help you transform your business with innovative
          technology solutions.
        </p>
      </div>
      <div className="space-y-6">
        {contactItems.map((item, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            className="flex items-start space-x-4"
          >
            <div className="flex-shrink-0">{item.icon}</div>
            <div>
              <h3 className="text-lg font-semibold text-white">{item.title}</h3>
              <p className="text-gray-400">{item.content}</p>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/components/static-map.tsx"
import Image from "next/image"

export function StaticMap() {
  return (
    <div className="rounded-xl overflow-hidden shadow-lg">
      <Image
        src="/placeholder.svg?height=300&width=600"
        alt="Map of Intellectual Clouds office location"
        width={600}
        height={300}
        className="w-full h-auto"
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/page.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import Image from "next/image"
import { Header } from "@/components/header"
import { ContactForm } from "@/app/contact/components/contact-form"
import { ContactInfo } from "@/app/contact/components/contact-info"
import { SocialLinks } from "@/app/contact/components/social-links"

export default function ContactPage() {
  const [formSubmitted, setFormSubmitted] = useState(false)

  const pageVariants = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 },
  }

  return (
    <div className="flex min-h-screen flex-col bg-black text-white">
      <Header />
      <motion.main
        className="flex-1 overflow-hidden"
        initial="initial"
        animate="animate"
        exit="exit"
        variants={pageVariants}
        transition={{ duration: 0.6, ease: "easeInOut" }}
      >
        <div className="relative w-full h-64 md:h-80 overflow-hidden">
          <Image
            src="https://sjc.microlink.io/K_LE765sZUz_wnPsSRRSyLNDG5yzKh58hfvNHFHNXWdXgUPlyqOzjv4W3ioKFZsZntD6T5pJVNZBXZoXoAccGw.jpeg"
            alt="Business on the Cloud"
            layout="fill"
            objectFit="cover"
            className="object-center"
          />
          <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <h1 className="text-4xl md:text-5xl font-bold text-white">Contact Us</h1>
          </div>
        </div>
        <section className="relative w-full py-20 md:py-32 overflow-hidden">
          <div className="container mx-auto px-4 md:px-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.6 }}
              className="text-center mb-12"
            >
              <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                We'd love to hear from you. Whether you have a question about our services, pricing, or just want to say
                hello, we're here to help.
              </p>
            </motion.div>

            <div className="grid md:grid-cols-2 gap-12 items-start">
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.4, duration: 0.6 }}
                className="bg-gray-900 rounded-2xl p-8 shadow-xl"
              >
                <ContactForm onSubmitSuccess={() => setFormSubmitted(true)} />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.6, duration: 0.6 }}
                className="space-y-8"
              >
                <ContactInfo />
                <SocialLinks />
              </motion.div>
            </div>
          </div>
        </section>
      </motion.main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/contact/components/social-links.tsx"
"use client"

import { motion } from "framer-motion"
import { Linkedin, Youtube, Instagram } from "lucide-react"

export function SocialLinks() {
  const socialLinks = [
    {
      icon: <Linkedin className="h-6 w-6" />,
      href: "https://www.linkedin.com/company/intellectual-clouds",
      label: "LinkedIn",
    },
    { icon: <Youtube className="h-6 w-6" />, href: "https://www.youtube.com/@intellectualclouds", label: "YouTube" },
    {
      icon: <Instagram className="h-6 w-6" />,
      href: "https://www.instagram.com/intellectualcloud/",
      label: "Instagram",
    },
  ]

  return (
    <div className="bg-gray-900 rounded-2xl p-6 shadow-lg">
      <h3 className="text-xl font-semibold mb-4">Connect With Us</h3>
      <p className="text-gray-400 mb-6">Follow us on social media for the latest updates, insights, and tech trends.</p>
      <div className="flex space-x-4">
        {socialLinks.map((link, index) => (
          <motion.a
            key={index}
            href={link.href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={link.label}
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: index * 0.1 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            className="bg-gray-800 p-3 rounded-full text-primary hover:bg-primary hover:text-white transition-colors duration-300"
          >
            {link.icon}
          </motion.a>
        ))}
      </div>
    </div>
  )
}
</article></body></html>