docs: refine titles

Author: huozhi

site/app/layout.tsx

@@ -18,8 +18,8 @@ export default function RootLayout({ children }) {
 }
 
 export const metadata = {
-  title: 'devjar',
-  description: 'live code runtime for your react project in browser',
+  title: 'Devjar',
+  description: 'Live React Component Previews in Browser',
   authors: [{ name: '@huozhi' }],
   openGraph: {
     images: 'https://repository-images.githubusercontent.com/483779830/28347c03-774a-4766-b113-54041fad1e72',

site/app/page.tsx

@@ -3,7 +3,6 @@ import { Codesandbox } from '../ui/codesandbox'
 const codeSample4 = {
   'index.js': `\
   import { useState } from 'react'
-
   import Text from './text'
   import './styles.css'
 
@@ -135,11 +134,13 @@ export default function App() {
 export default function Page() {
   return (
     <main>
-      <div>
+      <div className='titles'>
         <h1>Devjar</h1>
+        <h3>
+          Live React Component Previews in Browser
+        </h3>
         <p>
-          A live-code runtime for React, running directly in the browser. Perfect for interactive demos, documentation,
-          and real-time code previews. Simple to integrate and highly flexible for any React project.
+          Devjar lets you create interactive demos, enhance documentation, and deliver real-time code previews with ease. It's simple to integrate and highly adaptable for any React project.
         </p>
         <br />  
       </div>

site/styles.css

@@ -12,10 +12,11 @@ body {
   margin: 0;
   padding: 0 8px;
   max-width: 1260px;
+  margin: 0 auto;
+  width: 100vw;
 }
 main {
   min-width: 600px;
-  margin: 0 auto;
 }
 :root {
   --sh-class: #6f42c1;
@@ -143,5 +144,36 @@ textarea:focus-visible {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
   gap: 16px;
+  margin: 54px 0;
+}
+
+.titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 0;
+  line-height: 1.4;
+  width: 100%;
+  max-width: 680px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.titles h1 {
+  font-size: 52px;
+  margin: 0;
+}
 
+.titles h3 {
+  font-size: 32px;
+  color: #404756;
+  margin: 0;
+  padding: 8px 0;
+}
+
+.titles p {
+  font-size: 20px;
+  margin: 0;
+  padding: 8px 0;
 }