chore: Update styles

Author: bdlukaa

example/lib/app.dart

@@ -11,27 +11,62 @@ class App extends StatelessComponent {
     return div(
       styles: Styles(
         display: Display.flex,
-        margin: Spacing.symmetric(horizontal: Unit.pixels(75)),
+        minHeight: Unit.vh(100),
         flexDirection: FlexDirection.column,
-        fontFamily: FontFamily.variable('Ink Free Regular'),
+        color: Color('#111827'),
+        fontFamily: FontFamily('Inter, system-ui, sans-serif'),
+        backgroundColor: Color('#f9fafb'),
       ),
       classes: 'main',
       [
-        h2(
+        header(
           styles: Styles(
-            width: Unit.percent(100),
-            margin: Spacing.symmetric(vertical: .pixels(20)),
-            flex: Flex.shrink(1),
+            padding: Spacing.symmetric(vertical: Unit.pixels(16)),
             textAlign: TextAlign.center,
           ),
-          [.text('Dart Romanize')],
-        ),
-        div(
-          styles: Styles(flex: Flex.grow(1)),
           [
-            const Home(),
+            h1(
+              styles: Styles(
+                margin: Spacing.zero,
+                color: Color('#111827'),
+                fontSize: Unit.rem(2),
+                fontWeight: FontWeight.w700,
+              ),
+              [
+                .text('Dart Romanize'),
+                p(
+                  styles: Styles(
+                    margin: Spacing.only(top: Unit.pixels(8)),
+                    color: Color('#6b7280'),
+                    fontSize: Unit.rem(1),
+                  ),
+                  [.text('Convert text to Romanized form instantly')],
+                ),
+              ],
+            ),
           ],
         ),
+        div(
+          styles: Styles(
+            width: Unit.percent(100),
+            maxWidth: Unit.pixels(1200),
+            padding: Spacing.all(Unit.pixels(32)),
+            margin: Spacing.symmetric(horizontal: Unit.auto),
+            flex: Flex.grow(1),
+          ),
+          [const Home()],
+        ),
+        footer(
+          styles: Styles(
+            padding: Spacing.all(Unit.pixels(16)),
+            border: Border.only(top: BorderSide(color: Color('#e5e7eb'))),
+            color: Colors.black.withOpacity(0.6),
+            textAlign: TextAlign.center,
+            fontSize: Unit.rem(0.875),
+            backgroundColor: Colors.white,
+          ),
+          [.text('Built with Jaspr & Romanize')],
+        ),
       ],
     );
   }

example/lib/pages/home.dart

@@ -16,46 +16,77 @@ class _HomeState extends State<Home> {
 
   @override
   Component build(BuildContext context) {
+    final textareaStyle = Styles(
+      width: Unit.percent(100),
+      height: Unit.pixels(300),
+      padding: Spacing.all(Unit.pixels(16)),
+      boxSizing: BoxSizing.borderBox,
+      border: Border.all(color: Color('#d1d5db')),
+      radius: BorderRadius.circular(Unit.pixels(25)),
+      outline: Outline.unset,
+      // fontFamily: FontFamily.monospace,
+      shadow: BoxShadow(
+        color: Color.rgba(0, 0, 0, 0.05),
+        blur: Unit.pixels(2),
+        offsetX: Unit.zero,
+        offsetY: Unit.pixels(1),
+      ),
+      // resize: Resize.none,
+      fontSize: Unit.rem(1),
+      backgroundColor: Colors.white,
+      raw: {
+        'resize': 'none',
+      },
+    );
+
+    final sectionStyle = Styles(
+      display: Display.flex,
+      // flexBasis: FlexBasis(Unit.pixels(400)),
+      flexDirection: FlexDirection.column,
+      gap: Gap.all(Unit.pixels(12)),
+      flex: Flex.grow(1),
+    );
+
+    final labelStyle = Styles(
+      margin: Spacing.zero,
+      color: Color('#374151'),
+      fontSize: Unit.rem(1.125),
+      fontWeight: FontWeight.w600,
+    );
+
     return div(
       styles: Styles(
         display: Display.flex,
-        padding: Spacing.all(Unit.pixels(20)),
-        flexDirection: FlexDirection.row,
-        alignItems: AlignItems.start,
-        gap: Gap(row: Unit.pixels(60), column: Unit.pixels(60)),
+        width: Unit.percent(100),
+        flexWrap: FlexWrap.wrap,
+        gap: Gap.all(Unit.pixels(32)),
       ),
       [
-        div(styles: Styles(flex: Flex.basis(Unit.percent(50))), [
-          h3([.text('Input')]),
+        div(styles: sectionStyle, [
+          h3(styles: labelStyle, [.text('Input')]),
           textarea(
             placeholder: 'Type your text here...',
             onInput: (text) => setState(() => _text = text),
             rows: 15,
             required: true,
             spellCheck: SpellCheck.isFalse,
-            styles: Styles(
-              width: Unit.percent(100),
-              height: Unit.percent(100),
-              flex: Flex.grow(1),
-              raw: {'resize': 'none'},
-            ),
+            styles: textareaStyle,
             [.text(_text)],
           ),
         ]),
-        div(styles: Styles(flex: Flex.basis(Unit.percent(50))), [
-          h3(styles: Styles(textAlign: TextAlign.left), [.text('Output')]),
+        div(styles: sectionStyle, [
+          h3(styles: labelStyle, [.text('Output')]),
           textarea(
             placeholder: 'Type your text here...',
-            onInput: (text) => setState(() => _text = text),
+            // onInput: (text) => setState(() => _text = text), // Readonly, no input needed
             rows: 15,
             readonly: true,
-            required: true,
             spellCheck: SpellCheck.isFalse,
-            styles: Styles(
-              width: Unit.percent(100),
-              height: Unit.percent(100),
-              flex: Flex.grow(1),
-              raw: {'resize': 'none'},
+            styles: textareaStyle.combine(
+              Styles(
+                color: Color('#4b5563'),
+                backgroundColor: Color('#f9fafb'),
+              ),
             ),
             [.text(_romanized)],
           ),