material-you-react/app/page.tsx

import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { Slider } from '../src/primitive-components/input-components/slider/slider';

export default function Page() {
    return (
        <main
            style={{
                display: 'flex',
                maxHeight: '256px',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <Card
                style={{
                    display: 'flex',
                    maxWidth: '256px',
                    minHeight: '256px',
                    alignItems: 'flex-end',
                    justifyContent: 'center',
                }}
                variant={'outlined'}
            >
                <CardFooter>
                    <Slider />
                </CardFooter>
            </Card>
        </main>
    );
}