diff --git a/frontend/src/components/TextParallax.tsx b/frontend/src/components/TextParallax.tsx new file mode 100644 index 00000000..df51c533 --- /dev/null +++ b/frontend/src/components/TextParallax.tsx @@ -0,0 +1,156 @@ +import React, { useRef } from "react"; +import { FiArrowUpRight } from "react-icons/fi"; + +import { motion, useScroll, useTransform } from "framer-motion"; + +export const TextParallaxContentExample = () => { + return ( +
+ + + + + + + + + +
+ ); +}; + +const IMG_PADDING_X = 0; +const IMG_PADDING_Y = 12; + +interface TextParallaxContentProps { + imgUrl: string; + subheading: string; + heading: string; + children: React.ReactNode; +} + +export const TextParallaxContent: React.FC = ({ + imgUrl, + subheading, + heading, + children, +}) => { + return ( +
+
+ + +
+ {children} +
+ ); +}; + +interface StickyImageProps { + imgUrl: string; +} + +const StickyImage: React.FC = ({ imgUrl }) => { + const targetRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: targetRef, + offset: ["end end", "end start"], + }); + + const scale = useTransform(scrollYProgress, [0, 1], [1, 0.85]); + const opacity = useTransform(scrollYProgress, [0, 1], [1, 0]); + + return ( + + + + ); +}; + +interface OverlayCopyProps { + subheading: string; + heading: string; +} + +const OverlayCopy: React.FC = ({ subheading, heading }) => { + const targetRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: targetRef, + offset: ["start end", "end start"], + }); + + const y = useTransform(scrollYProgress, [0, 1], [250, -250]); + const opacity = useTransform(scrollYProgress, [0.25, 0.5, 0.75], [0, 1, 0]); + + return ( + +

+ {subheading} +

+

{heading}

+ + ); +}; + +export const ExampleContent: React.FC = () => ( +
+

+ Additional content explaining the above card here +

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, + blanditiis soluta eius quam modi aliquam quaerat odit deleniti minima + maiores voluptate est ut saepe accusantium maxime doloremque nulla + consectetur possimus. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium + reiciendis blanditiis aliquam aut fugit sint. +

+ +
+
+); diff --git a/frontend/src/components/pages/KLangPage.tsx b/frontend/src/components/pages/KLangPage.tsx index 4686308d..8058ffb5 100644 --- a/frontend/src/components/pages/KLangPage.tsx +++ b/frontend/src/components/pages/KLangPage.tsx @@ -1,105 +1,65 @@ import React from "react"; +import { FiArrowUpRight } from "react-icons/fi"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"; +import { ExampleContent, TextParallaxContent } from "@/components/TextParallax"; import PageHeader from "@/components/ui/PageHeader"; const KLangPage: React.FC = () => { return ( -
+
- - - - What is K-Lang? - - - -

- K-Lang is a next-generation programming language designed - specifically for controlling and programming humanoid robots. With - its intuitive syntax and powerful features, K-Lang empowers both - beginners and experts to create sophisticated robot behaviors and - interactions. -

- - -
- -
- - - - Key Features - - - -
    -
  • Simple and intuitive syntax for rapid development
    • -
  • - Built-in neural network functionality for advanced AI - capabilities -
    • -
  • - Robust error handling and safety features for reliable robot - control -
    • -
  • - Extensive library of pre-built functions for common robot tasks -
    • -
  • - Cross-platform compatibility for various humanoid robot models -
    • -
- - -
- -
- - - - Getting Started - - - -

- Ready to start programming your humanoid robot with K-Lang? Follow - these steps: -

-
    -
  1. Download the K-Lang development kit from our website
    2. -
  2. Install the K-Lang compiler and runtime environment
    3. -
  3. Set up your robot's connection parameters
    4. -
  4. - Write your first K-Lang program using our documentation and - tutorials -
    5. -
  5. Deploy and run your program on your humanoid robot
    6. -
- - -
- -
- - - Try K-Lang - - -

- Want to experiment with K-Lang before setting up your development - environment? Our interactive online code editor is coming soon! - Stay tuned for updates. -

- - + +
+ + + + + + +
); }; +const NeuralNetworkContent: React.FC = () => ( +
+

+ Neural Network Integration +

+
+

+ When compiling a Klang program, we choose a frame rate which will match + the frame rate for the model that we will ultimately want to run (for + example 50 Hz). The “program supervisor” runs at this frequency, keeping + track of scoped values, running functions, and any control flow. The + equivalent of a program counter taking a step is the program supervisor + incrementing by one time step. +

+

+ K-Lang is a WIP programming language. +

+ +
+
+); + export default KLangPage;