Merge pull request thetrouper#50 from devashish2024/main

edits and fixes

Author: ItziSpyder

app/get/page.ts

@@ -4,11 +4,13 @@ import Ingame from '@/components/Sections/Ingame/Ingame';
 import Reviews from '@/components/Sections/Reviews/Reviews';
 import Features from '@/components/Sections/Features/Features';
 import Hero from '@/components/Sections/Hero/Hero';
+import Progress from '@/components/Sections/Progress/Progress';
 
 export default function Home() {
   return (
     <>
       <Hero />
+      <Progress />
       <CCS />
       <Features />
       <Ingame />

app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import Progress from '../Progress/Progress';
 import {
   GetClickCrystalsButton,
   JoinDiscordButton,
@@ -9,31 +8,30 @@ import { motion } from 'framer-motion';
 
 export default function Hero() {
   return (
-    <section className="pt-4 lg:pt-0 text-white bg-transparent">
-      <div className="top-0 left-0 absolute w-screen z-[-1] bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#502250,#000000_100%)] h-hero"></div>
-      <div className="py-6 px-8 lg:grid lg:gap-8 lg:grid-cols-12 lg:py-8 lg:h-screen">
-        <div className="place-self-center col-span-5 lg:col-span-7 h-auto py-8 lg:py-0">
-          <h1 className="text-left text-gray-200 tracking-normal leading-[1] font-extrabold text-6xl xl:text-8xl lg:max-w-2xl mb-6 m-0">
-            Advanced hotkeys,
+    <section className="py-4 lg:py-2 text-white bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#054874,#000000_100%)]">
+      <div className="py-6 px-8 xl:grid xl:gap-8 xl:grid-cols-12 xl:py-8 xl:min-h-screen">
+        <div className="place-self-center col-span-5 xl:col-span-7 h-auto py-8 xl:py-0">
+          <h1 className="md:text-center xl:text-left text-gray-200 tracking-normal leading-[1] font-extrabold text-6xl md:text-7xl xl:text-8xl xl:max-w-2xl mb-6 m-0">
+            Like Steroids,
             <br /> For{' '}
-            <span className="bg-[radial-gradient(ellipse_200%_100%_at_top_center,#a31ca5_100%,#ab46af_100%)] text-transparent bg-clip-text">
+            <span className="bg-[radial-gradient(ellipse_200%_100%_at_top_center,#2f8dbb_100%,#28429f_90%)] text-transparent bg-clip-text">
               Crystal PvP.
             </span>
           </h1>
-          <div className="grid">
-            <p className="text-gray-200/90 font-normal max-w-2xl text-left">
+          <div className="grid md:place-items-center">
+            <p className="text-gray-200/90 font-normal max-w-2xl md:text-center xl:text-left">
               Discover ClickCrystals—a powerful, free, and open-source Minecraft
-              mod designed to enhance your Crystal PvP experience, all without
-              cheats! Loaded with a comprehensive set of modules to modify your
-              human input.
+              mod designed to enhance your Crystal PvP gameplay! Loaded with 80+
+              built-in modules and the complete, easiest scripting language for
+              Minecraft ever existed, it's beyond the limits!
             </p>
           </div>
-          <div className="flex flex-row gap-4 mt-4">
+          <div className="flex flex-row items-center md:justify-center xl:justify-start gap-4 my-4">
             <GetClickCrystalsButton />
             <JoinDiscordButton />
           </div>
         </div>
-        <div className="lg:my-4 hidden col-span-5 lg:flex lg:items-center relative">
+        <div className="xl:my-4 hidden col-span-5 xl:flex xl:items-center relative">
           {/* <iframe
             className="aspect-video w-full h-full block"
             src="https://www.youtube.com/embed/-YCPZvNMmFo?si=SzaaGTq-BmCGxRMo"
@@ -44,15 +42,11 @@ export default function Hero() {
           ></iframe> */}
           <motion.img
             src={'/textures/custom/player.png'}
-            style={{
-              imageRendering: 'pixelated',
-            }}
             alt=""
-            className="right-[90px] absolute size-[500px] w-auto"
+            className="right-[90px] absolute h-[500px] w-auto"
           />
         </div>
       </div>
-      <Progress />
     </section>
   );
 }

components/Sections/Hero/Hero.tsx

@@ -36,7 +36,7 @@ export default function Progress() {
   }, []);
 
   return (
-    <div className="py-12 bg-[#491649] my-0 [mask-image:linear-gradient(to_top,black_15%,black_30%,black_75%,transparent)] relative">
+    <div className="py-12 bg-[#0c3768] my-0 bg-[radial-gradient(ellipse_200%_200%_at_bottom_left,#054874,#000000_100%)]">
       <div className="rounded-md py-8 px-4 lg:px-32 flex gap-4 sm:flex-row flex-col justify-between">
         {progress.map((progress, index) => {
           return (
@@ -63,7 +63,6 @@ export default function Progress() {
           );
         })}
       </div>
-      <div className="obsidian_line"></div>
     </div>
   );
 }

components/Sections/Progress/Progress.tsx

@@ -48,6 +48,7 @@ const footerLinks = [
         url: 'https://github.com/clickcrystals-development/ClickCrystals',
       },
       { name: 'Modrinth', url: 'https://modrinth.com/mod/clickcrystals' },
+      { name: 'Instant Download', url: '/get' },
     ],
   },
 ];

components/ui/Footer/FooterLinks.tsx

@@ -65,7 +65,7 @@ export const DropLink = ({ label, links, url = '#' }: DropLinkProps) => {
       </div>
       <div
         ref={dropdownRef}
-        className={`${isHovered || isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'} z-[999999] transition-all absolute mt-0 w-48 bg-white rounded-sm p-0 m-0 shadow-lg`}
+        className={`${isHovered || isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'} z-[999999] transition-all absolute mt-0 w-48 bg-white rounded-sm p-0 m-0 shadow-lg right-0`}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >

components/ui/Nav/DropLink.tsx

@@ -24,10 +24,10 @@ const MenuOverlay = () => {
     >
       <div className="flex flex-row justify-between pl-2 pr-4">
         <Title />
-        <MobileMenuNav handler={setActive} />
+        <MobileMenuNav state={active} handler={setActive} />
       </div>
       {active && (
-        <ul className="flex flex-col items-center justify-center flex-1 px-4 py-8">
+        <ul className="flex flex-col items-center justify-center px-4 h-screen overflow-y-scroll">
           {links.map((link: any, index: any) => (
             <motion.li
               key={index}

components/ui/Nav/MobileMenu.tsx

@@ -3,12 +3,9 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 
-export default function MobileMenuNav({ handler }: any) {
-  const [navbarOpen, setNavbarOpen] = useState(true);
-
+export default function MobileMenuNav({ handler, state }: any) {
   const toggle = () => {
-    setNavbarOpen(!navbarOpen);
-    handler(navbarOpen);
+    handler(!state);
   };
 
   return (
@@ -24,9 +21,9 @@ export default function MobileMenuNav({ handler }: any) {
             strokeWidth="1.5"
             strokeLinecap="round"
             animate={
-              navbarOpen
-                ? { d: 'M3 6h18M3 12h18M3 18h18' }
-                : { d: 'M3 3l18 18M3 21l18-18' }
+              state
+                ? { d: 'M3 3l18 18M3 21l18-18' }
+                : { d: 'M3 6h18M3 12h18M3 18h18' }
             }
             transition={{ duration: 0.2 }}
           />

components/ui/Nav/MobileMenuNav.tsx

@@ -8,6 +8,10 @@ const downloadDropdown = [
     label: 'Official',
     url: '/download',
   },
+  {
+    label: 'Instant Download',
+    url: '/get',
+  },
   {
     label: 'PlanetMinecraft',
     url: 'https://www.planetminecraft.com/mod/clickcrystal/',

components/ui/Nav/Nav.tsx

@@ -1,20 +1,34 @@
+'use client';
+
 import { Nav } from '@/components/ui/Nav/Nav';
 import { Title } from '@/components/ui/Nav/Title';
 import { Links } from '@/components/ui/Nav/Links';
 import MobileMenu from './MobileMenu';
+import { useEffect, useState } from 'react';
 
 export default function Header() {
+  const [isTop, setIsTop] = useState(true);
+
+  useEffect(() => {
+    return () => {
+      if (typeof window != null) {
+        window.addEventListener('scroll', () => {
+          console.log(window.scrollY);
+          setIsTop(window.scrollY <= 70 && window.location.pathname === '/');
+        });
+      }
+      setIsTop(window.scrollY <= 70 && window.location.pathname === '/');
+    };
+  }, []);
   return (
     <div
-      className="tracking-tight text-white"
+      className="tracking-tight text-white sticky top-0 z-[99999] transition-transform duration-200"
       style={{
-        background: "url('/textures/obsidian.png')",
-        backgroundRepeat: 'repeat',
+        background: isTop ? 'black' : "url('/textures/obsidian.png') repeat",
         imageRendering: 'pixelated',
-        backgroundSize: '32px',
       }}
     >
-      <header className="w-full duration-100 ease-in flex-none sticky top-0 transition-all z-40">
+      <header className="w-full duration-100 ease-in top-0 transition-all z-40">
         <div className="w-full flex max-w-7xl justify-between md:items-center md:mx-auto md:px-4 md:py-3.5">
           <div className="hidden md:flex justify-between">
             <Title />