pages/index.js - dev - deka/dber

pages/index.js
77 строк3 KB
Maxim Ratnikov
Перевод и переименование
03 окт 2024, 22:52
03 окт 2024, 22:5266088bf
import Head from 'next/head';
import Link from 'next/link';
import { Button, PageHeader, Space, Typography, Steps } from '@arco-design/web-react';
const Step = Steps.Step;
export default function Home() {
    return (
        <>
            <Head>
                <title>SBER</title>
                <meta
                    name="description"
                    content="Проектирование баз данных на базе ER диаграм в DBML"
                />
                <link rel="icon" href="/favicon.ico" />
                <style>{'body { overflow: auto !important; }'}</style>
            </Head>
            <div className="index-container">
                <PageHeader
                    style={{
                        background: 'var(--color-bg-2)',
                        position: 'sticky',
                        top: 0,
                        boxShadow: '1px 1px 1px rgba(0, 0, 0, 0.1)',
                        zIndex: 2,
                    }}
                    title="SBER"
                    subTitle="Проектирование баз данных на базе ER диаграм в DBML"
                    extra={
                        <Space>
                            <Link href="/graphs">
                                <Button type="primary">Начни тут.</Button>
                            </Link>
                        </Space>
                    }
                />
                <div className="index-bg">
                    <Typography.Title className="tc" type="secondary">
                        <p>Просто и легко</p>
                        <p className="mark">Проектирование баз данных и моделей данных</p>
                    </Typography.Title>
                    <Link href="/graphs">
                        <Button
                            type="primary"
                            size="large"
                            className="start-button"
                            style={{
                                fontSize: '2em',
                                height: 'auto',
                            }}
                        >
                            Начни тут
                        </Button>
                    </Link>
                </div>
                <div className="index-steps">
                    <Steps
                        labelPlacement="vertical"
                        current={5}
                        style={{
                            maxWidth: '1200px',
                            margin: '100px auto',
                        }}
                    >
                        <Step title="Проектируй структуры данных" description="Визуально" />
                        <Step title="Создавай связи" description="Drag and Drop" />
                        <Step title="Экспортируй в Wiki SQL DBML" description="Это просто" />
                    </Steps>
                </div>
                <div className="index-footer">
                    <div>
                        <strong>SBER</strong> | Проектирование баз данных на базе ER диаграм в DBML
                    </div>
                </div>
            </div>
        </>
    );
}