DONE: Full typography

CHANGES: Everywhere change <span> labels to <Typography>
FIXED: Imports in SASS files

app/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
-import {Checkbox, Radio} from '../src/primitive-components/components';
+import { Checkbox } from '../src/primitive-components/components';
 import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
@@ -25,15 +25,22 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}>
+                <div
+                    style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
+                >
                     <Card variant={'outlined'}>
                         <CardHeader>
-                            <Typography.h3> Header-3 </Typography.h3>
+                            <Typography role={'headline'} size={'large'}>
+                                Welcome to Material You for Next.js!
+                            </Typography>
+                            <Typography role={'body'} size={'large'}>
+                                {"It's UI kit for fast frontend development!"}
+                            </Typography>
                         </CardHeader>
                         <CardActionArea>
                             <CardMedia src={testImage1.src} type={'img'} />
                             <CardBody>
-                                <p>
+                                <Typography role={'body'} size={'large'}>
                                     Lorem ipsum dolor sit amet, consecrate
                                     adipiscing elit, sed do eiusmod tempor
                                     incididunt ut labore et dolore magna aliqua.
@@ -45,7 +52,7 @@ export default function Page() {
                                     Excepteur sint occaecat cupidatat non
                                     proident, sunt in culpa qui officia deserunt
                                     mollit anim id est laborum.
-                                </p>
+                                </Typography>
                             </CardBody>
                         </CardActionArea>
                         <CardFooter>
@@ -73,7 +80,6 @@ export default function Page() {
                                     </SegmentButton>
                                 </SegmentedButtons>
                                 <Checkbox />
-                                <Radio />
                                 <Slider />
                             </div>
                         </CardFooter>