Skip to content

Commit

Permalink
Site overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
@tristanpoland
tristanpoland committed Jan 6, 2025
1 parent 13144ba commit 7e4d671
Show file tree
Hide file tree
Showing 8 changed files with 743 additions and 704 deletions.
101 changes: 80 additions & 21 deletions components/blocks/cta.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,86 @@
import React from 'react';
import { ArrowRight } from 'lucide-react';

const CallToAction: React.FC = () => {
const CallToAction = () => {
return (
<section className="py-32 px-4 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-purple-900/20 via-black to-blue-900/20" />
<div className="relative z-10 max-w-5xl mx-auto text-center">
<h2 className="text-5xl font-bold mb-10">
Ready to Transform Your
<span className="block mt-2 bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text pb-5">
Deployment Pipeline?
</span>
</h2>
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
Join thousands of companies that have already modernized their deployment infrastructure with OmniForge.
Start your journey today with our free tier.
</p>
<div className="flex gap-6 justify-center">
<button className="bg-gradient-to-r from-cyan-500 to-blue-500 px-10 py-5 rounded-lg font-semibold text-xl hover:opacity-90 transition-opacity">
Get satrted
</button>
<button className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 border border-gray-700 px-10 py-5 rounded-lg font-semibold text-xl hover:bg-gray-900 transition-colors">
View Demo
</button>
<section className="py-32 relative overflow-hidden">
{/* Dramatic background */}
<div className="absolute inset-0 bg-black">
{/* Glowing accent */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-50" />
<div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-50" />
</div>

<div className="max-w-[90rem] mx-auto px-4">
<div className="relative flex flex-col lg:flex-row items-center justify-between gap-12">
{/* Left side - Main content */}
<div className="flex-1 text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-400/30
bg-cyan-400/5 text-cyan-400 text-sm mb-8">
<span className="font-mono">Ready to start</span>
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
</div>

<h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
Deploy Faster.
<br />
<span className="text-cyan-400">Scale Smarter.</span>
</h2>

<p className="text-lg text-zinc-400 max-w-xl mb-8">
Join thousands of companies already using OmniForge to modernize their
deployment infrastructure. Get started free, scale as you grow.
</p>

{/* Prominent CTA buttons */}
<div className="flex flex-wrap items-center gap-4">
<button className="group flex items-center gap-2 px-8 py-4 bg-cyan-400 hover:bg-cyan-500
text-black font-medium transition-colors duration-200">
Get, it's open source!
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</button>

<a href="#" className="text-zinc-400 hover:text-white transition-colors">
View the Live Demo →
</a>
</div>
</div>

{/* Right side - Metrics grid */}
<div className="lg:w-[450px] grid grid-cols-2 gap-6">
{[
{ metric: "24MB", label: "RAM per Service", highlight: true },
{ metric: "99.9%", label: "System Uptime" },
{ metric: "<30s", label: "Deploy Time" },
{ metric: "100%", label: "Open Source" }
].map((item, index) => (
<div key={index}
className={`p-6 border rounded-sm ${
item.highlight
? 'border-cyan-400/30 bg-cyan-400/5'
: 'border-zinc-800 bg-black/30'
}`}>
<div className={`text-2xl font-mono mb-2 ${
item.highlight ? 'text-cyan-400' : 'text-white'
}`}>
{item.metric}
</div>
<div className="text-sm text-zinc-400">
{item.label}
</div>
</div>
))}
</div>
</div>

{/* Optional: Social proof or additional info */}
<div className="mt-16 pt-16 border-t border-zinc-800">
<div className="flex flex-wrap justify-center gap-x-12 gap-y-6 text-sm text-zinc-500">
<p>Trusted by Fortune 500 companies</p>
<p>Enterprise ready</p>
<p>24/7 Support available</p>
<p>SOC 2 Type II Certified</p>
</div>
</div>
</div>
</section>
Expand Down
204 changes: 66 additions & 138 deletions components/blocks/features.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,116 @@
"use client";

import React, { useState, useEffect } from 'react';
import { Cloud, Zap, Shield, Terminal, GitBranch, Network, Cpu, Activity, Settings } from 'lucide-react';
import React from 'react';
import { Zap, Cloud, Box, Cpu, GitBranch, Wrench } from 'lucide-react';

const features = [
// Row 1 - Main features (large cards)
{
icon: <Cloud className="w-8 h-8 text-cyan-400" />,
title: "Universal Deployment",
description: "Deploy seamlessly across public clouds, private infrastructure, or hybrid environments. Support for all major cloud providers and on-premises solutions.",
icon: <Zap className="w-6 h-6 text-cyan-400" />,
title: "Ultra-Light Runtime",
description: "Only 24MB RAM overhead per microservice",
detail: "Deploy more services on existing hardware without compromise. Industry-leading efficiency.",
area: "feat1",
className: "lg:col-span-3"
},
{
icon: <Cloud className="w-6 h-6 text-cyan-400" />,
title: "Universal Deployment",
description: "Deploy to any infrastructure",
detail: "Native support for major cloud providers, VMs (VirtualBox, VMware, OpenStack), and bare metal through simple JSON templates.",
area: "feat2",
className: "lg:col-span-2"
},
//{
// icon: <Shield className="w-8 h-8 text-cyan-400" />,
// title: "Enterprise Security",
// description: "Zero-trust architecture, RBAC, and comprehensive audit logging keep your deployments secure. Full compliance with SOC 2, HIPAA, and GDPR requirements.",
// area: "feat2",
// className: "lg:col-span-1"
//},
// Row 2 - Performance features
{
icon: <Zap className="w-8 h-8 text-cyan-400" />,
title: "Lightning Fast Performance",
description: "Optimized build and deployment pipeline delivers maximum speed and efficiency.",
icon: <Box className="w-6 h-6 text-cyan-400" />,
title: "Smart Build System",
description: "Automatic container optimization",
detail: "Leverages devcontainer features to create optimized base images without manual configuration.",
area: "feat3",
className: "lg:col-span-1"
},
{
icon: <Terminal className="w-8 h-8 text-cyan-400" />,
title: "Advanced CLI Tools",
description: "Powerful command-line interface enables streamlined workflows and automation.",
icon: <Cpu className="w-6 h-6 text-cyan-400" />,
title: "Multi-Runtime Support",
description: "Any Docker-compatible runtime",
detail: "Run workloads on any container runtime compatible with the Docker image standard.",
area: "feat4",
className: "lg:col-span-1"
},
{
icon: <GitBranch className="w-8 h-8 text-cyan-400" />,
title: "GitOps Ready",
description: "Native support for GitOps workflows and CI/CD integration with version control systems.",
icon: <GitBranch className="w-6 h-6 text-cyan-400" />,
title: "Rust-Powered Core",
description: "Built for reliability",
detail: "Get the security and efficiency benefits of a modern systems programming language.",
area: "feat5",
className: "lg:col-span-1"
},
// Row 3 - Infrastructure features (medium cards)
{
icon: <Network className="w-8 h-8 text-cyan-400" />,
title: "Service Mesh Integration",
description: "Built-in service mesh provides advanced networking, traffic management, and observability. Support for Istio, Linkerd, and custom implementations.",
icon: <Wrench className="w-6 h-6 text-cyan-400" />,
title: "Hardware Integration",
description: "Direct bare metal support",
detail: "Seamlessly mix cloud, VM, and physical hardware resources in your infrastructure.",
area: "feat6",
className: "lg:col-span-1"
},
{
icon: <Cpu className="w-8 h-8 text-cyan-400" />,
title: "Container Orchestration",
description: "Advanced container orchestration with support for Kubernetes, Docker Swarm, and custom schedulers.",
area: "feat7",
className: "lg:col-span-1"
},
// Row 4 - Operations features
{
icon: <Activity className="w-8 h-8 text-cyan-400" />,
title: "Real-time Monitoring",
description: "Comprehensive monitoring and alerting capabilities with custom dashboards.",
area: "feat8",
className: "lg:col-span-1"
},
{
icon: <Settings className="w-8 h-8 text-cyan-400" />,
title: "Automated Operations",
description: "Automate routine operations with self-healing infrastructure and predictive scaling.",
area: "feat9",
className: "lg:col-span-1"
}
];

interface Feature {
icon: JSX.Element;
title: string;
description: string;
area: string;
className: string;
}

const FeatureCard = ({ feature }: { feature: Feature }) => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [isHovered, setIsHovered] = useState(false);
const [supportsSpotlight, setSupportsSpotlight] = useState(true);

useEffect(() => {
// Check for Firefox
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
// Check for mobile
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768;

setSupportsSpotlight(!isFirefox && !isMobile);
setSupportsSpotlight(false);
}, []);

const handleMouseMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
if (!supportsSpotlight) return;

const rect = e.currentTarget.getBoundingClientRect();
setMousePosition({
x: e.clientX - rect.left,
y: e.clientY - rect.top
});
};

const FeatureCard = ({ feature }) => {
return (
<div
className={`group relative p-6 bg-gray-950/80 backdrop-blur-sm border border-gray-900
rounded-lg transition-all duration-300 overflow-hidden h-full ${feature.className}`}
onMouseMove={handleMouseMove}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={`group relative p-6 bg-black border border-zinc-800
rounded-sm transition-all duration-500 overflow-hidden h-full
hover:border-cyan-950 ${feature.className}`}
>
{/* Spotlight effect - only shown if supported */}
{supportsSpotlight && (
<div
className="absolute inset-0 transition-opacity duration-300 pointer-events-none"
style={{
opacity: isHovered ? 1 : 0,
background: `radial-gradient(200px circle at ${mousePosition.x}px ${mousePosition.y}px,
rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05) 40%, transparent 60%)`
}}
/>
)}

{/* Simplified hover effect for Firefox/mobile */}
{!supportsSpotlight && (
<div
className="absolute inset-0 transition-opacity duration-300 pointer-events-none"
style={{
opacity: isHovered ? 1 : 0,
background: 'linear-gradient(to bottom right, rgba(6, 182, 212, 0.05), rgba(167, 139, 250, 0.05))'
}}
/>
)}

{/* Border gradient */}
<div className="absolute inset-0 rounded-lg transition-opacity duration-300 pointer-events-none opacity-0 group-hover:opacity-100"
style={{
background: 'linear-gradient(to right, rgba(6, 182, 212, 0.1), rgba(167, 139, 250, 0.1))',
maskImage: 'linear-gradient(to bottom, transparent, black, transparent)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent, black, transparent)',
}}
/>
{/* Accent line */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent
opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

<div className="relative h-full flex flex-col">
<div className="flex items-center gap-4 mb-4">
<div className="p-2 rounded-lg bg-gray-900/50 backdrop-blur-xl">
{/* Header with icon */}
<div className="flex items-center gap-3 mb-3">
<div className="p-1.5 rounded bg-zinc-900 group-hover:bg-zinc-900/80
transition-colors duration-300">
{feature.icon}
</div>
<h3 className="text-lg font-semibold text-gray-200">
<h3 className="text-base font-medium text-white tracking-wide">
{feature.title}
</h3>
</div>
<p className="text-sm text-gray-400 leading-relaxed flex-grow">

{/* Feature highlight */}
<p className="text-lg font-semibold text-cyan-400 mb-3 tracking-tight">
{feature.description}
</p>

{/* Detailed description */}
<p className="text-sm text-zinc-400 leading-relaxed">
{feature.detail}
</p>
</div>
</div>
);
};

const Features = () => {
return (
<section className="py-32 px-4 bg-black relative">
{/* Subtle grid background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1a1a3f_1px,transparent_1px),linear-gradient(to_bottom,#1a1a3f_1px,transparent_1px)] bg-[size:2rem_2rem] opacity-20" />

<section className="py-24 px-4 bg-black relative">

<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-20">
<h2 className="text-4xl font-bold mb-6">
<span className="bg-gradient-to-r from-cyan-300 via-blue-400 to-violet-400 text-transparent bg-clip-text">
Everything You Need
</span>
</h2>
<p className="text-lg text-gray-400 max-w-2xl mx-auto">
OmniForge provides a complete platform for managing your entire deployment lifecycle,
from development to production at any scale.
<div className="text-center mb-16">
<div className="inline-block">
<p className="text-cyan-400 text-sm font-medium tracking-wider mb-2 uppercase">
Platform Features
</p>
<h2 className="text-3xl font-bold text-white mb-4">
Next-Generation Deployment Platform
</h2>
<div className="h-px w-full bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-30" />
</div>
<p className="text-zinc-400 max-w-2xl mx-auto mt-6">
Ultra-efficient deployment to any target - from public clouds to bare metal -
with minimal overhead and maximum flexibility.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
{features.map((feature, index) => (
<FeatureCard key={index} feature={feature} />
))}
Expand Down
Loading

0 comments on commit 7e4d671

Please sign in to comment.