fixed build errors
This commit is contained in:
		@@ -23,6 +23,7 @@ type TextOwnProps = {
 | 
			
		||||
  font?: keyof typeof fontVariants
 | 
			
		||||
  color?: keyof typeof colorVariants
 | 
			
		||||
  className?: string
 | 
			
		||||
  children?: React.ReactNode
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// Polymorphic helpers
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,3 @@
 | 
			
		||||
import React from "react";
 | 
			
		||||
import { useId } from "react";
 | 
			
		||||
 | 
			
		||||
export default function FeaturesSectionDemo() {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,12 +1,15 @@
 | 
			
		||||
"use client";
 | 
			
		||||
 | 
			
		||||
import * as THREE from "three";
 | 
			
		||||
import { Canvas, useFrame } from "@react-three/fiber";
 | 
			
		||||
import { OrbitControls, useTexture } from "@react-three/drei";
 | 
			
		||||
import { useRef } from "react";
 | 
			
		||||
import { Line, OrbitControls, useTexture } from "@react-three/drei";
 | 
			
		||||
import { useMemo, useRef } from "react";
 | 
			
		||||
 | 
			
		||||
type RotatableGroup = {
 | 
			
		||||
  rotation: { y: number };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function Globe() {
 | 
			
		||||
  const groupRef = useRef<THREE.Group>(null);
 | 
			
		||||
  const groupRef = useRef<RotatableGroup | null>(null);
 | 
			
		||||
  const cloudTexture = useTexture("/images/cloud1.png");
 | 
			
		||||
 | 
			
		||||
  // Rotate the globe slowly
 | 
			
		||||
@@ -17,7 +20,7 @@ function Globe() {
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // Coordinates for markers (half-globe)
 | 
			
		||||
  const points = [
 | 
			
		||||
  const markers = [
 | 
			
		||||
    [0, 1, 0],
 | 
			
		||||
    [0.7, 0.5, 0.2],
 | 
			
		||||
    [-0.5, 0.4, 0.5],
 | 
			
		||||
@@ -25,42 +28,47 @@ function Globe() {
 | 
			
		||||
    [-0.6, -0.1, 0.3],
 | 
			
		||||
    [0.3, -0.2, 0.8],
 | 
			
		||||
  ];
 | 
			
		||||
  const arcPoints = useMemo(() => {
 | 
			
		||||
    const radius = 2.5;
 | 
			
		||||
    const verticalRadius = radius / 2;
 | 
			
		||||
    const segments = 120;
 | 
			
		||||
 | 
			
		||||
    return Array.from({ length: 8 }, () => {
 | 
			
		||||
      const points: number[] = [];
 | 
			
		||||
      for (let i = 0; i < segments; i++) {
 | 
			
		||||
        const t = (i / (segments - 1)) * Math.PI;
 | 
			
		||||
        const x = Math.cos(t) * radius;
 | 
			
		||||
        const z = Math.sin(t) * verticalRadius;
 | 
			
		||||
        const y = Math.sin(x / radius) * 0.5;
 | 
			
		||||
        points.push(x, y, z);
 | 
			
		||||
      }
 | 
			
		||||
      return points;
 | 
			
		||||
    });
 | 
			
		||||
  }, []);
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <group ref={groupRef}>
 | 
			
		||||
      {/* Cyan arcs */}
 | 
			
		||||
      {Array.from({ length: 8 }).map((_, i) => {
 | 
			
		||||
        const radius = 2.5;
 | 
			
		||||
        const curve = new THREE.EllipseCurve(
 | 
			
		||||
          0,
 | 
			
		||||
          0,
 | 
			
		||||
          radius,
 | 
			
		||||
          radius / 2,
 | 
			
		||||
          0,
 | 
			
		||||
          Math.PI,
 | 
			
		||||
          false,
 | 
			
		||||
          0
 | 
			
		||||
        );
 | 
			
		||||
        const points = curve.getPoints(100);
 | 
			
		||||
        const geometry = new THREE.BufferGeometry().setFromPoints(
 | 
			
		||||
          points.map((p) => new THREE.Vector3(p.x, Math.sin(p.x / radius) * 0.5, p.y))
 | 
			
		||||
        );
 | 
			
		||||
        return (
 | 
			
		||||
          <line key={i} geometry={geometry}>
 | 
			
		||||
            <lineBasicMaterial color="#00e5ff" linewidth={1} transparent opacity={0.5} />
 | 
			
		||||
          </line>
 | 
			
		||||
        );
 | 
			
		||||
      })}
 | 
			
		||||
      {arcPoints.map((points, i) => (
 | 
			
		||||
        <Line
 | 
			
		||||
          key={i}
 | 
			
		||||
          points={points}
 | 
			
		||||
          color="#00e5ff"
 | 
			
		||||
          lineWidth={1}
 | 
			
		||||
          transparent
 | 
			
		||||
          opacity={0.5}
 | 
			
		||||
        />
 | 
			
		||||
      ))}
 | 
			
		||||
 | 
			
		||||
      {/* Cloud markers */}
 | 
			
		||||
      {points.map(([x, y, z], i) => (
 | 
			
		||||
      {markers.map(([x, y, z], i) => (
 | 
			
		||||
        <mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
 | 
			
		||||
          <planeGeometry args={[0.3, 0.3]} />
 | 
			
		||||
          <meshBasicMaterial
 | 
			
		||||
            map={cloudTexture}
 | 
			
		||||
            transparent
 | 
			
		||||
            opacity={1}
 | 
			
		||||
            side={THREE.DoubleSide}
 | 
			
		||||
            side={2 /* DoubleSide */}
 | 
			
		||||
          />
 | 
			
		||||
        </mesh>
 | 
			
		||||
      ))}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,8 +1,8 @@
 | 
			
		||||
"use client";
 | 
			
		||||
import { cn } from "@/lib/utils";
 | 
			
		||||
import React, { ReactNode } from "react";
 | 
			
		||||
import type { CSSProperties, HTMLProps, ReactNode } from "react";
 | 
			
		||||
 | 
			
		||||
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
 | 
			
		||||
interface AuroraBackgroundProps extends HTMLProps<HTMLDivElement> {
 | 
			
		||||
  children: ReactNode;
 | 
			
		||||
  showRadialGradient?: boolean;
 | 
			
		||||
}
 | 
			
		||||
@@ -44,7 +44,7 @@ export const AuroraBackground = ({
 | 
			
		||||
              "--black": "#000",
 | 
			
		||||
              "--white": "#fff",
 | 
			
		||||
              "--transparent": "transparent",
 | 
			
		||||
            } as React.CSSProperties
 | 
			
		||||
            } as CSSProperties
 | 
			
		||||
          }
 | 
			
		||||
        >
 | 
			
		||||
          <div
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
"use client";
 | 
			
		||||
 | 
			
		||||
import React, { useEffect, useRef, useState } from "react";
 | 
			
		||||
import { useEffect, useRef, useState } from "react";
 | 
			
		||||
 | 
			
		||||
type DottedGlowBackgroundProps = {
 | 
			
		||||
  className?: string;
 | 
			
		||||
@@ -203,12 +203,8 @@ export function DottedGlowBackground({
 | 
			
		||||
 | 
			
		||||
    regenDots();
 | 
			
		||||
 | 
			
		||||
    let last = performance.now();
 | 
			
		||||
 | 
			
		||||
    const draw = (now: number) => {
 | 
			
		||||
      if (stopped) return;
 | 
			
		||||
      const dt = (now - last) / 1000; // seconds
 | 
			
		||||
      last = now;
 | 
			
		||||
      const { width, height } = container.getBoundingClientRect();
 | 
			
		||||
 | 
			
		||||
      ctx.clearRect(0, 0, el.width, el.height);
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,5 @@
 | 
			
		||||
"use client";
 | 
			
		||||
 | 
			
		||||
import React from "react";
 | 
			
		||||
import { motion } from "framer-motion";
 | 
			
		||||
import { P, Eyebrow } from "@/components/Texts";
 | 
			
		||||
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
 | 
			
		||||
 
 | 
			
		||||
@@ -2,25 +2,45 @@
 | 
			
		||||
 | 
			
		||||
import { motion } from "framer-motion";
 | 
			
		||||
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
 | 
			
		||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from "react-icons/tb";
 | 
			
		||||
import type { ComponentPropsWithoutRef } from "react";
 | 
			
		||||
 | 
			
		||||
type CircleIconProps = ComponentPropsWithoutRef<"svg">;
 | 
			
		||||
 | 
			
		||||
const CircleNumber1Icon = (props: CircleIconProps) => (
 | 
			
		||||
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
 | 
			
		||||
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
 | 
			
		||||
  </svg>
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const CircleNumber2Icon = (props: CircleIconProps) => (
 | 
			
		||||
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
 | 
			
		||||
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
 | 
			
		||||
  </svg>
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const CircleNumber3Icon = (props: CircleIconProps) => (
 | 
			
		||||
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
 | 
			
		||||
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
 | 
			
		||||
  </svg>
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const features = [
 | 
			
		||||
  {
 | 
			
		||||
    name: 'Choose Your Intelligence',
 | 
			
		||||
    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
 | 
			
		||||
    icon: TbCircleNumber1Filled,
 | 
			
		||||
    icon: CircleNumber1Icon,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    name: 'Add Your Knowledge',
 | 
			
		||||
    description:
 | 
			
		||||
      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
 | 
			
		||||
    icon: TbCircleNumber2Filled,
 | 
			
		||||
    icon: CircleNumber2Icon,
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    name: 'Define Your Network',
 | 
			
		||||
    description:
 | 
			
		||||
      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
 | 
			
		||||
    icon: TbCircleNumber3Filled,
 | 
			
		||||
    icon: CircleNumber3Icon,
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -18,7 +18,7 @@ export function HomeAurora() {
 | 
			
		||||
          <span className="text-bold lg:text-8xl">
 | 
			
		||||
            Project Mycelium.
 | 
			
		||||
            <br className="hidden lg:block" />
 | 
			
		||||
            Full Sovereignty for Cloud, Network & AI.
 | 
			
		||||
            Full Sovereignty for<br />Cloud, Network & AI.
 | 
			
		||||
          </span>
 | 
			
		||||
        </H1>
 | 
			
		||||
      </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,6 @@
 | 
			
		||||
import React from "react";
 | 
			
		||||
import { cn } from "@/lib/utils";
 | 
			
		||||
import createGlobe from "cobe";
 | 
			
		||||
import { useEffect, useRef } from "react";
 | 
			
		||||
import { useEffect, useRef, type ReactNode } from "react";
 | 
			
		||||
import { motion } from "motion/react";
 | 
			
		||||
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 | 
			
		||||
import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
 | 
			
		||||
@@ -67,7 +66,7 @@ const FeatureCard = ({
 | 
			
		||||
  children,
 | 
			
		||||
  className,
 | 
			
		||||
}: {
 | 
			
		||||
  children?: React.ReactNode;
 | 
			
		||||
  children?: ReactNode;
 | 
			
		||||
  className?: string;
 | 
			
		||||
}) => {
 | 
			
		||||
  return (
 | 
			
		||||
@@ -77,7 +76,7 @@ const FeatureCard = ({
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => {
 | 
			
		||||
const FeatureTitle = ({ children, icon }: { children?: ReactNode; icon?: ReactNode }) => {
 | 
			
		||||
  return (
 | 
			
		||||
    <div className="flex items-center gap-2">
 | 
			
		||||
      {icon}
 | 
			
		||||
@@ -88,7 +87,7 @@ const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: R
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
 | 
			
		||||
const FeatureDescription = ({ children }: { children?: ReactNode }) => {
 | 
			
		||||
  return (
 | 
			
		||||
    <p
 | 
			
		||||
      className={cn(
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 | 
			
		||||
import { Globe } from "@/components/ui/Globe"
 | 
			
		||||
import { motion } from "framer-motion"
 | 
			
		||||
import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 | 
			
		||||
import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 | 
			
		||||
import { CountUpNumber } from '@/components/CountUpNumber'
 | 
			
		||||
 | 
			
		||||
export function WorldMap() {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,9 +1,6 @@
 | 
			
		||||
import { AnimatedSection } from '../../components/AnimatedSection'
 | 
			
		||||
import { HomeAurora } from './HomeAurora'
 | 
			
		||||
import { HomeFeatures } from './HomeFeatures'
 | 
			
		||||
import { HomeFeaturesDark } from './HomeFeaturesDark'
 | 
			
		||||
import { HomeCloud } from './HomeCloud'
 | 
			
		||||
import { HomeAgent } from './HomeAgent'
 | 
			
		||||
import { StackSectionLight } from './StackSection'
 | 
			
		||||
import { WorldMap } from './HomeGlobe'
 | 
			
		||||
import { HomeBenefits } from './HomeBenefits'
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 | 
			
		||||
import { motion } from "framer-motion";
 | 
			
		||||
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
 | 
			
		||||
import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
 | 
			
		||||
import { P, SectionHeader, Eyebrow } from "@/components/Texts";
 | 
			
		||||
import { FadeIn } from "@/components/ui/FadeIn";
 | 
			
		||||
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -6,7 +6,6 @@ import clsx from 'clsx'
 | 
			
		||||
import {
 | 
			
		||||
  type MotionProps,
 | 
			
		||||
  type Variant,
 | 
			
		||||
  type Variants,
 | 
			
		||||
  AnimatePresence,
 | 
			
		||||
  motion,
 | 
			
		||||
} from 'framer-motion'
 | 
			
		||||
@@ -137,12 +136,6 @@ function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const headerAnimation: Variants = {
 | 
			
		||||
  initial: { opacity: 0, transition: { duration: 0.3 } },
 | 
			
		||||
  animate: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
 | 
			
		||||
  exit: { opacity: 0, transition: { duration: 0.3 } },
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const maxZIndex = 2147483647
 | 
			
		||||
 | 
			
		||||
const bodyVariantBackwards: Variant = {
 | 
			
		||||
 
 | 
			
		||||
@@ -7,7 +7,6 @@ type Props = {
 | 
			
		||||
 | 
			
		||||
const ACCENT = '#00b8db';
 | 
			
		||||
const STROKE = '#111827';
 | 
			
		||||
const GRAY = '#9CA3AF';
 | 
			
		||||
const GRAY_LT = '#E5E7EB';
 | 
			
		||||
 | 
			
		||||
const IconSquare = () => (
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user