diff --git a/compass/app/favicon.ico b/compass/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/compass/app/favicon.ico and /dev/null differ diff --git a/compass/app/globals.css b/compass/app/globals.css deleted file mode 100644 index fd81e88..0000000 --- a/compass/app/globals.css +++ /dev/null @@ -1,27 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} diff --git a/compass/app/layout.tsx b/compass/app/layout.tsx deleted file mode 100644 index 40e027f..0000000 --- a/compass/app/layout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' -import './globals.css' - -const inter = Inter({ subsets: ['latin'] }) - -export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - {children} - - ) -} diff --git a/compass/app/page.tsx b/compass/app/page.tsx deleted file mode 100644 index 7a8286b..0000000 --- a/compass/app/page.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import Image from 'next/image' - -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) -} diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx new file mode 100644 index 0000000..4552e14 --- /dev/null +++ b/compass/components/Button.tsx @@ -0,0 +1,22 @@ +import { FunctionComponent, ReactNode } from 'react'; + +type ButtonProps = { + children: ReactNode; + onClick?: () => void; // make the onClick handler optional +}; + +const Button: FunctionComponent = ({ children, onClick }) => { + return ( + + ); +}; +export default Button; diff --git a/compass/components/InlineLink.tsx b/compass/components/InlineLink.tsx new file mode 100644 index 0000000..a913ff4 --- /dev/null +++ b/compass/components/InlineLink.tsx @@ -0,0 +1,16 @@ +import React, { ReactNode } from 'react'; + +interface Link { + href?: string; + children: ReactNode; +} + +const InlineLink: React.FC = ({href = '#', children}) => { + return ( + + {children} + + ) +} + +export default InlineLink; \ No newline at end of file diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx new file mode 100644 index 0000000..eace6b4 --- /dev/null +++ b/compass/components/Input.tsx @@ -0,0 +1,27 @@ +import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react'; + +type InputProps = InputHTMLAttributes & { + icon?: ReactNode; +}; + +const Input: FunctionComponent = ({ icon, ...rest }) => { + return ( +
+ {icon && {icon}} + +
+ ); +}; + +export default Input; diff --git a/compass/package.json b/compass/package.json index 55d0404..af34787 100644 --- a/compass/package.json +++ b/compass/package.json @@ -9,19 +9,19 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", - "react-dom": "^18", - "next": "13.5.6" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", + "eslint": "^8", + "eslint-config-next": "13.5.6", "postcss": "^8", "tailwindcss": "^3", - "eslint": "^8", - "eslint-config-next": "13.5.6" + "typescript": "^5" } } diff --git a/compass/pages/_app.tsx b/compass/pages/_app.tsx new file mode 100644 index 0000000..4642da1 --- /dev/null +++ b/compass/pages/_app.tsx @@ -0,0 +1,8 @@ +import '../styles/globals.css'; +import type { AppProps } from 'next/app'; + +function MyApp({ Component, pageProps }: AppProps) { + return ; +} + +export default MyApp; \ No newline at end of file diff --git a/compass/pages/index.tsx b/compass/pages/index.tsx new file mode 100644 index 0000000..cdd051b --- /dev/null +++ b/compass/pages/index.tsx @@ -0,0 +1,41 @@ +// pages/index.tsx + +import Button from '@/components/Button'; +import type { NextPage } from 'next'; +import Head from 'next/head'; +import Input from '@/components/Input' +import InlineLink from '@/components/InlineLink'; + +const Home: NextPage = () => { + return ( +
+
+
+ + +
+
+ + +
+
+ + + Forgot password? + +
+
+

+ ©2024 Compass Center +

+
+ ); +}; + +export default Home; diff --git a/compass/public/fonts/Inter-Black.ttf b/compass/public/fonts/Inter-Black.ttf new file mode 100644 index 0000000..b27822b Binary files /dev/null and b/compass/public/fonts/Inter-Black.ttf differ diff --git a/compass/public/fonts/Inter-Bold.ttf b/compass/public/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..fe23eeb Binary files /dev/null and b/compass/public/fonts/Inter-Bold.ttf differ diff --git a/compass/public/fonts/Inter-ExtraBold.ttf b/compass/public/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000..874b1b0 Binary files /dev/null and b/compass/public/fonts/Inter-ExtraBold.ttf differ diff --git a/compass/public/fonts/Inter-ExtraLight.ttf b/compass/public/fonts/Inter-ExtraLight.ttf new file mode 100644 index 0000000..c993e82 Binary files /dev/null and b/compass/public/fonts/Inter-ExtraLight.ttf differ diff --git a/compass/public/fonts/Inter-Light.ttf b/compass/public/fonts/Inter-Light.ttf new file mode 100644 index 0000000..71188f5 Binary files /dev/null and b/compass/public/fonts/Inter-Light.ttf differ diff --git a/compass/public/fonts/Inter-Medium.ttf b/compass/public/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..a01f377 Binary files /dev/null and b/compass/public/fonts/Inter-Medium.ttf differ diff --git a/compass/public/fonts/Inter-Regular.ttf b/compass/public/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..5e4851f Binary files /dev/null and b/compass/public/fonts/Inter-Regular.ttf differ diff --git a/compass/public/fonts/Inter-SemiBold.ttf b/compass/public/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..ecc7041 Binary files /dev/null and b/compass/public/fonts/Inter-SemiBold.ttf differ diff --git a/compass/public/fonts/Inter-Thin.ttf b/compass/public/fonts/Inter-Thin.ttf new file mode 100644 index 0000000..fe77243 Binary files /dev/null and b/compass/public/fonts/Inter-Thin.ttf differ diff --git a/compass/styles/globals.css b/compass/styles/globals.css new file mode 100644 index 0000000..bec3b2c --- /dev/null +++ b/compass/styles/globals.css @@ -0,0 +1,47 @@ +/* globals.css */ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; + + +:root { + /* Colors */ + --ring-color: 199, 21, 133; + /* This is the RGB value for a purple color */ + --ring-opacity: 0.5; + + /* Shadows */ + --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --shadow-focus: 0 0 0 3px rgba(66, 153, 225, 0.5); + + /* Borders */ + --border-radius: 0.375rem; + /* 6px */ + --border-width: 1px; + + /* Spacing */ + --spacing-px: 1px; + --spacing-2: 0.5rem; + /* 8px */ + --spacing-3: 0.75rem; + /* 12px */ + + /* Font */ + --font-color: #4a5568; + /* A shade of gray */ +} + + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + src: url('/fonts/Inter-Regular.ttf') format('ttf'), + url('/fonts/Inter-Bold.ttf') format('ttf'), + url('/fonts/Inter-Black.ttf') format('ttf'), + url('/fonts/Inter-ExtraBold.ttf') format('ttf'), + url('/fonts/Inter-ExtraLight.ttf') format('ttf'), + url('/fonts/Inter-Medium.ttf') format('ttf'), + url('/fonts/Inter-SemiBold.ttf') format('ttf'), + url('/fonts/Inter-Thin.ttf') format('ttf'); + } \ No newline at end of file diff --git a/compass/tailwind.config.ts b/compass/tailwind.config.ts index c7ead80..abab24e 100644 --- a/compass/tailwind.config.ts +++ b/compass/tailwind.config.ts @@ -1,4 +1,4 @@ -import type { Config } from 'tailwindcss' +import type { Config } from 'tailwindcss'; const config: Config = { content: [ @@ -10,11 +10,14 @@ const config: Config = { extend: { backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + }, + fontFamily: { + sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], -} -export default config +}; + +export default config;