ADDED: Card sub-components

TODO: Complete styles for card sub-components and section button

app/page.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
+import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
 import { Button } from '../src/primitive-components/button-components/button/button';
-
-const cardStyles = { width: '256px', aspectRatio: 1 };
+import { CardHeader } from '../src/primitive-components/card/card-header';
+import { CardBody } from '../src/primitive-components/card/card-body';
+import { CardFooter } from '../src/primitive-components/card/card-footer';
 
 export default function Page() {
     return (
@@ -17,17 +20,36 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px' }}>
-                    <Card style={cardStyles} variant={'filled'}>
-                        <CardActionArea>
+                <div style={{ display: 'flex', gap: '8px', maxWidth: 512 }}>
+                    <Card variant={'outlined'}>
+                        <CardHeader>
                             <h1>Header</h1>
+                        </CardHeader>
+                        <CardActionArea>
+                            <CardMedia src={testImage1.src} type={'img'} />
+                            <CardBody>
+                                <h4>
+                                    <strong>Sub-header</strong>
+                                </h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consecrate
+                                    adipiscing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud
+                                    exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat. Duis aute irure
+                                    dolor in reprehenderit in voluptate velit
+                                    esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non
+                                    proident, sunt in culpa qui officia deserunt
+                                    mollit anim id est laborum.
+                                </p>
+                            </CardBody>
                         </CardActionArea>
-                        <div>
+                        <CardFooter>
                             <Button>label</Button>
-                        </div>
+                        </CardFooter>
                     </Card>
-                    <Card style={cardStyles} variant={'outlined'} />
-                    <Card style={cardStyles} variant={'elevated'} />
                 </div>
             </div>
         </main>