Split Image And Details Layout

A two column layout pairing a project screenshot with details and a link beside it. Use it to present featured work with room for context and notes.

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowRight, Calendar, Users, Globe } from 'lucide-react';

export default function SplitImageAndDetailsLayout() {
  // Featured project data
  const featuredProject = {
    title: 'Financial Dashboard App',
    image:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    description:
      'Designed and developed a comprehensive financial dashboard application that helps users track investments, analyze spending patterns, and set financial goals. The project focused on data visualization and intuitive UX to make complex financial data accessible.',
    client: 'InvestTrack Inc.',
    role: 'UX/UI Designer & Frontend Developer',
    technologies: [
      'React',
      'D3.js',
      'TypeScript',
      'Styled Components',
      'Firebase',
    ],
    timeline: '4 months',
    year: '2023',
    link: '#',
  };

  // Second featured project (for demonstration)
  const secondProject = {
    title: 'Healthcare Patient Portal',
    image:
      'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    description:
      'Created a patient-centered healthcare portal that simplifies appointment scheduling, medical record access, and communication with healthcare providers. The design prioritizes accessibility and ease of use for users of all ages and abilities.',
    client: 'MediCare Health Network',
    role: 'Lead Designer',
    technologies: ['Figma', 'Vue.js', 'Tailwind CSS', 'Node.js', 'MongoDB'],
    timeline: '6 months',
    year: '2022',
    link: '#',
  };

  const projects = [featuredProject, secondProject];

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        {/* Section Header */}
        <div className="mb-12 text-center md:mb-16">
          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Featured Work
          </h2>
          <p className="text-muted-foreground mx-auto max-w-3xl text-lg">
            Highlighting selected projects that showcase my expertise and
            creative problem-solving approach.
          </p>
        </div>

        {/* Projects */}
        <div className="space-y-24">
          {projects.map((project, index) => (
            <div
              key={index}
              className={`grid gap-8 lg:grid-cols-2 lg:gap-12 ${
                index % 2 === 1 ? 'md:grid-flow-dense' : ''
              }`}
            >
              {/* Project Image */}
              <div className={`${index % 2 === 1 ? 'lg:col-start-2' : ''}`}>
                <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="object-cover transition-transform duration-500 hover:scale-105"
                  />
                </div>
              </div>

              {/* Project Details */}
              <div className="flex flex-col justify-center">
                <div className="mb-4 flex flex-wrap gap-2">
                  {project.technologies.slice(0, 3).map((tech, index) => (
                    <Badge key={index} variant="secondary">
                      {tech}
                    </Badge>
                  ))}
                </div>

                <h3 className="mb-4 text-2xl font-bold sm:text-3xl">
                  {project.title}
                </h3>

                <p className="text-muted-foreground mb-6">
                  {project.description}
                </p>

                {/* Project Metadata */}
                <div className="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
                  <div className="flex items-center gap-2">
                    <Globe className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">
                      <span className="text-muted-foreground">Client: </span>
                      <span className="font-medium">{project.client}</span>
                    </span>
                  </div>

                  <div className="flex items-center gap-2">
                    <Users className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">
                      <span className="text-muted-foreground">Role: </span>
                      <span className="font-medium">{project.role}</span>
                    </span>
                  </div>

                  <div className="flex items-center gap-2">
                    <Calendar className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">
                      <span className="text-muted-foreground">Year: </span>
                      <span className="font-medium">{project.year}</span>
                    </span>
                  </div>
                </div>

                <Button asChild className="mt-2 w-fit">
                  <a href={project.link}>
                    View Project <ArrowRight className="ml-2 h-4 w-4" />
                  </a>
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

About this block

Split Image And Details Layout opens with a centered heading and a short supporting sentence, then renders a vertical stack of project entries spaced well apart. Each entry is a two column grid: a 4:3 image on one side and a details panel on the other. Odd numbered entries flip the image to the right so the layout alternates across the page. The details panel holds a row of technology badges, a project title, a description paragraph, a three cell metadata strip showing client, role, and year, and a call to action button that links to the full project.

The section header copy, the number of project entries, the badge list, and every metadata field are all independent. You can add or remove entries, swap in different badge labels, trim the metadata strip to fewer cells, or drop the description to a shorter summary without affecting the surrounding structure.

When to use

Reach for this block when you want to present two or three flagship projects with enough room to explain the context behind each one. It suits a portfolio home page or a dedicated featured work section for an AI assistant product where the buyer wants to see both the visual output and the specifics: who the client was, what role you played, and when it shipped. The alternating image placement keeps the page visually varied across multiple entries in a way that a plain card grid or a carousel cannot match.

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce yourself and set the tone before the work examples begin
About And Skills to give visitors quick context on your background before they scan the projects

After

Case Studies to continue the narrative for readers who want a deeper dive into one project
Quote And Feedback to follow the work examples with client voices that reinforce the quality

What you can display

Each entry pairs one strong project image with structured detail, making it well suited for work where context matters as much as the visual. A few ways to use the frame:

AI product builds. Show a screenshot of a shipped assistant or dashboard alongside the client name, your role as prompt engineer or designer, and the timeline from brief to launch.
Client work across disciplines. Mix design, development, and strategy projects in the same list; the badge row lets you signal the distinct skill set used on each one.
Side projects and open source. Replace the client field with the platform or community it was built for to give personal work the same structured treatment as paid engagements.

Tip: limit each technology badge row to three items so the panel stays balanced with the image and the metadata strip stays easy to scan.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Hero Showcases to introduce yourself and set the tone before the work examples begin
About And Skills to give visitors quick context on your background before they scan the projects

After

Case Studies to continue the narrative for readers who want a deeper dive into one project
Quote And Feedback to follow the work examples with client voices that reinforce the quality

What you can display

Each entry pairs one strong project image with structured detail, making it well suited for work where context matters as much as the visual. A few ways to use the frame:

AI product builds. Show a screenshot of a shipped assistant or dashboard alongside the client name, your role as prompt engineer or designer, and the timeline from brief to launch.
Client work across disciplines. Mix design, development, and strategy projects in the same list; the badge row lets you signal the distinct skill set used on each one.
Side projects and open source. Replace the client field with the platform or community it was built for to give personal work the same structured treatment as paid engagements.

Tip: limit each technology badge row to three items so the panel stays balanced with the image and the metadata strip stays easy to scan.

Split Image And Details Layout

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display