AlvSovereign · AlvSovereign · Dec 10, 2020 · Dec 10, 2020
diff --git a/packages/swl-web/.gitignore b/packages/swl-web/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/packages/swl-web/README.md b/packages/swl-web/README.md
@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/packages/swl-web/next-env.d.ts b/packages/swl-web/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/packages/swl-web/package.json b/packages/swl-web/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "swl-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.1.0",
+    "clsx": "^1.1.1",
+    "next": "10.0.3",
+    "postcss": "^8.2.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "tailwindcss": "^2.0.1"
+  },
+  "devDependencies": {
+    "typescript": "^4.1.2"
+  }
+}
diff --git a/packages/swl-web/pages/_app.tsx b/packages/swl-web/pages/_app.tsx
@@ -0,0 +1,13 @@
+import '../styles/globals.css';
+
+function App({ Component, pageProps }) {
+  return (
+    <>
+      <main className='relative'>
+        <Component {...pageProps} />
+      </main>
+    </>
+  );
+}
+
+export default App;
diff --git a/packages/swl-web/pages/api/hello.js b/packages/swl-web/pages/api/hello.js
@@ -0,0 +1,6 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default (req, res) => {
+  res.statusCode = 200
+  res.json({ name: 'John Doe' })
+}
diff --git a/packages/swl-web/pages/index.tsx b/packages/swl-web/pages/index.tsx
@@ -0,0 +1,16 @@
+import Head from 'next/head';
+import { Hero } from '../src/components';
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>
+          Sovereign Web Limited | We help you realise your digital experiences
+        </title>
+        <link rel='icon' href='/favicon.ico' />
+      </Head>
+      <Hero />
+    </div>
+  );
+}
diff --git a/packages/swl-web/postcss.config.js b/packages/swl-web/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/swl-web/src/components/Hero/Hero.tsx b/packages/swl-web/src/components/Hero/Hero.tsx
@@ -0,0 +1,52 @@
+import { FC } from 'react';
+import { Row } from '../';
+
+interface HeroProps {}
+
+const Hero: FC<HeroProps> = ({}) => {
+  return (
+    <Row
+      alignItems='center'
+      as='section'
+      className='bg-gray-900'
+      direction='col'
+      justifyContent='center'
+      withContainer={true}>
+      <div className='relative pt-6 pb-16 sm:pb-24'>
+        <div className='mt-16 mx-auto max-w-7xl px-4 sm:mt-24'>
+          <div className='text-center'>
+            <h1 className='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl'>
+              <span className='block xl:inline'>Data to enrich your</span>
+              <span className='block text-indigo-600 xl:inline'>
+                online business
+              </span>
+            </h1>
+            <p className='mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl'>
+              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+              lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
+              fugiat aliqua.
+            </p>
+            <div className='mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8'>
+              <div className='rounded-md shadow'>
+                <a
+                  href='#'
+                  className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10'>
+                  Get started
+                </a>
+              </div>
+              <div className='mt-3 rounded-md shadow sm:mt-0 sm:ml-3'>
+                <a
+                  href='#'
+                  className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10'>
+                  Live demo
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Row>
+  );
+};
+
+export default Hero;
diff --git a/packages/swl-web/src/components/index.ts b/packages/swl-web/src/components/index.ts
@@ -0,0 +1,6 @@
+import Hero from './Hero/Hero';
+
+import Container from './ui/Container/Container'
+import Row from './ui/Row/Row'
+
+export { Container, Hero, Row }
diff --git a/packages/swl-web/src/components/ui/Container/Container.tsx b/packages/swl-web/src/components/ui/Container/Container.tsx
@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface ContainerProps {
+  className?: string;
+  children: ReactNode;
+}
+
+const Container: FC<ContainerProps> = ({ className, children }) => {
+  return (
+    <div
+      className={clsx(
+        'container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8',
+        className
+      )}>
+      {children}
+    </div>
+  );
+};
+
+export default Container;
diff --git a/packages/swl-web/src/components/ui/Row/Row.tsx b/packages/swl-web/src/components/ui/Row/Row.tsx
@@ -0,0 +1,90 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { Container } from '../..';
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ResponsiveProps = Pick<Breakpoints, any>;
+type Alignment = 'center' | 'end' | 'inherit' | 'start' | ResponsiveProps;
+type Justify =
+  | 'around'
+  | 'between'
+  | 'center'
+  | 'inherit'
+  | 'start'
+  | ResponsiveProps;
+type Direction = 'col' | 'row' | 'row-reverse' | ResponsiveProps;
+
+interface RowProps {
+  alignItems: Alignment;
+  alignSelf?: Alignment;
+  as: any;
+  children: ReactNode;
+  className?: string;
+  containerClassName?: string;
+  direction: Direction;
+  id?: string;
+  justifyContent: Justify;
+  withContainer?: boolean;
+  wrap?: boolean;
+}
+
+const Row: FC<RowProps> = ({
+  alignItems,
+  alignSelf,
+  as = 'div',
+  children,
+  className,
+  containerClassName,
+  direction,
+  id,
+  justifyContent,
+  withContainer,
+  wrap,
+}) => {
+  const Component = as;
+
+  const createResponsiveClassName = (
+    breakpoints: Direction | Alignment,
+    partial: string
+  ) => {
+    if (typeof breakpoints === 'object') {
+      const className = Object.entries(breakpoints).map(
+        (entry) =>
+          `${entry[0] !== 'xs' ? `${entry[0]}:` : ''}${partial}${entry[1]}`
+      );
+      return className;
+    } else {
+      return `${partial}${breakpoints}`;
+    }
+  };
+
+  return (
+    <Component
+      className={clsx(
+        'flex',
+        {
+          'items-center': alignItems === 'center',
+          'items-end': alignItems === 'end',
+          'items-start': alignItems === 'start',
+          'justify-around': justifyContent === 'around',
+          'justify-between': justifyContent === 'between',
+          'justify-center': justifyContent === 'center',
+          'justify-start': justifyContent === 'start',
+          'flex-wrap': wrap,
+        },
+        direction && createResponsiveClassName(direction, 'flex-'),
+        alignSelf && createResponsiveClassName(alignSelf, 'self-'),
+        alignItems && createResponsiveClassName(alignItems, 'items-'),
+        className
+      )}
+      id={id}>
+      {withContainer ? (
+        <Container className={containerClassName}>{children}</Container>
+      ) : (
+        <>{children}</>
+      )}
+    </Component>
+  );
+};
+
+export default Row;
diff --git a/packages/swl-web/styles/globals.css b/packages/swl-web/styles/globals.css
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/packages/swl-web/tailwind.config.js b/packages/swl-web/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./pages/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/swl-web/tsconfig.json b/packages/swl-web/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />