81 lines
4.1 KiB
JavaScript
81 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export const TemplatePreview = ({ templateType }) => {
|
|
// Template information for different types
|
|
const templateInfo = {
|
|
developer: {
|
|
name: "Developer Portfolio",
|
|
description: "A modern, responsive portfolio site with sections for projects, skills, and contact information. Perfect for developers to showcase their work.",
|
|
features: ["Project showcase", "Skills section", "GitHub integration", "Contact form", "Blog ready"],
|
|
image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80"
|
|
},
|
|
designer: {
|
|
name: "Designer Portfolio",
|
|
description: "A visually stunning portfolio for designers with image galleries, case studies, and animations to showcase creative work.",
|
|
features: ["Visual gallery", "Case studies", "Color scheme customization", "Smooth animations", "Design process showcase"],
|
|
image: "https://images.unsplash.com/photo-1561070791-2526d30994b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
|
|
},
|
|
photographer: {
|
|
name: "Photographer Portfolio",
|
|
description: "An elegant portfolio with fullscreen galleries, image zooming, and lightbox features designed for photographers to display their work.",
|
|
features: ["Fullscreen galleries", "Image zoom", "Lightbox", "Category filtering", "Client proofing"],
|
|
image: "https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
|
|
},
|
|
documentation: {
|
|
name: "Documentation Site",
|
|
description: "A comprehensive documentation site with search, code snippets, and versioning support for technical documentation.",
|
|
features: ["Search functionality", "Code snippets with syntax highlighting", "Versioning", "Sidebar navigation", "Mobile-friendly"],
|
|
image: "https://images.unsplash.com/photo-1456406644174-8ddd4cd52a06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80"
|
|
},
|
|
business: {
|
|
name: "Single Page Business Site",
|
|
description: "A professional one-page website for businesses with sections for services, testimonials, team members, and contact information.",
|
|
features: ["Single page layout", "Services section", "Testimonials", "Team profiles", "Contact form with map"],
|
|
image: "https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80"
|
|
}
|
|
};
|
|
|
|
const template = templateInfo[templateType] || templateInfo.developer;
|
|
|
|
return (
|
|
<div className="mt-6 bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
|
{/* Template preview image */}
|
|
<div className="relative h-48 overflow-hidden">
|
|
<img
|
|
src={template.image}
|
|
alt={`${template.name} Preview`}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
|
|
<div className="p-4">
|
|
<h3 className="text-xl font-semibold text-white">{template.name}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Template details */}
|
|
<div className="p-5 space-y-4">
|
|
<p className="text-neutral-300">{template.description}</p>
|
|
|
|
<div>
|
|
<h4 className="text-white font-medium mb-2">Features:</h4>
|
|
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{template.features.map((feature, index) => (
|
|
<li key={index} className="text-neutral-400 flex items-center">
|
|
<span className="mr-2 text-[#6d9e37]">✓</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<button className="px-4 py-2 bg-[#6d9e37] text-white rounded-md hover:bg-[#598035] transition-colors w-full">
|
|
Select This Template
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|