diff --git a/.gitignore b/.gitignore index fb8b8da..428175e 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,8 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# lockfiles +package-lock.json +yarn.lock +pnpm-lock.yaml diff --git a/src/components/buttons/ctaButton.tsx b/src/components/buttons/ctaButton.tsx index a9a238c..87db9a8 100644 --- a/src/components/buttons/ctaButton.tsx +++ b/src/components/buttons/ctaButton.tsx @@ -1,30 +1,29 @@ import { bgBlackDarkWhite, - navMotionTransition, textWhiteDarkBlack, transitionEaseLinearDuration300, } from "@/components/util/constants"; -import { motion } from "motion/react"; +import { useRouter } from "next/router"; + +const SHOP_URL = "https://shop.kscale.dev/"; const CTAButton = () => { + const router = useRouter(); + return ( - + onClick={() => router.push(SHOP_URL)} > - 👀👀👀👀👀 - + Pre-Order + ); }; diff --git a/src/components/cad/panel.tsx b/src/components/cad/panel.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/cad/robotPanel.tsx b/src/components/cad/robotPanel.tsx new file mode 100644 index 0000000..aef1c00 --- /dev/null +++ b/src/components/cad/robotPanel.tsx @@ -0,0 +1,41 @@ +import { useEffect, useRef } from "react"; +import * as THREE from "three"; +import { Object3D } from "three"; +import { URDFLoader } from "urdf-loader"; + +export default function RobotPanel() { + const mountRef = useRef(null); + + useEffect(() => { + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 1000 + ); + const renderer = new THREE.WebGLRenderer(); + renderer.setSize(window.innerWidth, window.innerHeight); + mountRef.current?.appendChild(renderer.domElement); + + const loader = new URDFLoader(); + loader.load("path/to/your/robot.urdf", (robot: Object3D) => { + scene.add(robot); + }); + + camera.position.z = 5; + + const animate = function () { + requestAnimationFrame(animate); + renderer.render(scene, camera); + }; + + animate(); + + return () => { + mountRef.current?.removeChild(renderer.domElement); + }; + }, []); + + return
; +} diff --git a/src/components/footer/FooterSectionList.tsx b/src/components/footer/FooterSectionList.tsx deleted file mode 100644 index b22edaa..0000000 --- a/src/components/footer/FooterSectionList.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FooterSectionListProps } from "@/components/util/interfaces"; -import Link from "next/link"; - -const FooterSectionList = (props: FooterSectionListProps) => { - return ( -
-

{props.title}

-
- {props.itemTitles.map((itemTitle: string, index: number) => { - return ( -
  • - - {itemTitle} - -
    • - ); - })} -
    -
    - ); -}; - -export default FooterSectionList; diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index 3172321..3630d14 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -1,9 +1,8 @@ -import { JSX } from "react"; import SocialMediaItem from "@/components/footer/SocialMediaItem"; +import { Discord, Facebook, Github, LinkedIn, Twitter } from "@/components/footer/socialMediaSvgs"; import FooterLogotype from "@/components/logos/footerLogotype"; -import { Discord, LinkedIn, Twitter, Facebook, Github } from "@/components/footer/socialMediaSvgs"; -import FooterSectionList from "@/components/footer/FooterSectionList"; -import { useWindowSize } from "@/components/util/functions"; +import Link from "next/link"; +import { JSX } from "react"; const socialMediaSvgs: JSX.Element[] = [ , @@ -21,232 +20,81 @@ const socialMediaLinks: string[] = [ "https://github.com/kscalelabs", ]; +export interface FooterSectionListProps { + title: string; + items: { title: string; url: string }[]; + extraStyling: string; +} + +const FooterSectionList = ({ extraStyling, items, title }: FooterSectionListProps) => { + return ( +
    +

    {title}

    +
      + {items.map((item, index) => ( +
    • + + {item.title} + +
      • + ))} +
    +
    + ); +}; + export default function Footer() { - const width = useWindowSize().width; const CopyRight = () => { return (

    - Copyright ©2024 K-Scale Labs + Copyright © 2024 K-Scale Labs

    ); }; - const footerBasedOnBreakpoints = () => { - if (width >= 1440) { - return ; - } else if (width >= 1024) { - return ; - } else if (width >= 640) { - return ; - } else if (width < 640) { - return ; - } - }; - - const FooterWidthMobile = () => { - return ( -
    -
    -
    -
    - -
    - {socialMediaLinks.map((link: string, index: number) => { - return ( -
  • - {} -
    • - ); - })} -
    -
    - -
    -
    - - -
    -
    - -
    - ); - }; - - const FooterWidth640 = () => { - return ( - <> -
    + return ( +
    +
    +
    -
    - {socialMediaLinks.map((link: string, index: number) => { - return ( -
  • - {} -
    • - ); - })} -
    -
    -
    +
      + {socialMediaLinks.map((link: string, index: number) => ( +
    • + +
      • + ))} +
    + +
    - - -
    - - ); - }; - - const FooterWidth1024 = () => { - return ( - <> -
    -
    - -
    - {socialMediaLinks.map((link: string, index: number) => { - return ( -
  • - {} -
    • - ); - })} -
    -
    - - -
    -
    -
    - - -
    -
    - - ); - }; - - const FooterWidth1440 = () => { - return ( - <> -
    -
    - -
    - {socialMediaLinks.map((link: string, index: number) => { - return ( -
  • - {} -
    • - ); - })} -
    -
    - -
    - - - - - ); - }; - - return ( -
    - {footerBasedOnBreakpoints()} + + +
    + +
    ); } diff --git a/src/components/navbar/burgerMenu.tsx b/src/components/navbar/burgerMenu.tsx index 3545034..59dbe21 100644 --- a/src/components/navbar/burgerMenu.tsx +++ b/src/components/navbar/burgerMenu.tsx @@ -1,19 +1,26 @@ import BurgerButton from "@/components/navbar/burgerButton"; +import { motion } from "motion/react"; -const BurgerMenu = (isOpen: boolean, buttonText: string[], buttonLinks: string[]) => { +interface BurgerMenuProps { + isOpen: boolean; + items: { name: string; link: string }[]; +} + +const BurgerMenu = ({ isOpen, items }: BurgerMenuProps) => { return isOpen ? ( -
    - {buttonText.map((text, index) => { - return ( -
  • - -
    • - ); - })} -
    - ) : ( - <> - ); + + {items.map((item, index) => ( +
  • + +
    • + ))} +     + ) : null; }; export default BurgerMenu; diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx index d648e6c..bf92d82 100644 --- a/src/components/navbar/navbar.tsx +++ b/src/components/navbar/navbar.tsx @@ -1,17 +1,15 @@ -import { motion, useMotionValueEvent, useScroll } from "motion/react"; -import Logotype from "@/components/logos/logotype"; -import NavButton from "@/components/navbar/navButton"; import CTAButton from "@/components/buttons/ctaButton"; -import { useEffect, useState } from "react"; -import { useWindowSize } from "@/components/util/functions"; +import Logotype from "@/components/logos/logotype"; import BurgerMenu from "@/components/navbar/burgerMenu"; import BurgerOpenButton from "@/components/navbar/burgerOpenButton"; +import NavButton from "@/components/navbar/navButton"; +import { useWindowSize } from "@/components/util/functions"; +import { motion, useMotionValueEvent, useScroll } from "motion/react"; +import { useEffect, useState } from "react"; -const navItems: string[] = ["research", "docs", "login"]; -const navItemLinks: string[] = [ - "https://dashboard.kscale.dev/research/", - "https://docs.kscale.dev/", - "https://dashboard.kscale.dev/login/", +const navItems = [ + { name: "docs", link: "https://docs.kscale.dev/" }, + { name: "dashboard", link: "https://dashboard.kscale.dev/login/" }, ]; const navVariants = { @@ -96,7 +94,7 @@ export default function NavBar() { )} - {BurgerMenu(mobileShouldOpenBurger, navItems, navItemLinks)} + {BurgerMenu({ isOpen: mobileShouldOpenBurger, items: navItems })} ); }; @@ -116,7 +114,7 @@ export default function NavBar() { staggerChildren: 0.05, }} > - {navItems.map((name, i) => { + {navItems.map((item, i) => { return ( - + ); })} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index fee3cfe..45e9795 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,29 +3,10 @@ import type { AppProps } from "next/app"; import Head from "next/head"; export default function App({ Component, pageProps }: AppProps) { - // const scrollbar: string = "scrollbar-visible"; - // useEffect(() => { - // let scrollTimeout: NodeJS.Timeout | undefined; - // - // const handleScroll = () => { - // document.body.classList.add(scrollbar); - // clearTimeout(scrollTimeout); - // - // scrollTimeout = setTimeout(() => { - // document.body.classList.remove(scrollbar); - // }, 2000); - // }; - // - // window.addEventListener("scroll", handleScroll); - // - // return () => { - // window.removeEventListener("scroll", handleScroll); - // }; - // }, []); return ( <> - K-Scale + K-Scale Labs { + return ( +
    +
    +

    + The world's first humanoid robot for those who prefer transparency over trust. +

    +

    + Open-source to protect your privacy, ensure fair pricing, and ensure your contributions + help move humanity up the Kardashev scale. +

    +
    +
    + ); +}; + +const BuyNow = () => { + return ( +
    + +
    + ); +}; + export default function Home() { return ( -
    +
    -
    -

    Welcome to Our Website

    -

    We're glad to have you here.

    -
    -
    -
    -

    About Us

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. -

    -

    - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. -

    -
    +
    +
    +
    diff --git a/src/styles/globals.css b/src/styles/globals.css index c3aeffc..1e017d3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -74,57 +74,28 @@ body { background: var(--background); } -footer { - bottom: 0; - left: 0; - padding: 13% 2.5% 5% 2.5%; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 5%; -} - -main { - display: grid; - margin-left: 5%; - margin-right: 5%; - grid-template-columns: repeat(4, 1fr); - gap: 5%; -} - main { @apply font-planar; @apply font-normal; font-style: normal; - font-size: 17px; - line-height: 20px; - letter-spacing: -0.01em; } h1 { @apply font-apparat; @apply font-medium; font-style: normal; - font-size: 62px; - line-height: 60px; - letter-spacing: -0.02em; } h2 { @apply font-apparat; @apply font-medium; font-style: normal; - font-size: 38.5px; - line-height: 40px; - letter-spacing: -0.015em; } h3 { @apply font-planar; @apply font-normal; font-style: normal; - font-size: 25px; - line-height: 25px; - letter-spacing: -0.01em; } caption, @@ -132,9 +103,6 @@ figcaption { @apply font-planar; @apply font-normal; font-style: normal; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.02em; } caption .code, @@ -144,9 +112,6 @@ figcaption .pre { @apply font-mono; @apply font-normal; font-style: normal; - font-size: 13px; - line-height: 14px; - letter-spacing: 0.03em; } code, @@ -154,83 +119,6 @@ pre { @apply font-mono; @apply font-normal; font-style: normal; - font-size: 14px; - line-height: 14px; - letter-spacing: 0.02em; -} - -@media (min-width: 640px) { - main, - footer { - padding: 8% 2.5%; - grid-template-columns: repeat(6, 1fr); - gap: 2.5%; - } -} - -@media (min-width: 1024px) { - main, - footer { - padding: 4% 5%; - grid-template-columns: repeat(9, 1fr); - gap: 2.5%; - } -} - -@media (min-width: 1440px) { - main, - footer { - padding: 3% 5% 10% 5%; - grid-template-columns: repeat(12, 1fr); - gap: 1.25%; - } - - main { - font-size: 24px; - line-height: 28px; - letter-spacing: -0.01em; - } - - h1 { - font-size: 96px; - line-height: 84px; - letter-spacing: -0.02em; - } - - h2 { - font-size: 57.5px; - line-height: 56px; - letter-spacing: -0.015em; - } - - h3 { - font-size: 39.5px; - line-height: 42px; - letter-spacing: -0.01em; - } - - caption, - figcaption { - font-size: 17px; - line-height: 28px; - letter-spacing: 0.02em; - } - - caption .code, - caption .pre, - figcaption .code, - figcaption .pre { - font-size: 18px; - line-height: 18px; - letter-spacing: 0.02em; - } - - code, - pre { - font-size: 18px; - line-height: 18px; - letter-spacing: 0.02em; - } } .scroll-lock { @@ -238,37 +126,6 @@ pre { height: 100vh; /* Prevents resizing quirks */ } -/*::-webkit-scrollbar {*/ -/* width: 0.75vw;*/ -/*}*/ - -/*::-webkit-scrollbar-track {*/ -/* background: transparent;*/ -/*}*/ - -/*need to add back .scrollbar-visible*/ -/*::-webkit-scrollbar-thumb {*/ -/* background: #010101;*/ -/* border-radius: 0.6rem;*/ -/* min-height: 0.6rem;*/ -/* transition: ease-in 0.1s;*/ -/*}*/ - -/*::-webkit-scrollbar-thumb:hover {*/ -/* opacity: 1;*/ -/* background: #010101;*/ -/* border-radius: 0.6rem;*/ -/* min-height: 0.6rem;*/ -/* transition: ease-in 2s;*/ -/*}*/ - -/*::-webkit-scrollbar-thumb {*/ -/* opacity: 0;*/ -/* border-radius: 0.6rem;*/ -/* min-height: 0.6rem;*/ -/* transition: ease-in 2s;*/ -/*}*/ - ::-webkit-scrollbar-thumb { display: none; }