🎨 Style: fix style

app/components/bigImg/page.tsx

@@ -1,40 +1,38 @@
-'use client'
+"use client";
 
-import Image from "next/image"
+import Image from "next/image";
 
 export default function Component() {
-
   return (
+    <div className="w-full bg-linear-gradient">
       <div
-            className='w-full bg-linear-gradient'
+        className="flex justify-between items-end m-auto max-w-7xl h-20 px-3   /* small */
-        >
-            <div
-                className='flex justify-between items-end m-auto max-w-7xl h-20 px-3   /* small */
                             md:px-3 md:h-calc-2                                         /* middle */
                             xl:max-w-7xl xl:h-96                                        /* xlarge */
-                            '>
+                            "
+      >
         <h1
-                    className='self-center text-center text-lg leading-normal font-bold w-full  /* small */
+          className="self-center text-center text-lg leading-normal font-bold w-full  /* small */
                                 md:text-left md:text-calc-1 md:w-2/5                            /* middle */
                                 xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5             /* xlarge */
-                                '
+                                "
           // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
         >
-
           Free, official online office tutorials by WPS Academy
         </h1>
         <div
-                    className='hidden
+          className="hidden
                                 md:flex md:h-calc-1 /* midle */
                                 xl:h-80 xl:w-3/5    /* xlarge */
-                                '>
+                                "
+        >
           <Image
-                        className='w-full h-full'
+            className="w-full h-full"
             src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
-                        alt={'big img'}
+            alt={"big img"}
           />
         </div>
       </div>
     </div>
-    )
+  );
 }

app/components/card/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { useHover } from "usehooks-ts";
 import { useRef } from "react";
 import Image from "next/image";
@@ -8,38 +8,41 @@ export default function Page() {
   const isHover = useHover(ref);
 
   return (
-        <div className='bg-white rounded-lg cursor-pointer w-64'>
+    <div className="bg-white rounded-lg cursor-pointer w-64">
-            <div className='relative w-full h-auto' ref={ref}>
+      <div className="relative w-full h-auto" ref={ref}>
         <Image
           width={500}
           height={250}
-                    className={'object-cover w-full rounded-t-lg'}
+          className={"object-cover w-full rounded-t-lg"}
-                    src={!isHover ?
+          src={
-                        'https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
+            !isHover
-                        'https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
+              ? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
-                    alt={'img'}
+              : "https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif"
+          }
+          alt={"img"}
         />
-                <div className={`absolute bottom-2 right-2
+        <div
+          className={`absolute bottom-2 right-2
                                 bg-gray-600 text-white text-xs
                                 px-1 py-0.5 rounded-md  
-                                ${isHover ? 'hidden' : 'flex'}`}
+                                ${isHover ? "hidden" : "flex"}`}
         >
           03:14
         </div>
       </div>
-            <div className='flex justify-between text-xs mt-2 text-gray-500 px-2'>
+      <div className="flex justify-between text-xs mt-2 text-gray-500 px-2">
-                <div className='flex items-center gap-1 my-1'>
+        <div className="flex items-center gap-1 my-1">
           <Image
             width={32}
             height={38}
-                        alt={''}
+            alt={""}
-                        src='https://res-academy.cache.wpscdn.com/static/images/icon_excel.png'
+            src="https://res-academy.cache.wpscdn.com/static/images/icon_excel.png"
           />
           <span>Spread</span>
         </div>
         <div>18.0K views</div>
       </div>
-            <h1 className='text-md font-semibold mt-2 px-2 pb-3'>How use WPS</h1>
+      <h1 className="text-md font-semibold mt-2 px-2 pb-3">How use WPS</h1>
     </div>
-    )
+  );
 }

app/components/header/page.tsx

@@ -19,12 +19,36 @@ import classNames from "classnames";
 import Image from "next/image";
 
 const products = [
-    { name: "Analytics", description: "Get a better understanding of your traffic", href: "#", icon: ChartPieIcon, },
+  {
-    { name: "Engagement", description: "Speak directly to your customers", href: "#", icon: CursorArrowRaysIcon, },
+    name: "Analytics",
-    { name: "Security", description: "Your customers’ data will be safe and secure", href: "#", icon: FingerPrintIcon, },
+    description: "Get a better understanding of your traffic",
-    { name: "Integrations", description: "Connect with third-party tools", href: "#", icon: SquaresPlusIcon, },
+    href: "#",
-    { name: "Automations", description: "Build strategic funnels that will convert", href: "#", icon: ArrowPathIcon, },
+    icon: ChartPieIcon,
-
+  },
+  {
+    name: "Engagement",
+    description: "Speak directly to your customers",
+    href: "#",
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: "Security",
+    description: "Your customers’ data will be safe and secure",
+    href: "#",
+    icon: FingerPrintIcon,
+  },
+  {
+    name: "Integrations",
+    description: "Connect with third-party tools",
+    href: "#",
+    icon: SquaresPlusIcon,
+  },
+  {
+    name: "Automations",
+    description: "Build strategic funnels that will convert",
+    href: "#",
+    icon: ArrowPathIcon,
+  },
 ];
 const callsToAction = [
   { name: "Watch demo", href: "#", icon: PlayCircleIcon },
@@ -35,6 +59,7 @@ export default function Example() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
+    <div className="h-full w-full">
       <header className="bg-white relative w-full">
         <nav
           className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
@@ -62,7 +87,10 @@ export default function Example() {
             </button>
           </div>
           <Popover.Group className="hidden lg:flex lg:gap-x-12">
-                    <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
+            <a
+              href="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
               Home
             </a>
 
@@ -105,7 +133,9 @@ export default function Example() {
                             {item.name}
                             <span className="absolute inset-0" />
                           </a>
-                                                <p className="mt-1 text-gray-600">{item.description}</p>
+                          <p className="mt-1 text-gray-600">
+                            {item.description}
+                          </p>
                         </div>
                       </div>
                     ))}
@@ -147,7 +177,7 @@ export default function Example() {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                            <Popover.Panel className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
+                <Popover.Panel className="absolute left-0.5 right-0.5 mt-1 top-full z-10 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
                   <div className="p-4">
                     {products.map((item) => (
                       <div
@@ -168,7 +198,9 @@ export default function Example() {
                             {item.name}
                             <span className="absolute inset-0" />
                           </a>
-                                                <p className="mt-1 text-gray-600">{item.description}</p>
+                          <p className="mt-1 text-gray-600">
+                            {item.description}
+                          </p>
                         </div>
                       </div>
                     ))}
@@ -239,7 +271,7 @@ export default function Example() {
                           <ChevronDownIcon
                             className={classNames(
                               open ? "rotate-180" : "",
-                                                        "h-5 w-5 flex-none"
+                              "h-5 w-5 flex-none",
                             )}
                             aria-hidden="true"
                           />
@@ -291,5 +323,6 @@ export default function Example() {
           </Dialog.Panel>
         </Dialog>
       </header>
+    </div>
   );
 }

app/globals.css

@@ -75,6 +75,7 @@
   }
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }

app/layout.tsx

@@ -21,7 +21,7 @@ export default function RootLayout({
       <body
         className={cn(
           inter.className,
-          "flex flex-col justify-start items-center h-full"
+          "flex flex-col justify-center items-center h-full",
         )}
       >
         {children}

app/not-found.tsx

@@ -4,14 +4,25 @@ export default function NotFound() {
       <main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
         <div className="text-center">
           <p className="text-base font-semibold text-indigo-600">404</p>
-                    <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
+          <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
-                    <p className="mt-6 text-base leading-7 text-gray-600">Sorry, we couldn’t find the page you’re looking for.</p>
+            Page not found
+          </h1>
+          <p className="mt-6 text-base leading-7 text-gray-600">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
-                        <a href="/" className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Go back home</a>
+            <a
-                        <a href="#" className="text-sm font-semibold">Contact support <span aria-hidden="true">&rarr;</span></a>
+              href="/"
+              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Go back home
+            </a>
+            <a href="#" className="text-sm font-semibold">
+              Contact support <span aria-hidden="true">&rarr;</span>
+            </a>
           </div>
         </div>
       </main>
     </>
-    )
+  );
 }

app/page.tsx

@@ -2,12 +2,11 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
 export default function Home() {
-
   return (
-        <div className='flex-1 flex justify-center items-center'>
+    <div className="flex-1 flex justify-center items-center">
-            <Link href={'/components'}>
+      <Link href={"/components"}>
         <Button>components</Button>
       </Link>
     </div>
-    )
+  );
 }

components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm 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",
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
-  }
+  },
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
+import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-        domains: ['res-academy.cache.wpscdn.com']
+    domains: ["res-academy.cache.wpscdn.com"],
-    }
+  },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -32,5 +32,8 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2",
     "usehooks-ts": "^2.9.1"
+  },
+  "devDependencies": {
+    "prettier": "^3.0.3"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

tailwind.config.js

@@ -2,10 +2,10 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
+    "./components/**/*.{ts,tsx}",
-    './app/**/*.{ts,tsx}',
+    "./app/**/*.{ts,tsx}",
-    './src/**/*.{ts,tsx}',
+    "./src/**/*.{ts,tsx}",
   ],
   theme: {
     container: {
@@ -70,7 +70,23 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      // custom
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "linear-gradient":
+          "linear-gradient(222deg, #ECFEF1 0%, #EAF1F9 53%, #E8E8FE 100%)", // big img background
+      },
+
+      fontSize: {
+        "calc-1": "calc((100vw - 8px) / 1280 * 36)", // big img title font size
+      },
+      height: {
+        "calc-1": "calc((100vw - 8px) / 1280 * 320)", // big img img height
+        "calc-2": "calc((100vw - 8px) / 1280 * 384)", // big img total height
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};

tailwind.config.ts

@@ -1,29 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-    content: [
-        './pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './components/**/*.{js,ts,jsx,tsx,mdx}',
-        './app/**/*.{js,ts,jsx,tsx,mdx}',
-    ],
-    theme: {
-        extend: {
-            backgroundImage: {
-                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                'gradient-conic':
-                    'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-                'linear-gradient': 'linear-gradient(222deg, #ECFEF1 0%, #EAF1F9 53%, #E8E8FE 100%)', // big img background
-            },
-
-            fontSize: {
-                'calc-1': 'calc((100vw - 8px) / 1280 * 36)', // big img title font size
-            },
-            height: {
-                'calc-1': 'calc((100vw - 8px) / 1280 * 320)', // big img img height
-                'calc-2': 'calc((100vw - 8px) / 1280 * 384)', // big img total height
-            },
-        },
-    },
-    plugins: [],
-}
-export default config