Merge branch 'ken'

WebmasterCamp · Jul 21, 2024 · b05746b · b05746b
2 parents 5445f3c + 453a73b
commit b05746b
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 17 deletions.
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/assets/Luxury.jpeg b/src/assets/Luxury.jpeg
diff --git a/src/assets/Minimal.jpeg b/src/assets/Minimal.jpeg
diff --git a/src/assets/Modern.jpeg b/src/assets/Modern.jpeg
diff --git a/src/assets/head.jpeg b/src/assets/head.jpeg
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import reactLogo from '../assets/react.svg'
+import viteLogo from '/vite.svg'
+import modern from '../assets/Modern.jpeg'
+import minimal from '../assets/Minimal.jpeg'
+import luxury from '../assets/Luxury.jpeg'
+
+function Header() {
+
+  return (
+    <>
+      <div className='bg-[#CAD4BC] relative'>
+      <section className='h-auto w-[100%] flex justify-center items-center px-[36px]'>
+        <div className='flex flex-col pt-[56px]'>
+            <h1 className='text-[36px] font-bold'>Create A Dream Room</h1>
+            <p className='text-[20px]'>Design you room click</p>
+            <div className='w-[300px] h-[1px] bg-gray-200 my-[24px]'></div>
+            <div>
+            <a href='' className='bg-[#03571a] py-[11px] px-[26px] rounded-[16px] text-white'>Generate Room</a>
+            </div>
+        </div>
+
+        <div className='w-[470px] h-[229px] rounded-[16px] bg-[#D9D9D9] ml-[80px] imghead mt-[56px]'>
+
+        </div>
+      </section>
+      <section className='mt-[36px] flex justify-center items-center flex-col'>
+        <div className='w-[32%] text-center'>
+            <h1 className='text-[36px] font-bold'>Create your dream room with your love in your heart.</h1>
+        </div>
+        <div className='flex gap-[10px] mt-[36px] mb-[64px]'>
+                <div className='w-[300px] h-[300px] rounded-[16px] bg-[#D9D9D9] relative modern'>
+                    <p className='absolute bottom-6 left-6 font-semibold text-white'>Modern</p>
+                </div>
+                <div className='w-[300px] h-[300px] rounded-[16px] bg-[#D9D9D9] relative minimal'>
+                    <p className='absolute bottom-6 left-6 font-semibold text-white'>Minimal</p>
+                </div>
+                <div className='w-[300px] h-[300px] rounded-[16px] bg-[#D9D9D9] relative luxury'>
+                    <p className='absolute bottom-6 left-6 font-semibold text-white'>Luxury</p>
+                </div>
+            </div>
+      </section>
+      </div>
+    </>
+  )
+}
+
+export default Header
diff --git a/src/components/Landing.jsx b/src/components/Landing.jsx
@@ -0,0 +1,18 @@
+import { useState } from 'react'
+import reactLogo from '../assets/react.svg'
+import viteLogo from '/vite.svg'
+import '../App.css'
+import Navbar from './Navbar'
+import Head from './Header'
+
+function App() {
+
+  return (
+    <>
+      <Navbar />
+      <Head />
+    </>
+  )
+}
+
+export default App
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import reactLogo from '../assets/react.svg'
+import viteLogo from '/vite.svg'
+
+function Navbar() {
+
+  return (
+    <>
+      <nav className='h-[68px] w-[100%] bg-[#CAD4BC] flex justify-around items-center pl-[28px]'>
+        <a href="/" className='font-bold text-[36px]'>INTELLIGIBLE</a>
+        <div className='flex gap-[36px] items-center pr-[40px]'>
+            <a href="" className='px-[22px] py-[6px] bg-white rounded-full'>History</a>
+            <a href=""><svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4323 20.6241V18.5809C18.4323 17.4971 18.0018 16.4577 17.2354 15.6914C16.469 14.925 15.4296 14.4945 14.3458 14.4945H6.17294C5.08914 14.4945 4.04974 14.925 3.28338 15.6914C2.51702 16.4577 2.08649 17.4971 2.08649 18.5809V20.6241M14.3458 6.32156C14.3458 8.57844 12.5163 10.408 10.2594 10.408C8.0025 10.408 6.17294 8.57844 6.17294 6.32156C6.17294 4.06467 8.0025 2.23511 10.2594 2.23511C12.5163 2.23511 14.3458 4.06467 14.3458 6.32156Z" stroke="#1E1E1E" stroke-width="2.88455" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+            </a>
+            <a href=""><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.52637 1.91302H5.73301L8.55146 15.5924C8.64763 16.0628 8.91103 16.4853 9.29556 16.786C9.68008 17.0867 10.1612 17.2464 10.6548 17.2372H20.8769C21.3705 17.2464 21.8516 17.0867 22.2361 16.786C22.6207 16.4853 22.8841 16.0628 22.9802 15.5924L24.6629 7.02109H6.78467M10.9913 22.3453C10.9913 22.9095 10.5205 23.3669 9.93965 23.3669C9.35883 23.3669 8.88799 22.9095 8.88799 22.3453C8.88799 21.7811 9.35883 21.3237 9.93965 21.3237C10.5205 21.3237 10.9913 21.7811 10.9913 22.3453ZM22.5596 22.3453C22.5596 22.9095 22.0887 23.3669 21.5079 23.3669C20.9271 23.3669 20.4563 22.9095 20.4563 22.3453C20.4563 21.7811 20.9271 21.3237 21.5079 21.3237C22.0887 21.3237 22.5596 21.7811 22.5596 22.3453Z" stroke="#1E1E1E" stroke-width="2.88455" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</a>
+        </div>
+      </nav>
+    </>
+  )
+}
+
+export default Navbar
diff --git a/src/index.css b/src/index.css
@@ -7,7 +7,7 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color: rgba(255, 255, 255, 0.87);
+  /* color: rgba(255, 255, 255, 0.87); */
   /* color-scheme: light dark; */
   /* background-color: #242424; */
 
@@ -16,3 +16,27 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.imghead {
+  background-image: url(./assets/head.jpeg);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.modern {
+  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('./assets/Modern.jpeg');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.minimal {
+  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('./assets/Minimal.jpeg');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.luxury {
+  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5)),url('./assets/Luxury.jpeg');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import App from './components/Landing'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(