From e01c1bddf182f1014c17df26b5c984abf0e7e672 Mon Sep 17 00:00:00 2001 From: Lithara Perera Date: Thu, 9 May 2024 12:23:56 +0530 Subject: [PATCH] feat: Register now section --- package.json | 2 ++ public/assets/register-now-bg.png | Bin 0 -> 2228 bytes src/app/page.tsx | 12 +++++-- src/components/cards/registerNowCard.tsx | 32 +++++++++++++++++ src/components/ui/button.tsx | 2 +- yarn.lock | 43 +++++++++++++++++++++-- 6 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 public/assets/register-now-bg.png create mode 100644 src/components/cards/registerNowCard.tsx diff --git a/package.json b/package.json index b1d0079..3cf98ad 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-hook-form": "^7.51.3", "react-loader-spinner": "^6.1.6", "react-redux": "^9.1.1", + "react-responsive": "^10.0.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.23.4" @@ -35,6 +36,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-loader-spinner": "^4.0.0", "eslint": "^8", "eslint-config-next": "14.2.3", "husky": "^9.0.11", diff --git a/public/assets/register-now-bg.png b/public/assets/register-now-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..840d1b859015f2fd590dc58ce1b26268a181308b GIT binary patch literal 2228 zcmeAS@N?(olHy`uVBq!ia0y~yV1CQMz-Z0E1{7JbKY;^CaTa()7Bet#3xhBt!>l*8o|0J?9FmQN!x;TbZFuuLJu~*8G!R;aA#7nKS z7YL_x9^nn(=CyF#^rA)W4y&bw^Yn+-V(->|slCW@`M~Ah~{&v59x)P|u;iAl}tCx_RO^hWZyJ~o8Xkc`h3{E`5%Uk3m^3l|Sqg)wH8ly>r z)T9yB+d22!?vJ66`sl#wGixJtG0eE~B>&d@jWPM}p1*!-11!K7JhG;+00&l7w-0}; zi(6+7tQHxxo?Tlr4Wr7;`egoAK34xZu=-?hEzZDFlVMh^&@90J|8m`}_n?NshdNAy rk?UfVJR|nM@;#(Z-$ZJC_)31UxVi4+UmO-dOBp;}{an^LB{Ts5d7%^^ literal 0 HcmV?d00001 diff --git a/src/app/page.tsx b/src/app/page.tsx index ae37a3f..63117fe 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,17 @@ import ExampleCard from "@/components/cards/ExampleCard"; +import RegisterNowCard from "@/components/cards/registerNowCard"; import ExampleForm from "@/components/forms/ExampleForm"; export default function Home() { return ( -
- - +
+
+ + +
+
+ +
); } diff --git a/src/components/cards/registerNowCard.tsx b/src/components/cards/registerNowCard.tsx new file mode 100644 index 0000000..2b51142 --- /dev/null +++ b/src/components/cards/registerNowCard.tsx @@ -0,0 +1,32 @@ +"use client"; + +import React from "react"; +import Container from "../layout/Container"; +import Image from "next/image"; +import { Button } from "../ui/button"; + +export default function RegisterNowCard() { + return ( +
+ +
+ Register Now +
+
+ lorem ipsum dolor sit amet consectetur? +
+
+ +
*The registration will be opening soon
+
+
+
+ +
+ ); +} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 0cd9e04..e8c222c 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -6,7 +6,7 @@ import { ThreeDots } from "react-loader-spinner" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap drop-shadow-lg shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all active:translate-y-[3px] active:shadow-none text-lg border-4 border-black font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap drop-shadow-lg shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all active:translate-y-[3px] active:shadow-none text-xl border-4 border-black font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/yarn.lock b/yarn.lock index c585313..70d19a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -594,6 +594,13 @@ dependencies: "@types/react" "*" +"@types/react-loader-spinner@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#20e58530c120529f3e7d9c26f950b9c80575f080" + integrity sha512-FKW/yD3KwpydC8gsLmdWCOW0v/aezTvxcqqU0umNHa4QNkVF37UgOeh6DgXIPkxRm/m+6fcgW9XYK6Ff+HCd3A== + dependencies: + react-loader-spinner "*" + "@types/react@*", "@types/react@^18": version "18.3.1" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e" @@ -1128,6 +1135,11 @@ css-color-keywords@^1.0.0: resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== +css-mediaquery@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" + integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q== + css-to-react-native@3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" @@ -1981,6 +1993,11 @@ husky@^9.0.11: resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9" integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw== +hyphenate-style-name@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" + integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== + ignore@^5.2.0: version "5.3.1" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef" @@ -2459,6 +2476,13 @@ lucide-react@^0.376.0: resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.376.0.tgz#79768ff670f2ebabf03cd5a7dccee9915859781a" integrity sha512-g91IX3ERD6yUR1TL2dsL4BkcGygpZz/EsqjAeL/kcRQV0EApIOr/9eBfKhYOVyQIcGGuotFGjF3xKLHMEz+b7g== +matchmediaquery@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa" + integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA== + dependencies: + css-mediaquery "^0.1.2" + meow@^12.0.1: version "12.1.1" resolved "https://registry.yarnpkg.com/meow/-/meow-12.1.1.tgz#e558dddbab12477b69b2e9a2728c327f191bace6" @@ -2864,7 +2888,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +prop-types@^15.6.1, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2911,7 +2935,7 @@ react-is@^18.2.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react-loader-spinner@^6.1.6: +react-loader-spinner@*, react-loader-spinner@^6.1.6: version "6.1.6" resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz#744d84a9763e963b565054f4f281dadfbd17e9e9" integrity sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA== @@ -2927,6 +2951,16 @@ react-redux@^9.1.1: "@types/use-sync-external-store" "^0.0.3" use-sync-external-store "^1.0.0" +react-responsive@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91" + integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg== + dependencies: + hyphenate-style-name "^1.0.0" + matchmediaquery "^0.4.2" + prop-types "^15.6.1" + shallow-equal "^3.1.0" + react@^18: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" @@ -3113,6 +3147,11 @@ set-function-name@^2.0.1, set-function-name@^2.0.2: functions-have-names "^1.2.3" has-property-descriptors "^1.0.2" +shallow-equal@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec" + integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg== + shallowequal@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"