# Split with photo and quote

> Reviews rotate over a photo, on a dark scrim.

URL: https://apogee.avaui.dev/docs/log-in-pages/split-photo-quote
Last updated: 2026-10-15

Reviews rotate over a photo, on a dark scrim.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/log-in/split-photo-quote

```astro
---
/**
 * Split with photo and quote: Reviews rotate over a photo, on a dark scrim.
 *
 * @page log-in
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Checkbox from '@/components/apogee/Checkbox/Checkbox.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Image from '@/components/apogee/Image/Image.astro'
import Carousel from '@/components/apogee/Carousel/Carousel.astro'

const reviews = [
  { quote: 'We moved our whole team over in an afternoon. Nobody has asked how to log in since.', name: 'Mara Okafor', role: 'Head of Operations, Oakmere' },
  { quote: 'Single sign-on took ten minutes to set up. Our security review took longer to schedule.', name: 'Jonas Weber', role: 'IT Lead, Fernhill' },
  { quote: 'The onboarding is so calm that our clients stopped sending us screenshots.', name: 'Ana Lima', role: 'Founder, Brightwell' },
]
---

<AuthShell layout="split" heading="Log in" description="Welcome back! Please enter your details.">
  <a slot="brand" href="#" class="flex items-center gap-2 font-semibold">
    <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
    Example
  </a>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Input label="Password" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
      <Checkbox label="Remember for 30 days" name="remember" />
      <Link href="#" underline="hover" class="text-sm font-semibold">Forgot password</Link>
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Sign in</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign in with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded">
    Don't have an account? <Link href="#" underline="hover" class="font-semibold">Sign up</Link>
  </p>
  <p slot="legal">© Example 2026</p>

  <div slot="panel" class="relative flex w-full items-end">
    <Image src="https://picsum.photos/seed/apogee-auth-2/1200/1600" alt="" width={1200} height={1600} fit="cover" class="absolute inset-0 size-full" />
    <!-- Scoped to the dark theme so the scrim and text stay readable over the photo in both themes. -->
    <div data-theme="dark" class="relative w-full bg-linear-to-t from-page/90 via-page/60 to-transparent px-12 pt-40 pb-12 text-neutral">
      <Carousel itemWidth="100%" controlsPosition="below" controlsVariant="overlay" label="Customer reviews">
        {reviews.map((r) => (
          <figure class="flex flex-col gap-6">
            <blockquote class="text-3xl font-medium text-balance">{r.quote}</blockquote>
            <figcaption class="flex flex-col gap-1">
              <p class="text-2xl font-semibold">{r.name}</p>
              <p class="text-neutral-faded">{r.role}</p>
            </figcaption>
          </figure>
        ))}
      </Carousel>
    </div>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add log-in/split-photo-quote
```

This copies the page to `src/components/apogee/pages/log-in/` with everything it uses: AuthShell (layout split), Image, Carousel. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the form fields carry visible labels and `autocomplete` hints, so password managers fill them.
-   The scrim and text are scoped to the dark theme (`data-theme="dark"`), so the quote stays readable over the photo in both themes.
-   The SSO button is a link to your identity provider; swap its `href` for your own.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.

](https://apogee.avaui.dev/docs/carousel)[

ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.

](https://apogee.avaui.dev/docs/image)[

RatingA star rating on native radios — pick a value on a scale, or display one read-only.

](https://apogee.avaui.dev/docs/rating)