ServiceCard

# No additional dependencies required beyond Next.js and Tailwind

1import ServiceCard from './components/service-card';
2
3export default function ServicesPage() {
4    return (
5        <div className="grid md:grid-cols-3 gap-6">
6            <ServiceCard />
7        </div>
8    );
9}

1<div className="grid md:grid-cols-3 gap-6">
2    <ServiceCard
3        title="Mobile Development"
4        subtitle="iOS & Android"
5        description="Native and cross-platform mobile apps that deliver exceptional user experiences."
6        href="/services/mobile"
7        footerLinkLabel="View Projects"
8        imageSrc="/images/mobile-dev.jpg"
9        imageAlt="Mobile development illustration"
10    />
11
12    <ServiceCard
13        title="UI/UX Design"
14        subtitle="User-Centered"
15        description="Beautiful and intuitive designs that put your users first and drive conversions."
16        href="/services/design"
17        footerLinkLabel="See Portfolio"
18        imageSrc="/images/ui-design.jpg"
19        imageAlt="UI/UX design mockups"
20    />
21
22    <ServiceCard
23        title="Consulting"
24        subtitle="Strategic Planning"
25        description="Expert guidance to help your business make the right technology decisions."
26        href="/services/consulting"
27        footerLinkLabel="Book Call"
28        imageSrc="/images/consulting.jpg"
29        imageAlt="Business consulting meeting"
30    />
31</div>

1<div className="grid md:grid-cols-2 gap-6">
2    <ServiceCard
3        title="GitHub Repository"
4        subtitle="Open Source"
5        description="Check out our latest open source projects and contribute to the community."
6        href="https://github.com/yourorg"
7        footerLinkLabel="Visit GitHub"
8        openInNewTab={true}
9        imageSrc="/images/github.jpg"
10        imageAlt="GitHub profile"
11    />
12
13    <ServiceCard
14        title="Documentation"
15        subtitle="Developer Resources"
16        description="Comprehensive guides and API documentation for our services."
17        href="https://docs.yourcompany.com"
18        footerLinkLabel="Read Docs"
19        openInNewTab={true}
20        imageSrc="/images/documentation.jpg"
21        imageAlt="Documentation pages"
22    />
23</div>

1<ServiceCard
2    title="Data Analytics"
3    subtitle="Insights & Reporting"
4    description="Transform your data into actionable insights with our analytics platform."
5    href="/services/analytics"
6    imageSrc="" // Empty string shows placeholder
7    footerLinkLabel="Get Started"
8/>

1export default function ServicesSection() {
2    const services = [
3        {
4            title: 'E-commerce',
5            subtitle: 'Online Stores',
6            description:
7                'Custom online stores that convert visitors into customers.',
8            href: '/services/ecommerce',
9            imageSrc: '/images/ecommerce.jpg',
10        },
11        {
12            title: 'SEO Optimization',
13            subtitle: 'Search Rankings',
14            description:
15                'Improve your search engine visibility and organic traffic.',
16            href: '/services/seo',
17            imageSrc: '/images/seo.jpg',
18        },
19        {
20            title: 'Content Strategy',
21            subtitle: 'Brand Messaging',
22            description:
23                'Develop compelling content that resonates with your audience.',
24            href: '/services/content',
25            imageSrc: '/images/content.jpg',
26        },
27    ];
28
29    return (
30        <section className="py-16">
31            <div className="max-w-6xl mx-auto px-4">
32                <h2 className="text-3xl font-bold text-center mb-12">
33                    Our Services
34                </h2>
35                <div className="grid md:grid-cols-3 gap-6">
36                    {services.map((service, index) => (
37                        <ServiceCard
38                            key={index}
39                            title={service.title}
40                            subtitle={service.subtitle}
41                            description={service.description}
42                            href={service.href}
43                            imageSrc={service.imageSrc}
44                            imageAlt={`${service.title} service`}
45                        />
46                    ))}
47                </div>
48            </div>
49        </section>
50    );
51}

1// Responsive grid
2<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
3  {/* Service cards */}
4</div>
5
6// Equal height cards
7<div className="grid grid-cols-3 gap-6 auto-rows-fr">
8  {/* Cards will have equal heights */}
9</div>

1<ServiceCard
2    title="Web Development"
3    subtitle="Full-Stack"
4    description="Complete web solutions from front-end to back-end."
5    href="/services/web-dev"
6    imageAlt="Web development code on multiple screens" // Descriptive alt text
7    footerLinkLabel="View Web Services" // Clear action text
8/>