| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Our Work | True Color Printing</title> |
| | <link rel="stylesheet" href="assets/css/main.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet"> |
| | </head> |
| | <body class="font-sans"> |
| | |
| | <custom-header></custom-header> |
| |
|
| | |
| | <section class="bg-gradient-to-r from-[#ED008E] to-[#93268F] text-white py-20 px-4"> |
| | <div class="max-w-6xl mx-auto"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-4">Our Portfolio</h1> |
| | <p class="text-xl">See examples of our premium printing work</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-8 px-4 bg-gray-50"> |
| | <div class="max-w-6xl mx-auto"> |
| | <div class="flex flex-wrap gap-2 justify-center"> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-[#ED008E] text-white font-medium">All Work</button> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-white border border-gray-300 font-medium hover:bg-gray-100">Business Cards</button> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-white border border-gray-300 font-medium hover:bg-gray-100">Banners</button> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-white border border-gray-300 font-medium hover:bg-gray-100">Flyers</button> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-white border border-gray-300 font-medium hover:bg-gray-100">Stickers</button> |
| | <button class="portfolio-filter px-4 py-2 rounded-full bg-white border border-gray-300 font-medium hover:bg-gray-100">Signage</button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 px-4"> |
| | <div class="max-w-6xl mx-auto"> |
| | <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/1" alt="Business cards" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Premium Business Cards</h3> |
| | <p class="text-gray-600 mb-4">Gloss finish with spot UV coating</p> |
| | <a href="/services/business-cards" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/2" alt="Retail banners" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Retail Store Banners</h3> |
| | <p class="text-gray-600 mb-4">Large format vinyl banners</p> |
| | <a href="/services/banners-signage" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/3" alt="Event flyers" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Event Flyers</h3> |
| | <p class="text-gray-600 mb-4">Double-sided glossy flyers</p> |
| | <a href="/services/flyers" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/4" alt="Product stickers" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Product Stickers</h3> |
| | <p class="text-gray-600 mb-4">Waterproof vinyl stickers</p> |
| | <a href="/services/stickers" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/5" alt="Window decals" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Window Decals</h3> |
| | <p class="text-gray-600 mb-4">Perforated one-way vision</p> |
| | <a href="/services/vinyl-decals" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> |
| | |
| | <img src="http://static.photos/business/640x360/6" alt="Standing banners" class="w-full"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold mb-2">Standing Banners</h3> |
| | <p class="text-gray-600 mb-4">Retractable banner stands</p> |
| | <a href="/services/standing-banners" class="text-[#ED008E] font-medium hover:underline">View Service</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 px-4 bg-gray-50"> |
| | <div class="max-w-4xl mx-auto"> |
| | <h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2> |
| | <div class="grid md:grid-cols-2 gap-8"> |
| | <div class="bg-white p-8 rounded-lg shadow-sm"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 bg-gray-200 rounded-full mr-4 overflow-hidden"> |
| | |
| | <img src="http://static.photos/people/200x200/1" alt="Client"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Sarah Johnson</h4> |
| | <p class="text-gray-600 text-sm">Marketing Director, TechStart</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-700">"True Color Printing has been our go-to printer for all our marketing materials. The quality is consistently excellent and their turnaround times are unbeatable."</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-lg shadow-sm"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 bg-gray-200 rounded-full mr-4 overflow-hidden"> |
| | |
| | <img src="http://static.photos/people/200x200/2" alt="Client"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Michael Chen</h4> |
| | <p class="text-gray-600 text-sm">Owner, Bean There Café</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-700">"We ordered menus and promotional materials for our café. The team was incredibly helpful with the design and the final products looked amazing."</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 px-4 bg-gradient-to-r from-[#ED008E] to-[#93268F] text-white"> |
| | <div class="max-w-4xl mx-auto text-center"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to See What We Can Do for You?</h2> |
| | <p class="text-xl mb-8">Get a free quote on your next printing project.</p> |
| | <a href="/contact" class="inline-block bg-white text-[#ED008E] font-bold py-3 px-8 rounded-md hover:bg-opacity-90 transition">Get Started</a> |
| | </div> |
| | </section> |
| |
|
| | |
| | <custom-footer></custom-footer> |
| |
|
| | |
| | <script src="components/header.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="assets/js/main.js"></script> |
| | <script>feather.replace();</script> |
| | </body> |
| | </html> |
