feat: enhance Button component with disabled state and add CoverSoon component

src/components/Button.tsx

@@ -6,12 +6,17 @@ interface ButtonProps {
   className?: string;
   variant?: "default" | "blue" | "blue_alt";
   shadowEnabled?: boolean;
+  disabled?: boolean;
 }
 
 export default function Button(props: ButtonProps) {
-  const { variant = "default", shadowEnabled = true } = props;
+  const { variant = "default", shadowEnabled = true, disabled = false } = props;
 
   const getButtonStyles = () => {
+    if (disabled) {
+      return "bg-gray-300 text-gray-500 cursor-not-allowed";
+    }
+
     switch (variant) {
       case "blue":
         return "bg-[#1068B0] text-white hover:bg-[#0e5a9c]";
@@ -25,7 +30,7 @@ export default function Button(props: ButtonProps) {
   return (
     <div className={`${fluxgore.className} relative inline-block`}>
       {/* Shadow element */}
-      {shadowEnabled && (
+      {shadowEnabled && !disabled && (
         <div
           className="absolute bg-black transition-all duration-150 ease-in-out"
           style={{
@@ -42,11 +47,14 @@ export default function Button(props: ButtonProps) {
       {/* Button */}
       <button
         className={`${getButtonStyles()} inline-block relative transition-all duration-150 ease-in-out ${
-          shadowEnabled
+          shadowEnabled && !disabled
             ? "active:translate-x-1 active:translate-y-1"
-            : "hover:scale-105 active:scale-95"
+            : !disabled
+            ? "hover:scale-105 active:scale-95"
+            : ""
         } ${props.className}`}
-        onClick={props.onClick}
+        onClick={disabled ? undefined : props.onClick}
+        disabled={disabled}
         style={{
           fontSize: "18px",
           lineHeight: "1.2",
@@ -58,7 +66,7 @@ export default function Button(props: ButtonProps) {
           zIndex: 1,
         }}
         onMouseEnter={
-          shadowEnabled
+          shadowEnabled && !disabled
             ? (e) => {
                 const shadow = e.currentTarget
                   .previousElementSibling as HTMLElement;
@@ -72,7 +80,7 @@ export default function Button(props: ButtonProps) {
             : undefined
         }
         onMouseLeave={
-          shadowEnabled
+          shadowEnabled && !disabled
             ? (e) => {
                 const shadow = e.currentTarget
                   .previousElementSibling as HTMLElement;
@@ -86,7 +94,7 @@ export default function Button(props: ButtonProps) {
             : undefined
         }
         onMouseDown={
-          shadowEnabled
+          shadowEnabled && !disabled
             ? (e) => {
                 const shadow = e.currentTarget
                   .previousElementSibling as HTMLElement;
@@ -100,7 +108,7 @@ export default function Button(props: ButtonProps) {
             : undefined
         }
         onMouseUp={
-          shadowEnabled
+          shadowEnabled && !disabled
             ? (e) => {
                 const shadow = e.currentTarget
                   .previousElementSibling as HTMLElement;

src/components/Cover.tsx

@@ -119,4 +119,31 @@ function Cover() {
   );
 }
 
+function CoverSoon() {
+  return (
+    <div
+      className="bg-cover bg-center bg-no-repeat relative justify-center items-center py-36"
+      style={{ backgroundImage: "url('/images/cover.svg')" }}
+    >
+      <div className="container mx-auto max-w-5/7 mb-24">
+        {/* Top row with ФЕСТИВАЛЬ and date box */}
+        <div className="flex flex-row items-center space-x-16">
+          <CoverHeading>ФЕСТИВАЛЬ</CoverHeading>
+          <DateBox />
+        </div>
+
+        <CoverHeading textPosition="right">ТЕХНИЧЕСКИХ</CoverHeading>
+
+        <CoverHeading>ВИДОВ СПОРТА</CoverHeading>
+      </div>
+
+      <div className="flex justify-center items-center">
+        <Button disabled>скоро</Button>
+      </div>
+    </div>
+  );
+}
+
+export { CoverSoon };
+
 export default Cover;

src/pages/index.tsx

@@ -1,29 +1,9 @@
-import Activities from "@/components/Activities";
+import { CoverSoon } from "@/components/Cover";
-import Cover from "@/components/Cover";
-import Events from "@/components/Events";
-import Footer from "@/components/Footer";
-import Info from "@/components/Info";
-import Map from "@/components/Map";
-import Navbar from "@/components/Navbar";
-import Partners from "@/components/Partners";
-import Scheme from "@/components/Scheme";
-import Video from "@/components/Video";
 
 export default function Home() {
   return (
     <>
-      <Navbar />
+      <CoverSoon />
-      <main className="flex-col min-h-full">
-        <Cover />
-        <Info />
-        <Video />
-        <Scheme />
-        <Events />
-        <Activities />
-        <Partners />
-        <Map />
-      </main>
-      <Footer />
     </>
   );
 }

src/pages/preview.tsx

@@ -0,0 +1,29 @@
+import Activities from "@/components/Activities";
+import Cover from "@/components/Cover";
+import Events from "@/components/Events";
+import Footer from "@/components/Footer";
+import Info from "@/components/Info";
+import Map from "@/components/Map";
+import Navbar from "@/components/Navbar";
+import Partners from "@/components/Partners";
+import Scheme from "@/components/Scheme";
+import Video from "@/components/Video";
+
+export default function Home() {
+  return (
+    <>
+      <Navbar />
+      <main className="flex-col min-h-full">
+        <Cover />
+        <Info />
+        <Video />
+        <Scheme />
+        <Events />
+        <Activities />
+        <Partners />
+        <Map />
+      </main>
+      <Footer />
+    </>
+  );
+}

src/styles/globals.css

@@ -8,4 +8,5 @@
 body {
   height: 100%;
   overflow-x: hidden;
+  background-color: #0d0d0d;
 }