83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { ExternalLink } from 'lucide-react';
|
|
|
|
const WebsiteScreenshots: React.FC = () => {
|
|
const websites = [
|
|
{
|
|
title: 'E-Commerce Platform',
|
|
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
|
|
url: '#',
|
|
description: 'Modern online store with seamless checkout'
|
|
},
|
|
{
|
|
title: 'Portfolio Website',
|
|
image: 'https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
|
|
url: '#',
|
|
description: 'Creative showcase for digital artists'
|
|
},
|
|
{
|
|
title: 'Business Landing Page',
|
|
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
|
|
url: '#',
|
|
description: 'Professional B2B service presentation'
|
|
},
|
|
{
|
|
title: 'Blog Platform',
|
|
image: 'https://images.unsplash.com/photo-1486312338219-ce68e2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
|
|
url: '#',
|
|
description: 'Content management system for writers'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-16 bg-background-light">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-text sm:text-4xl">
|
|
Website Screenshots
|
|
</h2>
|
|
<p className="mt-4 text-lg text-lines max-w-2xl mx-auto">
|
|
A glimpse of recent web development projects and designs
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{websites.map((website, index) => (
|
|
<div
|
|
key={website.title}
|
|
className="group bg-background rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-lines overflow-hidden"
|
|
>
|
|
<div className="relative overflow-hidden">
|
|
<img
|
|
className="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300"
|
|
src={website.image}
|
|
alt={`${website.title} screenshot`}
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-end p-2">
|
|
<a
|
|
href={website.url}
|
|
className="p-2 bg-boxes rounded-full hover:bg-other transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lines focus:ring-offset-2"
|
|
aria-label={`View ${website.title}`}
|
|
>
|
|
<ExternalLink className="h-4 w-4 text-text" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="text-sm font-semibold text-text mb-1">
|
|
{website.title}
|
|
</h3>
|
|
<p className="text-xs text-lines">
|
|
{website.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WebsiteScreenshots; |