Skip to content

Commit

Permalink
Merge branch 'main' into testimonial-slider
Browse files Browse the repository at this point in the history
  • Loading branch information
devvsakib authored Oct 11, 2023
2 parents 3c32704 + 3398d26 commit aa52c5c
Show file tree
Hide file tree
Showing 8 changed files with 166 additions and 20 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/img/couple.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Headers/MainHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const MainHeader = () => {
<div>
<div className="flex items-center gap-2">
<div>
<Link href={"singin"}>
<Link href={"signin"}>
<span className="">Sign in</span>
</Link>
</div>
Expand Down
58 changes: 58 additions & 0 deletions src/components/Headers/MobileMainHeader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useState } from "react";
import Link from "next/link";
import CommonLayout from "../Layouts/CommonLayout";
import menu from "../Menus/Menu";
import ActiveMenu from "./ActiveMenu";

const MobileMainHeader = () => {
const [menuOpen, setMenuOpen] = useState(false);

const toggleMenu = () => {
setMenuOpen(!menuOpen);
};

return (
<header className="py-3 shadow-md">
<CommonLayout>
<div className="lg:flex justify-between items-center">
<div>
<img className="w-20" src="/assets/logo.svg" alt="RealMate" />
</div>
<div
className="fixed top-0 right-0 h-screen w-4/5 text-right lg:flex lg:items-center lg:space-x-4 lg:pr-4 px-3 py-3">
<button
className=" text-3xl focus:outline-none"
onClick={toggleMenu}
>
{menuOpen ? "X" : "☰"}
</button>
<ul className={`${menuOpen ? "text-right" : "hidden"
}`}>
{menu.main.items.map((item, index) => (
<li key={index} onClick={toggleMenu} className="py-2">
<ActiveMenu path={item.path} menu={item.title} />
</li>
))}
<br className="py-2" />
<li className="py-2">
<Link href={"signin"} onClick={toggleMenu}>
<span>Sign in</span>
</Link>
</li>
<li className="py-2">
<Link href={"/register"} onClick={toggleMenu}>
<span className="btn-grade-sm">Register</span>
</Link>
</li>
</ul>
{menuOpen &&
<div style={{ zIndex: -1, opacity: 0.9 }} className="fixed top-0 right-0 h-full w-full bg-gradient-to-l from-white from-40% to-tertiary"></div>
}
</div>
</div>
</CommonLayout>
</header>
);
};

export default MobileMainHeader;
8 changes: 7 additions & 1 deletion src/pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Footer from '@/components/Footer/Footer'
import MainHeader from '@/components/Headers/MainHeader'
import Testimonial from '@/components/Testimonial/Testimonial'
import MobileMainHeader from '@/components/Headers/MobileMainHeader'
import '@/styles/globals.css'
import '@/styles/tailwind.common.css'
import Head from 'next/head'
Expand All @@ -12,7 +13,12 @@ export default function App({ Component, pageProps }) {
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/x-icon" />
</Head>
<main className='flex flex-col justify-between min-h-screen'>
<MainHeader />
<div className="lg:hidden">
<MobileMainHeader />
</div>
<div className="hidden lg:block">
<MainHeader />
</div>
<Component {...pageProps} />
<Testimonial />
<Footer />
Expand Down
80 changes: 80 additions & 0 deletions src/pages/signin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { FaGoogle } from 'react-icons/fa';
import { FaFacebook } from 'react-icons/fa';
import { FaTwitter } from 'react-icons/fa';

const Login =() => {
return(
<div>
<div class="font-bold text-center text-xl p-4 m-4">Welcome Back!<br/> World number #1 matrimony site</div>
<div class="w-full h-screen flex items-start">
<div class="relative w-1/2 h-full flex flex-col pl-20 pb-10">
<img src="./img/couple.png" class="w-full h-full object-cover bg-[#ffc5b2] rounded-l-lg"/>
</div>
<div class="w-1/2 mr-20 rounded-r-lg bg-purple-50 flex flex-col p-20 justify-between items-center ">
<h1 class=" text-black text-bold text-lg font-semibold max-w-[500px] items-center mx-auto">
We always love to see you
</h1>

<div class=" w-full flex flex-col ">

<div class="w-full flex flex-col">
<input
type="text"
placeholder="Email/Phone"
pattern="^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$|^[\+]?[0-9]{1,3}[\s]?[\(]?[0-9]{1,6}[\)]?[-\s\./0-9]*$"
class="w-full px-2 text-black border-b py-2 bg-white my-2 rounded-md outline-none focus:outline-none"
/>
<p class="text-sm text-gray-400">*use country code before your number.</p>
<input
type="password"
placeholder="Password"
class="w-full px-2 text-black border-b py-2 bg-white rounded-md my-2 outline-none focus:outline-none"/>
</div>

<div class="w-full flex items-center justify-between">
<div class="w-full flex items-center">
<input type="checkbox" class="w-4 h-4 mr-2"/>
<p class="text-sm">
Remember me
</p>

</div>
<button class="text-sm text-pink-400 font-semibold underline underline-offset-2 cursor-pointer whitespace-nowrap">
Forget password?
</button>
</div>
<div class=" my-3 w-full flex flex col">
<button class=" w-full bg-pink-600 font-semibold my-2 rounded-md py-2 text-center flex items-center justify-center text-white">
Login Now
</button>
</div>
<div class="flex justify-center">
<p class=" text-black/80 text-normal">
or Login with
</p>
</div>
<button class=" font-semibold w-full bg-white my-2 rounded-md py-2 text-center flex items-center justify-center text-black ">
<FaGoogle className="mr-2" />Signin With Google
</button>

<button class=" font-semibold w-full bg-white rounded-md my-2 py-2 text-center flex items-center justify-center text-black ">
<FaTwitter className="mr-2" />Signin With twitter
</button>
<button class=" font-semibold w-full bg-white rounded-md my-2 py-2 text-center flex items-center justify-center text-black">
<FaFacebook className="mr-2" />Signin With facebook
</button>
</div>

<div class="w-full flex my-4 items-center justify-center">
<p class="text-sm font-normal text-black">
Don't have a account? <span class="text-pink-400 font-semibold underline underline-offset-2 cursor-pointer"> Create Account </span>
</p>
</div>
</div>
</div>
</div>
);
};

export default Login;
6 changes: 5 additions & 1 deletion src/styles/tailwind.common.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.btn-grade{
.btn-grade {
@apply bg-gradient-to-b from-primary to-btngrad px-5 py-1 rounded-md text-white;
}

.btn-grade-sm {
@apply bg-gradient-to-b from-primary to-btngrad px-1 py-1 rounded-md text-white;
}
18 changes: 8 additions & 10 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -618,17 +618,17 @@
dependencies:
tslib "^2.4.0"

"@tanstack/query-core@4.35.7":
version "4.35.7"
resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.7.tgz"
integrity sha512-PgDJtX75ubFS0WCYFM7DqEoJ4QbxU3S5OH3gJSI40xr7UVVax3/J4CM3XUMOTs+EOT5YGEfssi3tfRVGte4DEw==
"@tanstack/query-core@4.36.1":
version "4.36.1"
resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz"
integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==

"@tanstack/react-query@^4.29.15":
version "4.35.7"
resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.35.7.tgz"
integrity sha512-0MankquP/6EOM2ATfEov6ViiKemey5uTbjGlFMX1xGotwNaqC76YKDMJdHumZupPbZcZPWAeoPGEHQmVKIKoOQ==
version "4.36.1"
resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz"
integrity sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==
dependencies:
"@tanstack/query-core" "4.35.7"
"@tanstack/query-core" "4.36.1"
use-sync-external-store "^1.2.0"

"@types/json5@^0.0.29":
Expand Down Expand Up @@ -2646,12 +2646,10 @@ reflect.getprototypeof@^1.0.4:
get-intrinsic "^1.2.1"
globalthis "^1.0.3"
which-builtin-type "^1.1.3"

regenerator-runtime@^0.14.0:
version "0.14.0"
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz"
integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==

regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
version "1.5.1"
resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz"
Expand Down

0 comments on commit aa52c5c

Please sign in to comment.