2025-08-20 04:12:49 -06:00

79 lines
2.9 KiB
TypeScript

// app/solutions/page.tsx
'use client';
import * as React from 'react';
import { ExternalLinkIcon } from 'lucide-react';
import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container, Section, Grid } from '@workspace/ui/components/layout';
import { FeatureGrid } from '@workspace/ui/components/content';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
import { Button } from '@workspace/ui/components/ui';
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now
// Mock data for Industries
const INDUSTRIES = [
{
icon: <PlaceholderIcon className="size-6" />,
title: "Technology",
description: "From SaaS startups to enterprise software, we help you scale efficiently without the cloud tax."
},
{
icon: <PlaceholderIcon className="size-6" />,
title: "Legal",
description: "Secure, private document management and collaboration environments with strict access controls."
},
{
icon: <PlaceholderIcon className="size-6" />,
title: "Medical",
description: "HIPAA-compliant infrastructure for storing, processing, and analyzing sensitive patient data."
},
{
icon: <PlaceholderIcon className="size-6" />,
title: "Media",
description: "High-bandwidth, low-latency solutions for content creation, storage, and distribution."
},
{
icon: <PlaceholderIcon className="size-6" />,
title: "Research",
description: "Powerful compute and storage for data-intensive scientific research and simulations."
}
];
export default function SolutionsPage() {
return (
<div className="flex flex-col min-h-screen">
<Navbar />
<Section className="flex-grow">
<Container>
<div className="text-center mb-12">
<h1 className="text-3xl md:text-4xl font-bold">Solutions by Industry</h1>
<p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
We tailor our approach to the unique challenges and requirements of your vertical.
</p>
</div>
<FeatureGrid features={INDUSTRIES} columns={{ initial: 1, sm: 2, md: 3 }} />
<Section background="muted" className="text-center mt-16">
<Container>
<h2 className="text-2xl font-bold mb-4">Don't see your industry?</h2>
<p className="mb-6 text-muted-foreground max-w-2xl mx-auto">
Our core principles apply broadly. Contact us to discuss how we can adapt our approach for your specific use case.
</p>
<Button asChild>
<a href="/contact">
Contact Us
<ExternalLinkIcon className="ml-2 size-4" />
</a>
</Button>
</Container>
</Section>
</Container>
</Section>
<Footer />
</div>
);
}