spectrum-infinite / index.html
SpectrumInfinite's picture
Add 2 files
1298b28 verified
Raw History Blame Contribute Delete
43.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrintPerfect | Production-Ready Artwork Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
.slide-up {
animation: slideUp 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pricing-card:hover {
transform: scale(1.03);
}
.pricing-popular {
position: relative;
border: 2px solid #7c3aed;
}
.pricing-popular::before {
content: "Most Popular";
position: absolute;
top: -12px;
right: 20px;
background: #7c3aed;
color: white;
padding: 2px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.feature-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
margin-bottom: 15px;
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #7c3aed;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50 fade-in">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-paint-brush text-indigo-600 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">PrintPerfect</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#services" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#why-us" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Why Us</a>
<a href="#pricing" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#testimonials" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Results</a>
<a href="#contact" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">Get Started</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-500 hover:text-gray-900 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white slide-up">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-bold mb-6">Production-Ready Artwork That Prints Perfectly—Every Time</h1>
<p class="text-lg md:text-xl mb-8 opacity-90">Skip the file format headaches, eliminate costly print errors, and get flawless, production-ready designs—every single time.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300 text-center">Get Started Today</a>
<a href="#services" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">Our Services</a>
</div>
</div>
<div class="hidden md:block">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Printing process" class="rounded-xl shadow-2xl border-4 border-white">
</div>
</div>
</div>
</section>
<!-- Problem Section -->
<section class="py-16 bg-white slide-up" id="why-us">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Why Most Print & Promo Artwork Fails</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Bad artwork isn't just frustrating—it's expensive. Here's how we fix the common problems.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div>
<div class="bg-red-50 p-6 rounded-xl">
<div class="flex items-center mb-4">
<div class="bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-times-circle text-red-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">The Pain Points</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-times text-red-500 mt-1 mr-3"></i>
<span class="text-gray-700">Designs that aren't print-ready (blurry, wrong resolution)</span>
</li>
<li class="flex items-start">
<i class="fas fa-times text-red-500 mt-1 mr-3"></i>
<span class="text-gray-700">Inconsistent branding (colors don't match, logos look off)</span>
</li>
<li class="flex items-start">
<i class="fas fa-times text-red-500 mt-1 mr-3"></i>
<span class="text-gray-700">Freelancers who miss deadlines or don't understand print formats</span>
</li>
<li class="flex items-start">
<i class="fas fa-times text-red-500 mt-1 mr-3"></i>
<span class="text-gray-700">Agencies that charge too much for simple fixes</span>
</li>
</ul>
</div>
</div>
<div>
<div class="bg-green-50 p-6 rounded-xl">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-2 rounded-full mr-4">
<i class="fas fa-check-circle text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Our Solutions</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Perfectly formatted, print-ready files—no revisions needed</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Lightning-fast turnarounds that meet your deadlines</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Customizable templates for bulk order consistency</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Files that work for screen printing, embroidery, and promotional products</span>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#contact" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-indigo-700 transition duration-300">Let's Get It Right the First Time</a>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-16 bg-gray-50 slide-up" id="services">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Production-Ready Artwork Services</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Specialized solutions for flawless printing every time</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
<div class="feature-icon bg-indigo-100 text-indigo-600">
<i class="fas fa-vector-square text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Print-Ready Vector Art</h3>
<p class="text-gray-600 mb-4">Convert your designs into crisp, scalable vector artwork built for screen printing, embroidery, and promotional products.</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
<span>Perfect alignment with no loss of detail</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
<span>High-quality, professional consistency</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
<span>Artwork that looks good on any material</span>
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
<div class="feature-icon bg-purple-100 text-purple-600">
<i class="fas fa-tshirt text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Custom Design Services</h3>
<p class="text-gray-600 mb-4">Specialized designs optimized for real-world printing on fabric, mugs, packaging, and more.</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
<span>T-Shirt & apparel graphics</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
<span>Production-ready illustrations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
<span>Vector art for screen printing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
<span>Logo design for promotional merch</span>
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 card-hover">
<div class="feature-icon bg-blue-100 text-blue-600">
<i class="fas fa-bolt text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Fast Artwork Solutions</h3>
<p class="text-gray-600 mb-4">Printing is unforgiving—we ensure your artwork is production-ready from the start.</p>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Fast turnarounds to meet deadlines</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Print-compatible files for perfect results</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Budget-friendly without sacrificing quality</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
<span>Consistent branding across all products</span>
</li>
</ul>
</div>
</div>
<div class="text-center mt-12">
<a href="#contact" class="inline-block bg-indigo-600 text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-indigo-700 transition duration-300">Get Designs That Actually Work</a>
</div>
</div>
</section>
<!-- Results Section -->
<section class="py-16 bg-white slide-up" id="testimonials">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Real Results, Proven Impact</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Don't just take our word for it—see what our clients say</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-6 rounded-xl testimonial-card">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
<p class="text-sm text-gray-500">Promo Products Manufacturer</p>
</div>
</div>
<p class="text-gray-700 mb-4">"Our print accuracy improved by 90% after switching to PrintPerfect. No more rejected files or unhappy clients!"</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-6 rounded-xl testimonial-card">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold text-gray-900">Michael Chen</h4>
<p class="text-sm text-gray-500">E-commerce Brand Owner</p>
</div>
</div>
<p class="text-gray-700 mb-4">"Our product return rate dropped by 40% when we started using PrintPerfect's artwork services. The quality difference is night and day."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-6 rounded-xl testimonial-card">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-semibold text-gray-900">Emily Rodriguez</h4>
<p class="text-sm text-gray-500">Print Shop Owner</p>
</div>
</div>
<p class="text-gray-700 mb-4">"We've reduced our artwork-related errors to zero and saved thousands in reprint costs. PrintPerfect is now our go-to partner."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<div class="bg-indigo-50 rounded-xl p-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Our Production-Ready Artwork Has Helped:</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
<span>Promotional product manufacturers achieve higher print accuracy</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
<span>E-commerce brands boost product image quality for better conversions</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-500 mt-1 mr-3"></i>
<span>Print businesses reduce errors, save time, and increase customer satisfaction</span>
</li>
</ul>
</div>
<div class="text-center">
<img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Printing results" class="rounded-lg shadow-md inline-block">
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-16 bg-gray-50 slide-up" id="pricing">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Choose the plan that fits your needs</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Basic Plan -->
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 pricing-card">
<h3 class="text-xl font-bold text-gray-900 mb-2">Basic</h3>
<p class="text-3xl font-bold text-indigo-600 mb-4">$97<span class="text-lg font-normal text-gray-500">/month</span></p>
<ul class="space-y-3 text-gray-700 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>15 Artwork Pieces Per Month</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Vector Redraws</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Virtual Mockups</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Photo Editing</span>
</li>
<li class="flex items-start text-gray-400">
<i class="fas fa-times mt-1 mr-2"></i>
<span>Flyer Design</span>
</li>
<li class="flex items-start text-gray-400">
<i class="fas fa-times mt-1 mr-2"></i>
<span>Website Graphics</span>
</li>
</ul>
<a href="#contact" class="block text-center bg-gray-100 text-gray-800 px-4 py-3 rounded-md font-medium hover:bg-gray-200 transition duration-300">Get Started</a>
</div>
<!-- Standard Plan -->
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 pricing-card">
<h3 class="text-xl font-bold text-gray-900 mb-2">Standard</h3>
<p class="text-3xl font-bold text-indigo-600 mb-4">$297<span class="text-lg font-normal text-gray-500">/month</span></p>
<ul class="space-y-3 text-gray-700 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>30 Artwork Pieces Per Month</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Vector Redraws</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Virtual Mockups</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Photo Editing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Flyer Design</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Website Graphic</span>
</li>
</ul>
<a href="#contact" class="block text-center bg-indigo-600 text-white px-4 py-3 rounded-md font-medium hover:bg-indigo-700 transition duration-300">Get Started</a>
</div>
<!-- Popular Plan -->
<div class="bg-white p-6 rounded-xl shadow-lg pricing-card pricing-popular">
<h3 class="text-xl font-bold text-gray-900 mb-2">Premium</h3>
<p class="text-3xl font-bold text-indigo-600 mb-4">$497<span class="text-lg font-normal text-gray-500">/month</span></p>
<ul class="space-y-3 text-gray-700 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>30-40 Artwork Pieces Per Month</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Vector Redraws</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Virtual Mockups</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Photo Editing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Flyer Design</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Website Graphic</span>
</li>
</ul>
<a href="#contact" class="block text-center bg-indigo-600 text-white px-4 py-3 rounded-md font-medium hover:bg-indigo-700 transition duration-300">Get Started</a>
</div>
<!-- Premium Plan -->
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 pricing-card">
<h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
<p class="text-3xl font-bold text-indigo-600 mb-4">$837<span class="text-lg font-normal text-gray-500">/month</span></p>
<ul class="space-y-3 text-gray-700 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>50-70 Artwork Pieces Per Month</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Vector Redraws</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Virtual Mockups</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Photo Editing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Flyer Design</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>1 Website Graphic</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>High-End Design Work</span>
</li>
</ul>
<a href="#contact" class="block text-center bg-gray-100 text-gray-800 px-4 py-3 rounded-md font-medium hover:bg-gray-200 transition duration-300">Get Started</a>
</div>
</div>
<div class="text-center mt-8">
<p class="text-gray-600">No contracts or commitments. Cancel anytime.</p>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-indigo-600 text-white slide-up">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Stop Worrying About Artwork Errors?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">You've got enough to handle—your artwork shouldn't be another thing to stress about.</p>
<a href="#contact" class="inline-block bg-white text-indigo-600 px-8 py-4 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">Request a Free Consultation</a>
</div>
</section>
<!-- Contact Section -->
<section class="py-16 bg-white slide-up" id="contact">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Let's Get Your Artwork Ready</h2>
<p class="text-lg text-gray-600 mb-8">Fill out the form and we'll get back to you within 24 hours with a quote and next steps.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-indigo-600"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900">Phone</h4>
<p class="text-gray-600">(555) 123-4567</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-indigo-600"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900">Email</h4>
<p class="text-gray-600">hello@printperfect.com</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-clock text-indigo-600"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900">Hours</h4>
<p class="text-gray-600">Monday - Friday: 9am - 6pm EST</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md">
<form>
<div class="grid grid-cols-1 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Needed</label>
<select id="service" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
<option>Select a service</option>
<option>Vector Art Conversion</option>
<option>Custom Design</option>
<option>Artwork Cleanup</option>
<option>Print-Ready Files</option>
<option>Other</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Project Details</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
</div>
<div>
<button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-indigo-700 transition duration-300">Submit Request</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 slide-up">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<i class="fas fa-paint-brush text-indigo-400 text-2xl mr-2"></i>
<span class="text-xl font-bold">PrintPerfect</span>
</div>
<p class="text-gray-400 mb-4">Production-ready artwork that prints perfectly—every time.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Vector Art Conversion</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Custom Design</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Artwork Cleanup</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Print-Ready Files</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mockups</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Our Process</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Case Studies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Printing Guides</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">File Requirements</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Support</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 PrintPerfect. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
// Simple animation observer
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.slide-up');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-slide-up');
}
});
}, {
threshold: 0.1
});
sections.forEach(section => {
observer.observe(section);
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SpectrumInfinite/spectrum-infinite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>