CHANGED: style and components directories, removed redundant imports from styles

ADDED: container and card component, card-subcomponents WIP

app/components/text-fields.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextField } from '../../src/primitive-components/text-field/text-field';
-import { Button } from '../../src/primitive-components/button/button';
+import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
+import { Button } from '../../src/primitive-components/button-components/button/button';
 
 export function TextFields() {
     return (

app/layout.tsx

@@ -1,3 +1,4 @@
+import '../src/styles/main.css';
 import '../src/styles/generics.css';
 import { Metadata, Viewport } from 'next';
 

app/page.tsx

@@ -1,26 +1,35 @@
-import React, { Fragment } from 'react';
-import { Button, Divider } from '../src/primitive-components/components';
+import React from 'react';
+import { Card } from '../src/primitive-components/card/card';
+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 };
 
 export default function Page() {
     return (
-        <Fragment>
-            <div className={'m3 m3-wrapper'}>
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'full-width'} />
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'inset'} />
-                <div>
-                    <Button>Label</Button>
-                </div>
-                <Divider orientation={'vertical'} variant={'middle-inset'} />
-                <div>
-                    <Button disabled>Label</Button>
+        <main>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ display: 'flex', gap: '8px' }}>
+                    <Card style={cardStyles} variant={'filled'}>
+                        <CardActionArea>
+                            <h1>Header</h1>
+                        </CardActionArea>
+                        <div>
+                            <Button>label</Button>
+                        </div>
+                    </Card>
+                    <Card style={cardStyles} variant={'outlined'} />
+                    <Card style={cardStyles} variant={'elevated'} />
                 </div>
             </div>
-        </Fragment>
+        </main>
     );
 }