diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..d301973 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index fd81e88..e69de29 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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/app/layout.tsx b/app/layout.tsx index ae84562..40dbc6c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,11 +1,11 @@ -import './globals.css' +import { eudox } from '@/libs/fonts' +import '@/styles/global.css' import type { Metadata } from 'next' -import { Inter } from 'next/font/google' +import Header from '@/components/Header' -const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { - title: 'Create Next App', + title: 'Lalasia', description: 'Generated by create next app', } @@ -16,7 +16,10 @@ export default function RootLayout({ }) { return ( - {children} + +
+ {children} + ) } diff --git a/app/page.tsx b/app/page.tsx index 7a8286b..dcedef9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,113 +1,10 @@ +import HeroSection from '@/containers/home-page/hero-section' 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/components/Buttons/PrimaryButton/index.tsx b/components/Buttons/PrimaryButton/index.tsx new file mode 100644 index 0000000..9d894dd --- /dev/null +++ b/components/Buttons/PrimaryButton/index.tsx @@ -0,0 +1,14 @@ +import React, { FC } from 'react' + +interface PrimaryButtonProps { + text:string +} + +const PrimaryButton: FC = ({ text }) => { + return ( + + ) + +} + +export default PrimaryButton; \ No newline at end of file diff --git a/components/Forms/Inputs/Search/index.tsx b/components/Forms/Inputs/Search/index.tsx new file mode 100644 index 0000000..52e1905 --- /dev/null +++ b/components/Forms/Inputs/Search/index.tsx @@ -0,0 +1,19 @@ +import PrimaryButton from '@/components/Buttons/PrimaryButton'; +import { Search } from '@/components/Icons/Search'; +import React, { FC } from 'react' + +interface SearchInputProps { + +} + +const SearchInput: FC = ({ }) => { + return ( +
+ + + +
+ ) +} + +export default SearchInput; \ No newline at end of file diff --git a/components/Header/constants.ts b/components/Header/constants.ts new file mode 100644 index 0000000..4633ab7 --- /dev/null +++ b/components/Header/constants.ts @@ -0,0 +1,26 @@ +import { HeaderNav } from "@/types/HeaderNav"; + + +export const HeaderNavs : HeaderNav [] = [ + { + id:1, + value:'Product', + href:'/' + }, + { + id:2, + value:'Services', + href:'/' + }, + { + id:3, + value:'Article', + href:'/' + }, + { + id:4, + value:'About Us', + href:'/' + }, + +] \ No newline at end of file diff --git a/components/Header/index.tsx b/components/Header/index.tsx new file mode 100644 index 0000000..edca7d7 --- /dev/null +++ b/components/Header/index.tsx @@ -0,0 +1,36 @@ +import React, { FC } from 'react' +import { Logo } from '../Icons/Logo'; +import Link from 'next/link'; +import { Basket } from '../Icons/Basket'; +import { Profile } from '../Icons/Profile'; +import { HamburgerIcon } from '../Icons/HamburgerIcon'; +import { HeaderNavs } from './constants'; + +interface HeaderProps { + +} + +const Header: FC = ({ }) => { + return ( +
+
+
+ +

Lalasia

+
+ +
+ + +
+
+ +
+
+
+ ) +} + +export default Header; \ No newline at end of file diff --git a/components/Icons/Basket.tsx b/components/Icons/Basket.tsx new file mode 100644 index 0000000..0c268ee --- /dev/null +++ b/components/Icons/Basket.tsx @@ -0,0 +1,14 @@ + + + +export const Basket = () => { + + return( + + + + + + + ) +} \ No newline at end of file diff --git a/components/Icons/HamburgerIcon.tsx b/components/Icons/HamburgerIcon.tsx new file mode 100644 index 0000000..0deddcf --- /dev/null +++ b/components/Icons/HamburgerIcon.tsx @@ -0,0 +1,12 @@ + + +export const HamburgerIcon = () => { + + return( + + + + + + ) +} \ No newline at end of file diff --git a/components/Icons/Logo.tsx b/components/Icons/Logo.tsx new file mode 100644 index 0000000..a5ddd9d --- /dev/null +++ b/components/Icons/Logo.tsx @@ -0,0 +1,23 @@ + + + + +export const Logo = () => { + + return( + + + + + + + + + + + + + + ) +} + diff --git a/components/Icons/Profile.tsx b/components/Icons/Profile.tsx new file mode 100644 index 0000000..a62b015 --- /dev/null +++ b/components/Icons/Profile.tsx @@ -0,0 +1,9 @@ +export const Profile = () => { + + return( + + + + + ) +} \ No newline at end of file diff --git a/components/Icons/Search.tsx b/components/Icons/Search.tsx new file mode 100644 index 0000000..295342c --- /dev/null +++ b/components/Icons/Search.tsx @@ -0,0 +1,12 @@ + + + +export const Search = () => { + + return( + + + + + ) +} \ No newline at end of file diff --git a/containers/home-page/hero-section/index.tsx b/containers/home-page/hero-section/index.tsx new file mode 100644 index 0000000..336c3d0 --- /dev/null +++ b/containers/home-page/hero-section/index.tsx @@ -0,0 +1,36 @@ +import SearchInput from "@/components/Forms/Inputs/Search"; +import Image from "next/image"; +import React, { FC } from "react"; + +interface HeroSectionProps {} + +const HeroSection: FC = ({}) => { + return ( +
+
+
+
+

+ Discover Furniture With High Quality Wood +

+
+
+

+ Pellentesque etiam blandit in tincidunt at donec. Eget ipsum dignissim placerat nisi, adipiscing mauris non. Purus parturient viverra nunc, tortor sit laoreet. Quam tincidunt aliquam adipiscing tempor. +

+
+
+
+
+ +
+
+ Hero IMG +
+
+
+
+ ); +}; + +export default HeroSection; diff --git a/libs/fonts.ts b/libs/fonts.ts new file mode 100644 index 0000000..292372b --- /dev/null +++ b/libs/fonts.ts @@ -0,0 +1,27 @@ +import localFont from '@next/font/local' + +export const eudox = localFont({ + src: [ + { + path: '../public/fonts/Eudoxus/EudoxusSans-Light.ttf', + weight: '300' + }, + { + path: '../public/fonts/Eudoxus/EudoxusSans-Regular.ttf', + weight: '400' + }, + { + path: '../public/fonts/Eudoxus/EudoxusSans-Medium.ttf', + weight: '500' + }, + { + path: '../public/fonts/Eudoxus/EudoxusSans-ExtraLight.ttf', + weight: '200' + }, + { + path: '../public/fonts/Eudoxus/EudoxusSans-Bold.ttf', + weight: '600' + }, + ], + variable: '--söhne' +}) \ No newline at end of file diff --git a/package.json b/package.json index 031c7d4..0b0c582 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@next/font": "^13.4.13", "@types/node": "20.4.9", "@types/react": "18.2.20", "@types/react-dom": "18.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 853f3f9..216c79c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@next/font': + specifier: ^13.4.13 + version: 13.4.13 '@types/node': specifier: 20.4.9 version: 20.4.9 @@ -158,6 +161,10 @@ packages: glob: 7.1.7 dev: false + /@next/font@13.4.13: + resolution: {integrity: sha512-jzjUvjO967E2XWku5aImWRVApGwsTJZPp3lY5yFNWZHMkoNNKU9fsTEAhWVcKxCOYmHmSX1n2E09VkzuFdF48Q==} + dev: false + /@next/swc-darwin-arm64@13.4.13: resolution: {integrity: sha512-ZptVhHjzUuivnXMNCJ6lER33HN7lC+rZ01z+PM10Ows21NHFYMvGhi5iXkGtBDk6VmtzsbqnAjnx4Oz5um0FjA==} engines: {node: '>= 10'} diff --git a/public/fonts/Eudoxus/EudoxusSans-Bold.ttf b/public/fonts/Eudoxus/EudoxusSans-Bold.ttf new file mode 100644 index 0000000..95d0885 Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-Bold.ttf differ diff --git a/public/fonts/Eudoxus/EudoxusSans-ExtraBold.ttf b/public/fonts/Eudoxus/EudoxusSans-ExtraBold.ttf new file mode 100644 index 0000000..7ee9dd6 Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-ExtraBold.ttf differ diff --git a/public/fonts/Eudoxus/EudoxusSans-ExtraLight.ttf b/public/fonts/Eudoxus/EudoxusSans-ExtraLight.ttf new file mode 100644 index 0000000..e0bc712 Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-ExtraLight.ttf differ diff --git a/public/fonts/Eudoxus/EudoxusSans-Light.ttf b/public/fonts/Eudoxus/EudoxusSans-Light.ttf new file mode 100644 index 0000000..a04b37f Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-Light.ttf differ diff --git a/public/fonts/Eudoxus/EudoxusSans-Medium.ttf b/public/fonts/Eudoxus/EudoxusSans-Medium.ttf new file mode 100644 index 0000000..0017c74 Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-Medium.ttf differ diff --git a/public/fonts/Eudoxus/EudoxusSans-Regular.ttf b/public/fonts/Eudoxus/EudoxusSans-Regular.ttf new file mode 100644 index 0000000..f42604e Binary files /dev/null and b/public/fonts/Eudoxus/EudoxusSans-Regular.ttf differ diff --git a/public/hero.png b/public/hero.png new file mode 100644 index 0000000..9001f37 Binary files /dev/null and b/public/hero.png differ diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..2a2f0ad --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..d803b53 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,36 @@ +@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)); +} + +body{ + background:white; + user-select: none; +} +*{ + + -webkit-user-drag: none!important; +} \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index c7ead80..4db8869 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,9 +5,19 @@ const config: Config = { './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', + './containers/**/*.{js,ts,jsx,tsx,mdx}' ], theme: { extend: { + screens:{ + 'xl':'1440px' + }, + colors:{ + 'primaryColor':'#518581', + 'secondaryColor':'#FFB23F', + 'black':'#151411', + 'textColor':'#AFADB5' + }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': diff --git a/types/HeaderNav.ts b/types/HeaderNav.ts new file mode 100644 index 0000000..50c16c3 --- /dev/null +++ b/types/HeaderNav.ts @@ -0,0 +1,6 @@ + +export type HeaderNav = { + id:number, + value:string, + href:string +} \ No newline at end of file