mirror of
https://github.com/hanzoai/agency.git
synced 2026-09-30 20:39:59 +00:00
Update look and feel
This commit is contained in:
zooqueen
+7
-4
@@ -11,11 +11,12 @@ import OnboardingForm from "./pages/Onboarding";
|
||||
import OnboardingSuccess from "./pages/OnboardingSuccess";
|
||||
import OurWork from "./pages/OurWork";
|
||||
import CaseStudy from "./pages/CaseStudy";
|
||||
|
||||
import Contact from "./pages/Contact";
|
||||
import Pricing from "./pages/Pricing";
|
||||
import Payment from "./pages/Payment";
|
||||
import Enterprise from "./pages/Enterprise";
|
||||
import ServicesPage from "./pages/ServicesPage";
|
||||
import SolutionsPage from "./pages/SolutionsPage";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
@@ -44,9 +45,11 @@ const App = () => (
|
||||
<Route path="/onboarding-success" element={<OnboardingSuccess />} />
|
||||
<Route path="/our-work" element={<OurWork />} />
|
||||
<Route path="/pricing" element={<Pricing />} />
|
||||
<Route path="/services/*" element={<Navigate to="/" replace />} />
|
||||
<Route path="/capabilities/*" element={<Navigate to="/" replace />} />
|
||||
<Route path="/industries/*" element={<Navigate to="/" replace />} />
|
||||
<Route path="/services" element={<ServicesPage />} />
|
||||
<Route path="/solutions" element={<SolutionsPage />} />
|
||||
<Route path="/services/*" element={<ServicesPage />} />
|
||||
<Route path="/capabilities/*" element={<SolutionsPage />} />
|
||||
<Route path="/industries/*" element={<SolutionsPage />} />
|
||||
<Route path="/case-studies" element={<Navigate to="/our-work" replace />} />
|
||||
<Route path="/case-study/:id" element={<CaseStudy />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
|
||||
@@ -1,218 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { ArrowUpRight, Download } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { buttonModifiers } from '@/lib/button-utils';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
|
||||
import { Input } from './ui/input';
|
||||
import { Textarea } from './ui/textarea';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
id: "techstream",
|
||||
industry: "SaaS",
|
||||
company: "TechStream",
|
||||
services: ["Brand Identity", "Motion Design", "AI Implementation"],
|
||||
image: "/images/case-studies/techstream.jpg",
|
||||
title: "AI-Powered Brand Transformation",
|
||||
description: "How TechStream leveraged AI-enhanced creative to reimagine their brand and accelerate market growth."
|
||||
},
|
||||
{
|
||||
id: "quantum-finance",
|
||||
industry: "Financial Services",
|
||||
company: "Quantum Finance",
|
||||
services: ["RAG System", "Web Design", "Content Strategy"],
|
||||
image: "/images/case-studies/quantum-finance.jpg",
|
||||
title: "Knowledge System Implementation",
|
||||
description: "Building a custom retrieval-augmented generation system that transformed customer service operations."
|
||||
},
|
||||
{
|
||||
id: "artisan-retail",
|
||||
industry: "E-commerce",
|
||||
company: "Artisan Retail",
|
||||
services: ["AI-Enhanced Creative", "Video Production", "Social Media"],
|
||||
image: "/images/case-studies/artisan-retail.jpg",
|
||||
title: "Content Velocity at Scale",
|
||||
description: "Creating an AI-powered content production system that increased output by 300% while maintaining brand consistency."
|
||||
}
|
||||
];
|
||||
|
||||
const interestOptions = [
|
||||
{ value: "creative", label: "Creative Design" },
|
||||
{ value: "production", label: "Specialized Production" },
|
||||
{ value: "ai", label: "AI Engineering" },
|
||||
{ value: "marketing", label: "Marketing" },
|
||||
{ value: "web3", label: "Web3 & Blockchain" },
|
||||
{ value: "software", label: "Software Development" }
|
||||
];
|
||||
|
||||
const CaseStudies = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [interest, setInterest] = useState('');
|
||||
const [projectDetails, setProjectDetails] = useState('');
|
||||
const [selectedCaseStudy, setSelectedCaseStudy] = useState<string | null>(null);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// In a real implementation, this would send the form data to a server
|
||||
// and then trigger the download
|
||||
setIsSubmitted(true);
|
||||
|
||||
// Simulate download start after form submission
|
||||
setTimeout(() => {
|
||||
// In a real implementation, this would be a link to the actual case study PDF
|
||||
window.open(`/case-studies/${selectedCaseStudy}.pdf`, '_blank');
|
||||
// Reset form for future submissions
|
||||
setIsSubmitted(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="our-work" className="py-24 lg:py-32 bg-neutral-50 dark:bg-neutral-900/50">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">Our Work</h2>
|
||||
<p className="text-xl text-foreground/80 max-w-2xl mx-auto">
|
||||
Powering 30+ successful exits and countless industry awards through AI-enhanced creative and technical systems
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{caseStudies.map((study, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-background border border-border rounded-lg overflow-hidden hover:shadow-lg transition-all reveal-slide-up"
|
||||
style={{animationDelay: `${index * 0.1}s`}}
|
||||
>
|
||||
<div className="h-64 overflow-hidden">
|
||||
<img
|
||||
src={study.image}
|
||||
alt={study.company}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="text-sm font-medium text-foreground/60">{study.industry}</div>
|
||||
<div className="mx-2 text-foreground/30">•</div>
|
||||
<div className="text-sm font-medium">{study.company}</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold mb-3">{study.title}</h3>
|
||||
<p className="text-foreground/70 mb-4">{study.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{study.services.map((service, serviceIndex) => (
|
||||
<span key={serviceIndex} className="bg-secondary/20 text-foreground/80 text-xs font-medium px-2.5 py-1 rounded">
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className={buttonModifiers.interactive + " font-medium w-full"}
|
||||
onClick={() => setSelectedCaseStudy(study.id)}
|
||||
>
|
||||
Download Case Study
|
||||
<Download size={14} className="ml-2" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Download Case Study</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tell us a bit about yourself to access the full case study
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="[email protected]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="interest" className="block text-sm font-medium mb-1">What are you interested in?</label>
|
||||
<Select value={interest} onValueChange={setInterest} required>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select your area of interest" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{interestOptions.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="project-details" className="block text-sm font-medium mb-1">Tell us about your project</label>
|
||||
<Textarea
|
||||
id="project-details"
|
||||
value={projectDetails}
|
||||
onChange={(e) => setProjectDetails(e.target.value)}
|
||||
placeholder="Briefly describe your project or goals"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isSubmitted}
|
||||
>
|
||||
{isSubmitted ? "Downloading..." : "Download Now"}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<a href="/our-work">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className={buttonModifiers.interactive + " font-medium"}
|
||||
>
|
||||
View all our work
|
||||
<ArrowUpRight size={16} className="ml-1" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaseStudies;
|
||||
+15
-15
@@ -108,15 +108,15 @@ const Navbar = () => {
|
||||
Our Work
|
||||
</Link>
|
||||
|
||||
<div className="relative group">
|
||||
<a href="/services" className="text-foreground/90 hover:text-foreground font-medium transition flex items-center gap-1">
|
||||
Services
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform duration-200 group-hover:rotate-180">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div className="relative group">
|
||||
<Link to="/services" className="text-foreground/90 hover:text-foreground font-medium transition flex items-center gap-1">
|
||||
Services
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform duration-200 group-hover:rotate-180">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<div className="absolute left-0 top-full z-50 w-full bg-black border-t border-gray-800 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 top-full z-50 w-screen max-w-full bg-black border-t border-gray-800 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="container-custom py-8">
|
||||
<div className="grid grid-cols-4 gap-8">
|
||||
{/* Column 1: Creative design services */}
|
||||
@@ -358,14 +358,14 @@ const Navbar = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<button className="text-foreground/90 hover:text-foreground font-medium transition flex items-center gap-1">
|
||||
Solutions
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform duration-200 group-hover:rotate-180">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<Link to="/solutions" className="text-foreground/90 hover:text-foreground font-medium transition flex items-center gap-1">
|
||||
Solutions
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform duration-200 group-hover:rotate-180">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</Link>
|
||||
|
||||
<div className="absolute left-0 top-full z-50 w-full bg-black border-t border-gray-800 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 top-full z-50 w-screen max-w-full bg-black border-t border-gray-800 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="container-custom py-8 grid grid-cols-3 gap-6">
|
||||
<div>
|
||||
<h3 className="font-bold text-lg mb-4">Capabilities</h3>
|
||||
|
||||
+63
-13
@@ -89,9 +89,9 @@ export default function Pricing() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
{/* Self-Serve AI Hub */}
|
||||
<div className="flex flex-col h-full border border-border/20 rounded-lg overflow-hidden">
|
||||
<div className="flex flex-col h-full border-2 border-gray-800 hover:border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
|
||||
<div className="p-6 border-b border-border/20">
|
||||
<h3 className="text-xl font-semibold mb-1">Self-Serve AI Hub</h3>
|
||||
<p className="text-sm text-foreground/70">AI-powered creative & marketing platform</p>
|
||||
@@ -140,14 +140,14 @@ export default function Pricing() {
|
||||
</div>
|
||||
|
||||
<div className="p-6 pt-2 mt-auto">
|
||||
<Link to="/payment?plan=self-serve" className="w-full inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium border border-border/40 hover:bg-card/40 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
|
||||
<Link to="/payment?plan=self-serve" className="w-full inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium border border-white/40 hover:bg-white/10 transition-colors focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2">
|
||||
Get started now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agency Service */}
|
||||
<div className="flex flex-col h-full border border-border/20 rounded-lg overflow-hidden bg-card/20 backdrop-blur-sm relative">
|
||||
<div className="flex flex-col h-full border-2 border-blue-800 hover:border-blue-700 rounded-xl overflow-hidden bg-gradient-to-b from-black to-blue-950/30 backdrop-blur-sm relative shadow-lg shadow-blue-900/10 transition-all duration-300">
|
||||
<div className="absolute top-0 right-0 bg-accent text-white px-4 py-1 text-sm font-bold">
|
||||
POPULAR
|
||||
</div>
|
||||
@@ -207,14 +207,64 @@ export default function Pricing() {
|
||||
</div>
|
||||
|
||||
<div className="p-6 pt-2 mt-auto">
|
||||
<Link to="/payment?plan=agency" className="w-full inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium bg-white text-black hover:bg-white/90 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
|
||||
<Link to="/payment?plan=agency" className="w-full inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium bg-white text-black hover:bg-white/90 transition-colors focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2">
|
||||
Get started now
|
||||
</Link>
|
||||
<div className="text-center mt-4">
|
||||
<Link to="/contact" className="text-sm text-foreground hover:underline">
|
||||
Schedule a demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Option */}
|
||||
<div className="flex flex-col h-full border-2 border-purple-800 hover:border-purple-700 rounded-xl overflow-hidden bg-gradient-to-b from-black to-purple-950/20 backdrop-blur-sm relative transition-all duration-300">
|
||||
<div className="p-6 border-b border-gray-800">
|
||||
<h3 className="text-xl font-semibold mb-1">Enterprise</h3>
|
||||
<p className="text-sm text-foreground/70">Custom solutions for large organizations</p>
|
||||
<div className="flex items-baseline gap-1 mt-2">
|
||||
<span className="text-3xl font-bold">Custom</span>
|
||||
</div>
|
||||
<p className="text-xs text-foreground/60 mt-2">Tailored to your specific needs</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 flex-grow">
|
||||
<ul className="space-y-3">
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Everything in Agency plan</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Multiple dedicated teams</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Custom SLAs and support structure</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Dedicated executive sponsor</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Custom AI solutions & training</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Advanced analytics & reporting</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">White-labeled solutions available</span>
|
||||
</li>
|
||||
<li className="flex gap-3 items-start">
|
||||
<Check size={16} className="text-foreground/80 mt-1 flex-shrink-0" />
|
||||
<span className="text-foreground/80 text-sm">Global team deployments</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="p-6 pt-2 mt-auto">
|
||||
<Link to="/contact?plan=enterprise" className="w-full inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium border border-purple-500/50 hover:bg-purple-950/20 transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500/30 focus:ring-offset-2">
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,28 +273,28 @@ export default function Pricing() {
|
||||
<div className="container-custom mt-24">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center">Frequently Asked Questions</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<div className="bg-card/30 border border-border/20 rounded-lg p-6">
|
||||
<div className="bg-card/30 border-2 border-gray-800 hover:border-gray-700 rounded-xl p-6 transition-all duration-300">
|
||||
<h3 className="text-lg font-semibold mb-3">How does your onboarding process work?</h3>
|
||||
<p className="text-foreground/80 text-sm">
|
||||
After signing up, you'll be assigned a dedicated team within 24 hours. Our onboarding specialist will walk you through our platform, gather your brand assets, and help you submit your first creative request to get you up and running quickly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card/30 border border-border/20 rounded-lg p-6">
|
||||
<div className="bg-card/30 border-2 border-gray-800 hover:border-gray-700 rounded-xl p-6 transition-all duration-300">
|
||||
<h3 className="text-lg font-semibold mb-3">How quickly will I receive my designs?</h3>
|
||||
<p className="text-foreground/80 text-sm">
|
||||
Basic design requests are delivered within 24-48 hours depending on your plan. More complex projects like websites or videos follow a detailed timeline established at the beginning of your project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card/30 border border-border/20 rounded-lg p-6">
|
||||
<div className="bg-card/30 border-2 border-gray-800 hover:border-gray-700 rounded-xl p-6 transition-all duration-300">
|
||||
<h3 className="text-lg font-semibold mb-3">What's the difference between the self-serve and agency plans?</h3>
|
||||
<p className="text-foreground/80 text-sm">
|
||||
The self-serve plan gives you access to our AI-powered platform with limited support. The agency plan provides a full creative team including a dedicated Creative Director, Project Manager, and specialized creatives who handle everything from strategy to execution.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card/30 border border-border/20 rounded-lg p-6">
|
||||
<div className="bg-card/30 border-2 border-gray-800 hover:border-gray-700 rounded-xl p-6 transition-all duration-300">
|
||||
<h3 className="text-lg font-semibold mb-3">Who owns the copyright to the work?</h3>
|
||||
<p className="text-foreground/80 text-sm">
|
||||
You own all copyrights to work created while you're an active client. All files and source materials are yours with no additional fees. However, if you cancel during the trial period, you cannot use any work produced during that time.
|
||||
|
||||
@@ -0,0 +1,342 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ArrowRight, Check } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
// Service category interface
|
||||
interface ServiceCategory {
|
||||
title: string;
|
||||
color: string;
|
||||
services: Service[];
|
||||
}
|
||||
|
||||
// Service interface
|
||||
interface Service {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
const ServicesPage = () => {
|
||||
const [activeCategory, setActiveCategory] = useState<string>('creative');
|
||||
|
||||
// Service categories data
|
||||
const serviceCategories: ServiceCategory[] = [
|
||||
{
|
||||
title: "Creative Design",
|
||||
color: "lime-400",
|
||||
services: [
|
||||
{
|
||||
name: "Ad Creative",
|
||||
description: "Eye-catching designs that perform and convert across all platforms",
|
||||
icon: "🎯",
|
||||
link: "/services/ad-creative"
|
||||
},
|
||||
{
|
||||
name: "Social Media Creative",
|
||||
description: "Engaging assets for all platforms optimized for maximum impact",
|
||||
icon: "📱",
|
||||
link: "/services/social-media-creative"
|
||||
},
|
||||
{
|
||||
name: "Presentation Design",
|
||||
description: "Captivating slides that tell your story and engage your audience",
|
||||
icon: "📊",
|
||||
link: "/services/presentation-design"
|
||||
},
|
||||
{
|
||||
name: "Illustration Design",
|
||||
description: "Visual storytelling for your brand that captures attention",
|
||||
icon: "🎨",
|
||||
link: "/services/illustration-design"
|
||||
},
|
||||
{
|
||||
name: "Branding Services",
|
||||
description: "Expertise & custom design services to define your identity",
|
||||
icon: "⭐",
|
||||
link: "/services/branding-services"
|
||||
},
|
||||
{
|
||||
name: "Web Design",
|
||||
description: "Stunning websites built to engage and convert visitors",
|
||||
icon: "🖥️",
|
||||
link: "/services/web-design"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Production",
|
||||
color: "emerald-500",
|
||||
services: [
|
||||
{
|
||||
name: "Video Production",
|
||||
description: "Effortless video production at scale for all your needs",
|
||||
icon: "🎬",
|
||||
link: "/services/video-production"
|
||||
},
|
||||
{
|
||||
name: "Motion Design",
|
||||
description: "Dynamic animations for websites, ads, and presentations",
|
||||
icon: "✨",
|
||||
link: "/services/motion-design"
|
||||
},
|
||||
{
|
||||
name: "3D & AR Design",
|
||||
description: "Innovative solutions for 3D design services and AR experiences",
|
||||
icon: "🔍",
|
||||
link: "/services/3d-ar-design"
|
||||
},
|
||||
{
|
||||
name: "Email Creation",
|
||||
description: "Click-worthy emails that drive engagement and conversions",
|
||||
icon: "📧",
|
||||
link: "/services/email-creation"
|
||||
},
|
||||
{
|
||||
name: "Print Design",
|
||||
description: "Tangible designs that leave a lasting impression on your audience",
|
||||
icon: "📚",
|
||||
link: "/services/print-design"
|
||||
},
|
||||
{
|
||||
name: "Packaging & Merchandise",
|
||||
description: "Bring your brand to life with custom packaging and merchandise",
|
||||
icon: "👕",
|
||||
link: "/services/packaging-merchandise-design"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "AI Services",
|
||||
color: "blue-500",
|
||||
services: [
|
||||
{
|
||||
name: "AI Enhanced Creative",
|
||||
description: "Human brilliance powered by AI for extraordinary results",
|
||||
icon: "🤖",
|
||||
link: "/services/ai-enhanced-creative"
|
||||
},
|
||||
{
|
||||
name: "AI Consulting",
|
||||
description: "Maximize AI with tailored strategies for your business",
|
||||
icon: "💬",
|
||||
link: "/services/ai-consulting"
|
||||
},
|
||||
{
|
||||
name: "Concept Creation",
|
||||
description: "Big ideas crafted for maximum impact using AI and human creativity",
|
||||
icon: "💡",
|
||||
link: "/services/concept-creation"
|
||||
},
|
||||
{
|
||||
name: "eBooks & Reports",
|
||||
description: "Your digital content supercharged with AI-powered insights",
|
||||
icon: "📄",
|
||||
link: "/services/ebooks-report-design"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Marketing",
|
||||
color: "amber-500",
|
||||
services: [
|
||||
{
|
||||
name: "Marketing Strategy",
|
||||
description: "Grow your brand with expert consultants and data-driven approaches",
|
||||
icon: "📈",
|
||||
link: "/services/marketing-strategy"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Filter services based on active category
|
||||
const filteredServices = serviceCategories.find(category =>
|
||||
category.title.toLowerCase().includes(activeCategory.toLowerCase())
|
||||
)?.services || [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="pt-32 pb-20 border-b border-gray-800">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-6">AI-ENABLED CREATIVE SOLUTIONS</h1>
|
||||
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
||||
Transforming traditional creative paradigms with an AI-enhanced approach that delivers measurable outcomes.
|
||||
</p>
|
||||
|
||||
<Link to="/login" className="bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-white/90 inline-flex items-center text-lg">
|
||||
Get Started Today <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services Categories Tab */}
|
||||
<div className="py-16 border-b border-gray-800 bg-black">
|
||||
<div className="container-custom">
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-16">
|
||||
{serviceCategories.map((category) => (
|
||||
<button
|
||||
key={category.title}
|
||||
className={`px-6 py-3 rounded-full font-medium text-base transition-colors ${
|
||||
activeCategory.toLowerCase() === category.title.toLowerCase().split(' ')[0].toLowerCase()
|
||||
? `bg-${category.color} text-black`
|
||||
: 'bg-gray-800 text-white hover:bg-gray-700'
|
||||
}`}
|
||||
onClick={() => setActiveCategory(category.title.toLowerCase().split(' ')[0])}
|
||||
>
|
||||
{category.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredServices.map((service) => (
|
||||
<div key={service.name} className="bg-gray-900 rounded-lg p-8 border border-gray-800 hover:border-gray-700 transition-all">
|
||||
<div className="text-4xl mb-4">{service.icon}</div>
|
||||
<h3 className="text-xl font-bold mb-2">{service.name}</h3>
|
||||
<p className="text-gray-400 mb-6">{service.description}</p>
|
||||
<Link to={service.link} className="text-white hover:text-blue-400 inline-flex items-center">
|
||||
Learn more <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<div className="py-20 bg-gradient-to-b from-black to-gray-900">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 className="text-4xl font-bold mb-4">Transparent Pricing</h2>
|
||||
<p className="text-xl text-gray-300">
|
||||
All services available in our simple monthly subscription. Scale up or down as needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-lg mx-auto">
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-2xl overflow-hidden">
|
||||
<div className="p-8 bg-blue-600 text-center">
|
||||
<h3 className="text-3xl font-bold mb-2">Enterprise Plan</h3>
|
||||
<div className="text-5xl font-bold my-6">$5,000<span className="text-xl font-normal">/month</span></div>
|
||||
<p className="text-lg opacity-90">Billed monthly. Cancel anytime.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Access to all creative services with unlimited revisions</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Dedicated creative team for your projects</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>AI-powered creative solutions and optimization</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Priority support and fast turnaround times</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Regular strategy meetings and performance reports</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Complete asset ownership and source files</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link to="/login" className="block w-full bg-white text-black py-4 rounded-full text-center font-medium hover:bg-white/90 transition-colors text-lg">
|
||||
Sign Up Now
|
||||
</Link>
|
||||
<p className="text-center mt-4 text-gray-400">No credit card required to start</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials */}
|
||||
<div className="py-20 bg-gray-900 border-t border-gray-800">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 className="text-4xl font-bold mb-4">Trusted by Industry Leaders</h2>
|
||||
<p className="text-xl text-gray-300">
|
||||
Our solutions have helped companies achieve remarkable results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-gray-800 p-8 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<img src="/images/casper/logo.png" alt="Casper" className="h-8" />
|
||||
</div>
|
||||
<p className="text-gray-300 mb-4">
|
||||
"Hanzo's AI-enhanced creative approach helped us increase our conversion rates by 65% while maintaining our brand identity."
|
||||
</p>
|
||||
<p className="font-medium">Marketing Director, Casper</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-8 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<img src="/images/triller/logo.png" alt="Triller" className="h-8" />
|
||||
</div>
|
||||
<p className="text-gray-300 mb-4">
|
||||
"The team at Hanzo delivered exceptional creative assets that helped us stand out in a crowded marketplace."
|
||||
</p>
|
||||
<p className="font-medium">CMO, Triller</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-8 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<img src="/images/damon/logo.png" alt="Damon Motorcycles" className="h-8" />
|
||||
</div>
|
||||
<p className="text-gray-300 mb-4">
|
||||
"Hanzo's work on our brand and marketing materials directly contributed to our successful launch and funding rounds."
|
||||
</p>
|
||||
<p className="font-medium">CEO, Damon Motorcycles</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="py-20 bg-black">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold mb-4">Ready to Transform Your Creative Process?</h2>
|
||||
<p className="text-xl text-gray-300 mb-12">
|
||||
Join innovative companies leveraging AI-powered creative solutions for measurable results.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link to="/login" className="bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-white/90 inline-flex items-center text-lg">
|
||||
Sign Up for $5,000/month <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
<a href="https://calendar.app.google/z1YsZQrqR4s6jQqD8" className="border border-white px-8 py-4 rounded-full font-medium hover:bg-white/10 inline-flex items-center text-lg">
|
||||
Schedule a Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicesPage;
|
||||
@@ -0,0 +1,440 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ArrowRight, Check } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
// Category interface
|
||||
interface Category {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
const SolutionsPage = () => {
|
||||
const [activeTab, setActiveTab] = useState<'capabilities' | 'industries'>('capabilities');
|
||||
|
||||
// Capabilities data
|
||||
const capabilities: Category[] = [
|
||||
{
|
||||
title: "Cloud",
|
||||
description: "Secure, scalable cloud solutions tailored to your business needs",
|
||||
icon: "☁️",
|
||||
link: "/capabilities/cloud"
|
||||
},
|
||||
{
|
||||
title: "Cybersecurity",
|
||||
description: "Protecting your digital assets with advanced security solutions",
|
||||
icon: "🔒",
|
||||
link: "/capabilities/cybersecurity"
|
||||
},
|
||||
{
|
||||
title: "Data and Artificial Intelligence",
|
||||
description: "Unleashing the power of your data with AI-driven insights",
|
||||
icon: "🧠",
|
||||
link: "/capabilities/data-ai"
|
||||
},
|
||||
{
|
||||
title: "Digital Engineering",
|
||||
description: "Building robust software solutions with cutting-edge technologies",
|
||||
icon: "⚙️",
|
||||
link: "/capabilities/digital-engineering"
|
||||
},
|
||||
{
|
||||
title: "Emerging Technology",
|
||||
description: "Harnessing next-generation technologies to drive innovation",
|
||||
icon: "🚀",
|
||||
link: "/capabilities/emerging-tech"
|
||||
},
|
||||
{
|
||||
title: "Finance and Risk Management",
|
||||
description: "Optimizing financial operations and mitigating risks",
|
||||
icon: "💰",
|
||||
link: "/capabilities/finance-risk"
|
||||
},
|
||||
{
|
||||
title: "Fractional CXO",
|
||||
description: "Executive leadership expertise when you need it most",
|
||||
icon: "👑",
|
||||
link: "https://sensei.group"
|
||||
}
|
||||
];
|
||||
|
||||
// Industries data
|
||||
const industries: Category[] = [
|
||||
{
|
||||
title: "Aerospace and Defense",
|
||||
description: "Advanced solutions for aerospace innovation and defense capabilities",
|
||||
icon: "✈️",
|
||||
link: "/industries/aerospace"
|
||||
},
|
||||
{
|
||||
title: "Automotive",
|
||||
description: "Driving digital transformation in the automotive industry",
|
||||
icon: "🚗",
|
||||
link: "/industries/automotive"
|
||||
},
|
||||
{
|
||||
title: "Banking",
|
||||
description: "Modernizing banking operations with digital-first solutions",
|
||||
icon: "🏦",
|
||||
link: "/industries/banking"
|
||||
},
|
||||
{
|
||||
title: "Capital Markets",
|
||||
description: "Optimizing trading and investment operations with technology",
|
||||
icon: "📈",
|
||||
link: "/industries/capital-markets"
|
||||
},
|
||||
{
|
||||
title: "Chemicals",
|
||||
description: "Digital transformation solutions for the chemical industry",
|
||||
icon: "🧪",
|
||||
link: "/industries/chemicals"
|
||||
},
|
||||
{
|
||||
title: "Communications and Media",
|
||||
description: "Innovative solutions for the evolving media landscape",
|
||||
icon: "📱",
|
||||
link: "/industries/communications"
|
||||
},
|
||||
{
|
||||
title: "Consumer Goods and Services",
|
||||
description: "Enhancing customer experience in the consumer goods sector",
|
||||
icon: "🛍️",
|
||||
link: "/industries/consumer"
|
||||
},
|
||||
{
|
||||
title: "Energy and Utilities",
|
||||
description: "Sustainable and efficient solutions for the energy sector",
|
||||
icon: "⚡",
|
||||
link: "/industries/energy"
|
||||
},
|
||||
{
|
||||
title: "Healthcare and Life Sciences",
|
||||
description: "Innovative technology solutions for healthcare providers",
|
||||
icon: "🩺",
|
||||
link: "/industries/healthcare"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-6">INDUSTRY-SPECIFIC EXPERTISE</h1>
|
||||
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
||||
Our specialized teams deliver tailored solutions for your unique business challenges across industries.
|
||||
</p>
|
||||
|
||||
<Link to="/login" className="bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-white/90 inline-flex items-center text-lg">
|
||||
Partner With Us <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs Section */}
|
||||
<div className="pb-20 border-b border-gray-800">
|
||||
<div className="container-custom">
|
||||
<div className="flex justify-center mb-12">
|
||||
<div className="bg-gray-900 p-1 rounded-full inline-flex">
|
||||
<button
|
||||
className={`px-8 py-3 rounded-full font-medium text-base transition-colors ${
|
||||
activeTab === 'capabilities' ? 'bg-white text-black' : 'text-white'
|
||||
}`}
|
||||
onClick={() => setActiveTab('capabilities')}
|
||||
>
|
||||
Capabilities
|
||||
</button>
|
||||
<button
|
||||
className={`px-8 py-3 rounded-full font-medium text-base transition-colors ${
|
||||
activeTab === 'industries' ? 'bg-white text-black' : 'text-white'
|
||||
}`}
|
||||
onClick={() => setActiveTab('industries')}
|
||||
>
|
||||
Industries
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'capabilities' ? (
|
||||
<div>
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl font-bold mb-4">Our Core Capabilities</h2>
|
||||
<p className="text-lg text-gray-300">
|
||||
Comprehensive expertise across key technology domains to solve your complex business challenges.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{capabilities.map((capability) => (
|
||||
<a
|
||||
href={capability.link}
|
||||
key={capability.title}
|
||||
className="bg-gray-900 rounded-lg p-8 border border-gray-800 hover:border-gray-700 transition-all group"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="text-3xl">{capability.icon}</div>
|
||||
<h3 className="text-xl font-bold group-hover:text-blue-400 transition-colors">{capability.title}</h3>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">{capability.description}</p>
|
||||
<div className="text-white group-hover:text-blue-400 inline-flex items-center transition-colors">
|
||||
Learn more <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl font-bold mb-4">Industries We Serve</h2>
|
||||
<p className="text-lg text-gray-300">
|
||||
Specialized solutions designed for the unique challenges of your industry.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{industries.map((industry) => (
|
||||
<a
|
||||
href={industry.link}
|
||||
key={industry.title}
|
||||
className="bg-gray-900 rounded-lg p-8 border border-gray-800 hover:border-gray-700 transition-all group"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="text-3xl">{industry.icon}</div>
|
||||
<h3 className="text-xl font-bold group-hover:text-blue-400 transition-colors">{industry.title}</h3>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">{industry.description}</p>
|
||||
<div className="text-white group-hover:text-blue-400 inline-flex items-center transition-colors">
|
||||
Learn more <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="py-20 bg-gradient-to-b from-black to-gray-900">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold mb-6">Why Choose Hanzo Solutions</h2>
|
||||
<p className="text-lg text-gray-300 mb-8">
|
||||
Our unique approach combines deep industry expertise with cutting-edge technology to deliver measurable results.
|
||||
</p>
|
||||
|
||||
<ul className="space-y-6">
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="bg-blue-600 p-2 rounded-lg mt-1">
|
||||
<Check className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-2">Industry Expertise</h3>
|
||||
<p className="text-gray-400">Our specialized teams understand the unique challenges in your industry.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="bg-blue-600 p-2 rounded-lg mt-1">
|
||||
<Check className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-2">AI-Powered Innovation</h3>
|
||||
<p className="text-gray-400">Cutting-edge AI technology integrated into all our solutions.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="bg-blue-600 p-2 rounded-lg mt-1">
|
||||
<Check className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-2">Measurable Results</h3>
|
||||
<p className="text-gray-400">Data-driven approaches that deliver clear ROI and business impact.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="bg-blue-600 p-2 rounded-lg mt-1">
|
||||
<Check className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-medium mb-2">Scalable Solutions</h3>
|
||||
<p className="text-gray-400">Our solutions grow with your business needs and adapt to market changes.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-xl overflow-hidden">
|
||||
<div className="p-1 bg-gradient-to-r from-blue-600 via-purple-600 to-emerald-600 rounded-xl">
|
||||
<div className="bg-gray-900 p-8 rounded-lg">
|
||||
<h3 className="text-2xl font-bold mb-6">Enterprise Solutions Package</h3>
|
||||
<div className="text-4xl font-bold mb-4">$5,000<span className="text-xl font-normal">/month</span></div>
|
||||
<p className="text-gray-300 mb-8">Comprehensive access to our full suite of capabilities and industry expertise.</p>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Dedicated team of industry experts</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>AI-powered solutions customized for your business</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Regular strategy sessions and success metrics</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Priority support and implementation</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<Check className="text-green-400 mt-1 flex-shrink-0" />
|
||||
<span>Quarterly business reviews and optimization</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link to="/login" className="block w-full bg-white text-black py-3 rounded-full text-center font-medium hover:bg-white/90 transition-colors">
|
||||
Get Started Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Case Studies Section */}
|
||||
<div className="py-20 bg-gray-900 border-t border-gray-800">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 className="text-4xl font-bold mb-4">Success Stories</h2>
|
||||
<p className="text-lg text-gray-300">
|
||||
See how our solutions have transformed businesses across industries.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-black p-6 rounded-lg border border-gray-800 overflow-hidden group">
|
||||
<div className="h-56 overflow-hidden rounded-lg mb-6 relative">
|
||||
<img
|
||||
src="/images/damon/cover.jpg"
|
||||
alt="Damon Motorcycles"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
|
||||
<div className="text-xl font-bold">Damon Motorcycles</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">
|
||||
AI-powered engineering solutions for next-generation electric motorcycles.
|
||||
</p>
|
||||
<div className="font-bold text-gray-300 mb-2">Results:</div>
|
||||
<ul className="text-sm text-gray-400 space-y-1 mb-6">
|
||||
<li>• 40% reduction in design iteration time</li>
|
||||
<li>• 25% increase in battery efficiency</li>
|
||||
<li>• Successful Series B funding round</li>
|
||||
</ul>
|
||||
<Link to="/case-study/damon" className="text-blue-400 hover:text-blue-300 inline-flex items-center">
|
||||
View case study <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-black p-6 rounded-lg border border-gray-800 overflow-hidden group">
|
||||
<div className="h-56 overflow-hidden rounded-lg mb-6 relative">
|
||||
<img
|
||||
src="/images/triller/cover.jpg"
|
||||
alt="Triller"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
|
||||
<div className="text-xl font-bold">Triller</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">
|
||||
Comprehensive digital transformation for social media platform growth.
|
||||
</p>
|
||||
<div className="font-bold text-gray-300 mb-2">Results:</div>
|
||||
<ul className="text-sm text-gray-400 space-y-1 mb-6">
|
||||
<li>• 3x increase in user engagement</li>
|
||||
<li>• 65% improvement in algorithm performance</li>
|
||||
<li>• Successful market positioning</li>
|
||||
</ul>
|
||||
<Link to="/case-study/triller" className="text-blue-400 hover:text-blue-300 inline-flex items-center">
|
||||
View case study <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-black p-6 rounded-lg border border-gray-800 overflow-hidden group">
|
||||
<div className="h-56 overflow-hidden rounded-lg mb-6 relative">
|
||||
<img
|
||||
src="/images/bellabeat/cover.jpg"
|
||||
alt="Bellabeat"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
|
||||
<div className="text-xl font-bold">Bellabeat</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">
|
||||
Health tech innovation through AI-powered solutions and data analysis.
|
||||
</p>
|
||||
<div className="font-bold text-gray-300 mb-2">Results:</div>
|
||||
<ul className="text-sm text-gray-400 space-y-1 mb-6">
|
||||
<li>• 45% improvement in user retention</li>
|
||||
<li>• 78% increase in health insights accuracy</li>
|
||||
<li>• Successful partnership expansions</li>
|
||||
</ul>
|
||||
<Link to="/case-study/bellabeat" className="text-blue-400 hover:text-blue-300 inline-flex items-center">
|
||||
View case study <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<Link to="/our-work" className="border border-white px-8 py-3 rounded-full font-medium hover:bg-white/10 inline-flex items-center">
|
||||
View All Case Studies <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="py-20 bg-black">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold mb-4">Ready to Transform Your Business?</h2>
|
||||
<p className="text-xl text-gray-300 mb-12">
|
||||
Join leading companies achieving remarkable results with our AI-powered solutions.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link to="/login" className="bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-white/90 inline-flex items-center text-lg">
|
||||
Get Started Today <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
<a href="https://calendar.app.google/z1YsZQrqR4s6jQqD8" className="border border-white px-8 py-4 rounded-full font-medium hover:bg-white/10 inline-flex items-center text-lg">
|
||||
Schedule a Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SolutionsPage;
|
||||
Reference in New Issue
Block a user