28 |
32 |
41 |
54 |
38 | {children}
39 |
40 |
47 |
48 |
51 |
52 |
53 |
14 |
15 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/empire-ui/src/components/code-preview.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Check, Copy } from "lucide-react";
3 | import { useState } from "react";
4 |
5 | type CodePreviewProps = {
6 | code: string;
7 | children: React.ReactNode;
8 | };
9 |
10 | export default function CodePreview({ code, children }: CodePreviewProps) {
11 | const [hasCheckIcon, setHasCheckIcon] = useState(false);
12 |
13 | const onCopy = () => {
14 | navigator.clipboard.writeText(code);
15 | setHasCheckIcon(true);
16 |
17 | setTimeout(() => {
18 | setHasCheckIcon(false);
19 | }, 1000);
20 | };
21 |
22 | return (
23 |
24 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/empire-ui/src/components/code-renderer.tsx:
--------------------------------------------------------------------------------
1 | import { codeToHtml } from "@/lib/shiki";
2 |
3 | type CodeRenderer = {
4 | code: string;
5 | lang: string;
6 | };
7 |
8 | export default async function CodeRenderer({ code, lang }: CodeRenderer) {
9 | const html = await codeToHtml({
10 | code,
11 | lang,
12 | });
13 |
14 | return (
15 |
28 |
43 |
33 |
35 |
40 |
42 |
44 |
48 |
45 | {children}
46 |
47 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/empire-ui/src/components/common/command-menu.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/components/common/command-menu.tsx
--------------------------------------------------------------------------------
/empire-ui/src/components/common/component-card-desktop.tsx:
--------------------------------------------------------------------------------
1 | interface DesktopComponentCardProps {
2 | rotateDeg: string;
3 | translate: string;
4 | componentGif: string;
5 | title: string;
6 | badge?: string;
7 | badgeColor?: string;
8 | }
9 |
10 | export const DesktopComponentCard: React.FC
23 |
29 |
30 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/empire-ui/src/components/common/component-card-mobile.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardContent } from "@/components/ui/card";
2 | import Link from "next/link";
3 |
4 | interface MobileComponentCardProps {
5 | src: string;
6 | alt: string;
7 | title: string;
8 | component: string;
9 | badge?: string;
10 | badgeColor?: string;
11 | }
12 |
13 | export const MobileComponentCard = ({
14 | src,
15 | alt,
16 | title,
17 | component,
18 | badge,
19 | badgeColor,
20 | }: MobileComponentCardProps) => {
21 | return (
22 |
23 |
34 |
38 |
39 |
40 | {badge && (
41 |
42 | {badge}
43 |
44 | )}
45 |
46 |
47 |
51 |
48 | {title}
49 |
50 |
29 | {badge}
30 |
31 | )}
32 |
33 |
34 |
37 | {title}
35 | Click to view documentation
36 |
6 |
11 | );
12 | };
13 |
14 | interface IconProps {
15 | src: string;
16 | title: string;
17 | alt: string;
18 | }
19 |
20 | const Icon: React.FC
23 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/empire-ui/src/components/common/japanese.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "framer-motion";
4 | import { useEffect, useState } from "react";
5 | import { Glow, GlowCapture } from "@codaworks/react-glow";
6 |
7 | const japaneseCharacters =
8 | "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん";
9 |
10 | export default function JapaneseCharacter() {
11 | const [characters, setCharacters] = useState("");
12 |
13 | useEffect(() => {
14 | // Generate a long string of random Japanese characters
15 | const randomChars = Array.from(
16 | { length: 100 },
17 | () =>
18 | japaneseCharacters[
19 | Math.floor(Math.random() * japaneseCharacters.length)
20 | ]
21 | ).join(" ");
22 | setCharacters(randomChars);
23 | }, []);
24 |
25 | return (
26 |
29 |
43 | {characters.repeat(10)}
44 |
45 |
46 |
16 |
17 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/empire-ui/src/components/component-code-preview.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
2 | import CodePreview from "./code-preview";
3 | import CodeRenderer from "./code-renderer";
4 | import ComponentPreview from "./component-preview";
5 | import { extractCodeFromFilePath } from "@/lib/code";
6 |
7 | type ComponentCodePreview = {
8 | component: React.ReactElement;
9 | filePath?: string;
10 | name?: string;
11 | hasReTrigger?: boolean;
12 | classNameComponentContainer?: string;
13 | };
14 |
15 | export default function ComponentCodePreview({
16 | component,
17 | filePath,
18 | name,
19 | hasReTrigger,
20 | classNameComponentContainer,
21 | }: ComponentCodePreview) {
22 | // Use name as filePath if filePath is not provided
23 | const componentFilePath = filePath || name;
24 | // Only try to extract code if we have a valid path
25 | const fileContent = componentFilePath
26 | ? extractCodeFromFilePath(`src/components/${componentFilePath}.tsx`)
27 | : "// Component code not available";
28 |
29 | return (
30 |
31 |
32 |
33 | Preview
34 | Code
35 |
36 |
37 |
43 |
44 |
45 |
47 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/empire-ui/src/components/component-preview.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { cn } from "@/lib/utils";
3 | import { RotateCw } from "lucide-react";
4 | import { cloneElement, useState } from "react";
5 |
6 | type ComponentPreviewProps = {
7 | component: React.ReactElement;
8 | hasReTrigger?: boolean;
9 | className?: string;
10 | };
11 |
12 | export default function ComponentPreview({
13 | component,
14 | hasReTrigger = false,
15 | className,
16 | }: ComponentPreviewProps) {
17 | const [reTriggerKey, setReTriggerKey] = useState
30 | {hasReTrigger && (
31 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/empire-ui/src/components/component-source.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 | import { CodeBlockWrapper } from "@/components/code-block-wrapper";
7 |
8 | interface ComponentSourceProps extends React.HTMLAttributes
35 |
37 | )}
38 | {hasReTrigger
39 | ? cloneElement(component, { key: reTriggerKey })
40 | : component}
41 |
13 |
29 |
30 |
32 |
41 |
46 | )
47 | }
--------------------------------------------------------------------------------
/empire-ui/src/components/core/lanyard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from 'react';
4 | import { cn } from '@/lib/utils';
5 |
6 | interface LanyardProps extends React.HTMLAttributesAge Range
14 |
15 |
16 | {ageRange[0]} - {ageRange[1]} years
17 |
18 |
19 |
42 | 6
43 | 12
44 |
45 |
44 |
55 |
56 | );
57 | };
58 |
59 | export default Lanyard;
--------------------------------------------------------------------------------
/empire-ui/src/components/core/loading-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { createContext, useContext, useState, useEffect } from 'react';
4 | import { PageLoader } from '@/components/ui/page-loader';
5 |
6 | interface LoadingContextType {
7 | isLoading: boolean;
8 | startLoading: () => void;
9 | stopLoading: () => void;
10 | }
11 |
12 | const LoadingContext = createContext
56 | {children}
57 |
58 |
41 | {displayChildren}
42 |
43 |
18 |
19 |
25 | {isOpen ?
27 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/AIGrammarButtonExample.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AIGrammarCheckButton } from "../core/AIGrammarCheckButton";
4 |
5 | export const AIGrammarButtonExample = () => {
6 | return (
7 |
8 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/AIImageCaptionExample.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AIImageCaptionButton } from "../core/AIImageCaptionButton";
4 |
5 | export const AIImageCaptionButtonExample = () => {
6 | return (
7 |
9 |
17 |
10 | Artificial intelligence (AI) is a set of technologies that enable
11 | computers to perform advanced functions, such as learning, reasoning,
12 | and problem-solving. AI systems use logic and decision trees to learn
13 | from data, identify patterns, and mimic human decision-making.
14 |
15 |
8 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/AIParaphraserButtonExample.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AIPhraseButton } from "../core/AIParaphraserButton";
4 |
5 |
6 | export const AIParaphraserButtonExample = () => {
7 | return (
8 |
9 |
11 |
9 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/AISummarizerButtonExample.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AISummarizerButton } from "../core/AISummarizerButton";
4 |
5 | export const AISummarizerButtonExample = () => {
6 | return (
7 |
10 |
18 |
11 | Artificial intelligence (AI) is a set of technologies that enable
12 | computers to perform advanced functions, such as learning, reasoning,
13 | and problem-solving. AI systems use logic and decision trees to learn
14 | from data, identify patterns, and mimic human decision-making.
15 |
16 |
8 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/ExpandCardExample.tsx:
--------------------------------------------------------------------------------
1 | import { ExapndCard } from "@/components/core/expand-card";
2 |
3 | export const ExpandCardExample = () => {
4 | return (
5 |
9 |
30 |
10 | Artificial intelligence (AI) epitomizes the zenith of computational
11 | ingenuity, characterized by the synthesis of algorithmic structures
12 | capable of autonomously iterating upon vast multidimensional datasets.
13 | This process enables the transcendence of traditional symbolic logic,
14 | embedding within systems the capacity for recursive abstraction,
15 | inferential reasoning, and the dynamic modulation of predictive models
16 | through stochastic processes. These systems, leveraging advanced
17 | neural architectures, manifest a quasi-autonomous cognition that
18 | rivals, if not surpasses, biological neural networks in their ability
19 | to extrapolate, generalize, and synthesize novel patterns from
20 | chaotic, non-linear environments. Moreover, AI's confluence of
21 | unsupervised learning paradigms and reinforcement-driven optimization
22 | algorithms precipitates an unparalleled feedback loop of heuristic
23 | refinement. This phenomenon effectuates an emergent intelligence,
24 | capable of navigating hyperdimensional solution spaces with a finesse
25 | that reflects both non-Euclidean geometries and quantum computational
26 | principles.
27 |
28 |
6 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/PasscodeCardExample.tsx:
--------------------------------------------------------------------------------
1 | import { PasscodeCard } from "@/components/core/passcode-card";
2 |
3 | export const PasscodeCardExample = () => {
4 | return (
5 |
6 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/empire-ui/src/components/examples/TrainingSummaryCardExample.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "framer-motion";
4 |
5 | import { TrainingSummaryCard } from "@/components/core/training-summary-card";
6 |
7 | export const TrainingSummaryCardExample = () => {
8 | const trainingSummaries = [
9 | {
10 | accuracy: 0.95,
11 | loss: 0.12,
12 | epoch: 50,
13 | timeTaken: "2h 34m",
14 | modelName: "Neural Network",
15 | modelType: "Neural Network",
16 | datasetUsed: "CIFAR-10",
17 | },
18 | ];
19 |
20 | return (
21 |
22 | {/* Main content */}
23 |
24 |
49 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/empire-ui/src/components/layout/page-layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import { Navbar } from "@/components/common/navbar";
4 | import { EmpireFooter } from "@/components/common/empire-footer";
5 | import ScrollProgressLine from "@/components/ui/scroll-progress-line";
6 | import { ResponsiveWrapper } from "@/components/common/responsive-wrapper";
7 |
8 | interface PageLayoutProps {
9 | children: React.ReactNode;
10 | showScrollProgress?: boolean;
11 | scrollProgressColor?: string;
12 | scrollProgressDotSize?: number;
13 | scrollProgressDotSpacing?: number;
14 | }
15 |
16 | export const PageLayout = ({
17 | children,
18 | showScrollProgress = true,
19 | scrollProgressColor = "#ffffff",
20 | scrollProgressDotSize = 5,
21 | scrollProgressDotSpacing = 20
22 | }: PageLayoutProps) => {
23 | return (
24 | Recent Training Sessions
25 |
26 | {trainingSummaries.map((summary, index) => (
27 |
33 |
42 | console.log(`View report for session ${index + 1}`)
43 | }
44 | />
45 |
46 | ))}
47 |
48 |
41 | {children}
42 |
43 |
44 | {/* Footer - Constant across all pages */}
45 |
23 |
31 | );
32 | }
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/LiquidChrome.css:
--------------------------------------------------------------------------------
1 | .liquidChrome-container {
2 | width: 100%;
3 | height: 100%;
4 | }
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/PixelTransition.css:
--------------------------------------------------------------------------------
1 | .pixelated-image-card {
2 | position: relative;
3 | overflow: hidden;
4 | width: 100%;
5 | height: 100%;
6 | }
7 |
8 | .pixelated-image-card__default,
9 | .pixelated-image-card__active,
10 | .pixelated-image-card__pixels {
11 | width: 100%;
12 | height: 100%;
13 | position: absolute;
14 | top: 0;
15 | left: 0;
16 | }
17 |
18 | .pixelated-image-card__active {
19 | z-index: 2;
20 | }
21 |
22 | .pixelated-image-card__active {
23 | display: none;
24 | }
25 |
26 | .pixelated-image-card__pixels {
27 | pointer-events: none;
28 | position: absolute;
29 | z-index: 3;
30 | top: 0;
31 | left: 0;
32 | width: 100%;
33 | height: 100%;
34 | }
35 |
36 | .pixelated-image-card__pixel {
37 | display: none;
38 | position: absolute;
39 | }
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Avatar = React.forwardRef<
9 | React.ElementRef
24 |
25 |
26 |
27 |
28 |
29 | {children}
30 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export const BentoGridItem = ({
23 | className,
24 | title,
25 | description,
26 | header,
27 | icon,
28 | }: {
29 | className?: string;
30 | title?: string | React.ReactNode;
31 | description?: string | React.ReactNode;
32 | header?: React.ReactNode;
33 | icon?: React.ReactNode;
34 | }) => {
35 | return (
36 |
42 | {header}
43 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2",
25 | sm: "h-8 rounded-md px-3 text-xs",
26 | lg: "h-10 rounded-md px-8",
27 | icon: "h-9 w-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes
44 | {icon}
45 |
52 |
46 | {title}
47 |
48 |
49 | {description}
50 |
51 |
13 | {/* Particles Background - Fixed to cover entire viewport, behind everything */}
14 |
33 | );
34 | };
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/particles.css:
--------------------------------------------------------------------------------
1 | .particles-container {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
--------------------------------------------------------------------------------
/empire-ui/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef
15 |
27 |
28 | {/* Content - Above particles */}
29 |
30 | {children}
31 |
32 |
39 |
41 | )}
42 |
12 | {/* Spacer section to demonstrate scroll effect */}
13 |
44 | );
45 | }
--------------------------------------------------------------------------------
/empire-ui/src/examples/LanyardExample.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Lanyard from '../components/3d/Lanyard';
3 |
4 | /**
5 | * Example usage of the 3D Lanyard component
6 | *
7 | * This demonstrates different configurations and use cases
8 | */
9 | export default function LanyardExample() {
10 | return (
11 |
14 |
28 |
29 | {/* Features Section */}
30 |
15 |
27 | 16 | Scroll Down 17 |
18 |19 | To See The Features Section With Zoom Effect 20 |
21 |
22 |
25 |
26 |
34 |
43 |
35 |
42 | 36 | Section Complete 37 |
38 |39 | The image should now be settled in the background 40 |
41 |
12 | {/* Basic usage with default settings */}
13 |
46 | );
47 | }
48 |
49 | // Usage in any component:
50 | /*
51 | import Lanyard from './components/3d/Lanyard';
52 |
53 | function MyComponent() {
54 | return (
55 |
14 |
19 |
20 | {/* Custom positioning and gravity */}
21 | 15 | Basic Lanyard 16 |
17 |
22 |
31 |
32 | {/* Smaller container example */}
33 | 23 | Custom Gravity & Position 24 |
25 |
34 |
45 | 35 | Contained Lanyard 36 |
37 |
56 |
59 | );
60 | }
61 | */
--------------------------------------------------------------------------------
/empire-ui/src/global.d.ts:
--------------------------------------------------------------------------------
1 | export { };
2 |
3 | declare module '*.glb';
4 | declare module '*.png';
5 |
6 | declare module 'meshline' {
7 | export const MeshLineGeometry: any;
8 | export const MeshLineMaterial: any;
9 | }
10 |
11 | declare global {
12 | namespace JSX {
13 | interface IntrinsicElements {
14 | meshLineGeometry: any;
15 | meshLineMaterial: any;
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img1.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img2.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img3.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img4.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img5.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img6.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img7.png
--------------------------------------------------------------------------------
/empire-ui/src/illustrations/img8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/illustrations/img8.png
--------------------------------------------------------------------------------
/empire-ui/src/images/EMUI.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/EMUI.png
--------------------------------------------------------------------------------
/empire-ui/src/images/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/git.png
--------------------------------------------------------------------------------
/empire-ui/src/images/hello.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/hello.jpg
--------------------------------------------------------------------------------
/empire-ui/src/images/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img1.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img10.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img2.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img3.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img4.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img5.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img6.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img7.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img8.png
--------------------------------------------------------------------------------
/empire-ui/src/images/img9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/img9.png
--------------------------------------------------------------------------------
/empire-ui/src/images/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-ui/src/images/loader.gif
--------------------------------------------------------------------------------
/empire-ui/src/lib/code.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 |
4 | export const extractCodeFromFilePath = (filePath: string) => {
5 | try {
6 | console.log(`Attempting to read file: ${filePath}`);
7 | const fileContent = fs.readFileSync(filePath, "utf-8");
8 | return fileContent;
9 | } catch (error) {
10 | console.error(`Error reading file ${filePath}:`, error);
11 | return `// Error: Could not load file '${filePath}'`;
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/empire-ui/src/lib/custom-theme.ts:
--------------------------------------------------------------------------------
1 | import { createCssVariablesTheme } from "./theme-css-variables";
2 |
3 | export const noir = createCssVariablesTheme({
4 | name: "noir",
5 | variableDefaults: {
6 | foreground: "#B1B1B1",
7 | background: "#18181b",
8 | },
9 | });
10 |
11 | export const min_dark = createCssVariablesTheme({
12 | name: "min-dark",
13 | variableDefaults: {
14 | background: "#18181b",
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/empire-ui/src/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | import { GeistSans } from "geist/font/sans";
2 | import { GeistMono } from "geist/font/mono";
3 | import localFont from 'next/font/local'
4 |
5 | // Export fonts
6 | export { GeistSans, GeistMono };
7 |
8 | export const MinecartLCD = localFont({
9 | src: '../app/fonts/Minecart LCD.ttf',
10 | variable: '--font-minecart-lcd',
11 | })
12 |
--------------------------------------------------------------------------------
/empire-ui/src/lib/hooks/use-loading.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useLoading as useLoadingContext } from '@/components/core/loading-provider';
4 |
5 | // Re-export the hook for easier access
6 | export const useLoading = useLoadingContext;
7 |
8 | // Utility function to wrap async functions with loading state
9 | export const withLoading = My App
57 |
7 |
10 | );
11 | }
12 |
13 | export default TestComponent;
14 |
--------------------------------------------------------------------------------
/empire-ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "src/global.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/empire-web/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 |
13 | # testing
14 | /coverage
15 |
16 | # next.js
17 | /.next/
18 | /out/
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
--------------------------------------------------------------------------------
/empire-web/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/empire-web/app/(home)/layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { usePathname } from "next/navigation";
4 | import { useEffect } from "react";
5 |
6 | const LandingLayout = ({ children }: { children: React.ReactNode }) => {
7 | let pathname = usePathname();
8 |
9 | useEffect(() => {
10 | // Force dark mode on specific routes
11 | if (pathname === "/" || pathname?.startsWith("/templates") || pathname?.startsWith("/colors")) {
12 | document.documentElement.classList.add("dark");
13 | } else {
14 | // For other pages, respect user's theme preference
15 | document.documentElement.classList.remove("dark");
16 | }
17 | }, [pathname]);
18 |
19 | return (
20 | Testing Empire UI Component Import
8 | 9 |
21 | {children}
22 |
23 | );
24 | };
25 |
26 | export default LandingLayout;
27 |
--------------------------------------------------------------------------------
/empire-web/app/(home)/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import { PageLayout } from "@/components/layout/page-layout";
4 | import { ProductShowcase } from "@/components/common/product-showcase";
5 | import { NewComponentsCard, WavyColoursCard } from "@/components/common/feature-cards";
6 | import { FeaturesSection } from "@/components/common/features-section";
7 | import { ProductHighlights } from "@/components/common/product-highlights";
8 | import { WhyEmpireUI } from "@/components/common/why-empire-ui";
9 |
10 | const HomePage = () => {
11 | return (
12 |
15 | {/* Main content */}
16 |
42 |
17 | {/* Left column - Main product */}
18 |
32 |
33 | {/* Features Section - Full width below main content */}
34 |
19 |
21 |
22 | {/* Right column - Features */}
23 |
24 |
31 |
25 |
27 |
28 |
30 |
18 | {children}
19 |
20 | );
21 | };
22 |
23 | export default ComponentsLayout;
--------------------------------------------------------------------------------
/empire-web/app/cursor-test/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { Suspense } from 'react';
3 | import dynamic from 'next/dynamic';
4 |
5 | const TestCursor = dynamic(() => import('@/components/ui/TestCursor'), {
6 | ssr: false,
7 | loading: () => (
8 |
9 | Loading liquid cursor effect...
10 |
11 | )
12 | });
13 |
14 | export default function CursorTestPage() {
15 | return (
16 |
17 |
20 |
25 | }
26 | >
27 |
21 |
22 |
24 | Loading Three.js cursor effect...
23 |
10 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/empire-web/components/code-block-wrapper.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 | import { Button } from "@/components/ui/button";
7 | import {
8 | Collapsible,
9 | CollapsibleContent,
10 | CollapsibleTrigger,
11 | } from "@/components/ui/collapsible";
12 |
13 | interface CodeBlockProps extends React.HTMLAttributes
11 | Docs
12 |
13 | {title}
15 |
28 |
32 |
41 |
54 |
38 | {children}
39 |
40 |
47 |
48 |
51 |
52 |
53 |
14 |
15 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/empire-web/components/code-preview.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Check, Copy } from "lucide-react";
3 | import { useState } from "react";
4 |
5 | type CodePreviewProps = {
6 | code: string;
7 | children: React.ReactNode;
8 | };
9 |
10 | export default function CodePreview({ code, children }: CodePreviewProps) {
11 | const [hasCheckIcon, setHasCheckIcon] = useState(false);
12 |
13 | const onCopy = () => {
14 | navigator.clipboard.writeText(code);
15 | setHasCheckIcon(true);
16 |
17 | setTimeout(() => {
18 | setHasCheckIcon(false);
19 | }, 1000);
20 | };
21 |
22 | return (
23 |
24 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/empire-web/components/code-renderer.tsx:
--------------------------------------------------------------------------------
1 | import { codeToHtml } from "@/lib/shiki";
2 |
3 | type CodeRenderer = {
4 | code: string;
5 | lang: string;
6 | };
7 |
8 | export default async function CodeRenderer({ code, lang }: CodeRenderer) {
9 | const html = await codeToHtml({
10 | code,
11 | lang,
12 | });
13 |
14 | return (
15 |
28 |
43 |
33 |
35 |
40 |
42 |
44 |
48 |
45 | {children}
46 |
47 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/empire-web/components/common/command-menu.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/components/common/command-menu.tsx
--------------------------------------------------------------------------------
/empire-web/components/common/component-card-desktop.tsx:
--------------------------------------------------------------------------------
1 | interface DesktopComponentCardProps {
2 | rotateDeg: string;
3 | translate: string;
4 | componentGif: string;
5 | title: string;
6 | badge?: string;
7 | badgeColor?: string;
8 | }
9 |
10 | export const DesktopComponentCard: React.FC
23 |
29 |
30 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/empire-web/components/common/component-card-mobile.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardContent } from "@/components/ui/card";
2 | import Link from "next/link";
3 |
4 | interface MobileComponentCardProps {
5 | src: string;
6 | alt: string;
7 | title: string;
8 | component: string;
9 | badge?: string;
10 | badgeColor?: string;
11 | }
12 |
13 | export const MobileComponentCard = ({
14 | src,
15 | alt,
16 | title,
17 | component,
18 | badge,
19 | badgeColor,
20 | }: MobileComponentCardProps) => {
21 | return (
22 |
23 |
34 |
38 |
39 |
40 | {badge && (
41 |
42 | {badge}
43 |
44 | )}
45 |
46 |
47 |
51 |
48 | {title}
49 |
50 |
29 | {badge}
30 |
31 | )}
32 |
33 |
34 |
37 | {title}
35 | Click to view documentation
36 |
6 |
11 | );
12 | };
13 |
14 | interface IconProps {
15 | src: string;
16 | title: string;
17 | alt: string;
18 | }
19 |
20 | const Icon: React.FC
23 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/empire-web/components/common/japanese.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "framer-motion";
4 | import { useEffect, useState } from "react";
5 | import { Glow, GlowCapture } from "@codaworks/react-glow";
6 |
7 | const japaneseCharacters =
8 | "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん";
9 |
10 | export default function JapaneseCharacter() {
11 | const [characters, setCharacters] = useState("");
12 |
13 | useEffect(() => {
14 | // Generate a long string of random Japanese characters
15 | const randomChars = Array.from(
16 | { length: 100 },
17 | () =>
18 | japaneseCharacters[
19 | Math.floor(Math.random() * japaneseCharacters.length)
20 | ]
21 | ).join(" ");
22 | setCharacters(randomChars);
23 | }, []);
24 |
25 | return (
26 |
29 |
43 | {characters.repeat(10)}
44 |
45 |
46 |
16 |
17 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/empire-web/components/component-code-preview.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
2 | import CodePreview from "./code-preview";
3 | import CodeRenderer from "./code-renderer";
4 | import ComponentPreview from "./component-preview";
5 | import { extractCodeFromFilePath } from "@/lib/code";
6 |
7 | type ComponentCodePreview = {
8 | component: React.ReactElement;
9 | filePath?: string;
10 | name?: string;
11 | hasReTrigger?: boolean;
12 | classNameComponentContainer?: string;
13 | };
14 |
15 | export default function ComponentCodePreview({
16 | component,
17 | filePath,
18 | name,
19 | hasReTrigger,
20 | classNameComponentContainer,
21 | }: ComponentCodePreview) {
22 | // Use name as filePath if filePath is not provided
23 | const componentFilePath = filePath || name;
24 | // Only try to extract code if we have a valid path
25 | const fileContent = componentFilePath
26 | ? extractCodeFromFilePath(`src/components/${componentFilePath}.tsx`)
27 | : "// Component code not available";
28 |
29 | return (
30 |
31 |
32 |
33 | Preview
34 | Code
35 |
36 |
37 |
43 |
44 |
45 |
47 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/empire-web/components/component-preview.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { cn } from "@/lib/utils";
3 | import { RotateCw } from "lucide-react";
4 | import { cloneElement, useState } from "react";
5 |
6 | type ComponentPreviewProps = {
7 | component: React.ReactElement;
8 | hasReTrigger?: boolean;
9 | className?: string;
10 | };
11 |
12 | export default function ComponentPreview({
13 | component,
14 | hasReTrigger = false,
15 | className,
16 | }: ComponentPreviewProps) {
17 | const [reTriggerKey, setReTriggerKey] = useState
30 | {hasReTrigger && (
31 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/empire-web/components/component-source.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 | import { CodeBlockWrapper } from "@/components/code-block-wrapper";
7 |
8 | interface ComponentSourceProps extends React.HTMLAttributes
35 |
37 | )}
38 | {hasReTrigger
39 | ? cloneElement(component, { key: reTriggerKey })
40 | : component}
41 |
56 | {children}
57 |
58 |
9 |
26 | );
27 | }
--------------------------------------------------------------------------------
/empire-web/components/layout/page-layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import { Navbar } from "@/components/common/navbar";
4 | import { EmpireFooter } from "@/components/common/empire-footer";
5 | import ScrollProgressLine from "@/components/ui/scroll-progress-line";
6 | import { ParticlesBackground } from "@/components/ui/particles-background";
7 | import { ResponsiveWrapper } from "@/components/common/responsive-wrapper";
8 |
9 | interface PageLayoutProps {
10 | children: React.ReactNode;
11 | showScrollProgress?: boolean;
12 | scrollProgressColor?: string;
13 | scrollProgressDotSize?: number;
14 | scrollProgressDotSpacing?: number;
15 | }
16 |
17 | export const PageLayout = ({
18 | children,
19 | showScrollProgress = true,
20 | scrollProgressColor = "#ffffff",
21 | scrollProgressDotSize = 5,
22 | scrollProgressDotSpacing = 20
23 | }: PageLayoutProps) => {
24 | return (
25 |
23 |
25 | Wavy Background
24 |
44 | {children}
45 |
46 |
47 | {/* Footer - Constant across all pages */}
48 |
23 |
31 | );
32 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/Balatro.css:
--------------------------------------------------------------------------------
1 | .balatro-container {
2 | width: 100%;
3 | height: 100%;
4 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/Beams.css:
--------------------------------------------------------------------------------
1 | .beams-container {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/DecryptedText.tsx:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/empire-web/components/ui/Dither.css:
--------------------------------------------------------------------------------
1 | .dither-container {
2 | width: 100%;
3 | height: 100%;
4 | position: relative;
5 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/LiquidChrome.css:
--------------------------------------------------------------------------------
1 | .liquidChrome-container {
2 | width: 100%;
3 | height: 100%;
4 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/PixelTransition.css:
--------------------------------------------------------------------------------
1 | .pixelated-image-card {
2 | position: relative;
3 | overflow: hidden;
4 | width: 100%;
5 | height: 100%;
6 | }
7 |
8 | .pixelated-image-card__default,
9 | .pixelated-image-card__active,
10 | .pixelated-image-card__pixels {
11 | width: 100%;
12 | height: 100%;
13 | position: absolute;
14 | top: 0;
15 | left: 0;
16 | }
17 |
18 | .pixelated-image-card__active {
19 | z-index: 2;
20 | }
21 |
22 | .pixelated-image-card__active {
23 | display: none;
24 | }
25 |
26 | .pixelated-image-card__pixels {
27 | pointer-events: none;
28 | position: absolute;
29 | z-index: 3;
30 | top: 0;
31 | left: 0;
32 | width: 100%;
33 | height: 100%;
34 | }
35 |
36 | .pixelated-image-card__pixel {
37 | display: none;
38 | position: absolute;
39 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/Threads.css:
--------------------------------------------------------------------------------
1 | .threads-container {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | .threads-container canvas {
8 | position: absolute;
9 | top: 0;
10 | left: 0;
11 | width: 100% !important;
12 | height: 100% !important;
13 | pointer-events: none;
14 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/Waves.css:
--------------------------------------------------------------------------------
1 | .waves {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | margin: 0;
6 | padding: 0;
7 | width: 100%;
8 | height: 100%;
9 | overflow: hidden;
10 | }
11 |
12 | .waves::before {
13 | content: "";
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | width: 0.5rem;
18 | height: 0.5rem;
19 | background: #160000;
20 | border-radius: 50%;
21 | transform: translate3d(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%), 0);
22 | will-change: transform;
23 | }
24 |
25 | .waves-canvas {
26 | display: block;
27 | width: 100%;
28 | height: 100%;
29 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Avatar = React.forwardRef<
9 | React.ElementRef
24 |
25 |
26 |
27 |
28 |
29 | {children}
30 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export const BentoGridItem = ({
23 | className,
24 | title,
25 | description,
26 | header,
27 | icon,
28 | }: {
29 | className?: string;
30 | title?: string | React.ReactNode;
31 | description?: string | React.ReactNode;
32 | header?: React.ReactNode;
33 | icon?: React.ReactNode;
34 | }) => {
35 | return (
36 |
42 | {header}
43 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/empire-web/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2",
25 | sm: "h-8 rounded-md px-3 text-xs",
26 | lg: "h-10 rounded-md px-8",
27 | icon: "h-9 w-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes
44 | {icon}
45 |
52 |
46 | {title}
47 |
48 |
49 | {description}
50 |
51 |
13 | {/* Particles Background - Fixed to cover entire viewport, behind everything */}
14 |
33 | );
34 | };
--------------------------------------------------------------------------------
/empire-web/components/ui/particles.css:
--------------------------------------------------------------------------------
1 | .particles-container {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | .particles-container canvas {
8 | position: absolute;
9 | top: 0;
10 | left: 0;
11 | width: 100% !important;
12 | height: 100% !important;
13 | pointer-events: none;
14 | }
15 |
16 | /* Ensure particles container expands to fill its parent */
17 | body, html {
18 | overflow-x: hidden;
19 | width: 100%;
20 | height: 100%;
21 | }
22 |
23 | /* Fix for potential z-index stacking issues */
24 | .particles-container::before {
25 | content: '';
26 | position: absolute;
27 | top: 0;
28 | left: 0;
29 | right: 0;
30 | bottom: 0;
31 | background-color: transparent;
32 | pointer-events: none;
33 | z-index: -1;
34 | }
--------------------------------------------------------------------------------
/empire-web/components/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SliderPrimitive from "@radix-ui/react-slider"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Slider = React.forwardRef<
9 | React.ElementRef
15 |
27 |
28 | {/* Content - Above particles */}
29 |
30 | {children}
31 |
32 |
12 | {/* Spacer section to demonstrate scroll effect */}
13 |
44 | );
45 | }
--------------------------------------------------------------------------------
/empire-web/illustrations/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img1.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img2.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img3.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img4.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img5.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img6.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img7.png
--------------------------------------------------------------------------------
/empire-web/illustrations/img8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/illustrations/img8.png
--------------------------------------------------------------------------------
/empire-web/images/EMUI.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/EMUI.png
--------------------------------------------------------------------------------
/empire-web/images/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/git.png
--------------------------------------------------------------------------------
/empire-web/images/hello.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/hello.jpg
--------------------------------------------------------------------------------
/empire-web/images/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img1.png
--------------------------------------------------------------------------------
/empire-web/images/img10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img10.png
--------------------------------------------------------------------------------
/empire-web/images/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img2.png
--------------------------------------------------------------------------------
/empire-web/images/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img3.png
--------------------------------------------------------------------------------
/empire-web/images/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img4.png
--------------------------------------------------------------------------------
/empire-web/images/img5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img5.png
--------------------------------------------------------------------------------
/empire-web/images/img6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img6.png
--------------------------------------------------------------------------------
/empire-web/images/img7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img7.png
--------------------------------------------------------------------------------
/empire-web/images/img8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img8.png
--------------------------------------------------------------------------------
/empire-web/images/img9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/img9.png
--------------------------------------------------------------------------------
/empire-web/images/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/empirecodefoundation/ui/0881a009a1a760f3fe3696cfc9e910e4777a075c/empire-web/images/loader.gif
--------------------------------------------------------------------------------
/empire-web/lib/code.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 |
4 | export const extractCodeFromFilePath = (filePath: string) => {
5 | try {
6 | console.log(`Attempting to read file: ${filePath}`);
7 | const fileContent = fs.readFileSync(filePath, "utf-8");
8 | return fileContent;
9 | } catch (error) {
10 | console.error(`Error reading file ${filePath}:`, error);
11 | return `// Error: Could not load file '${filePath}'`;
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/empire-web/lib/custom-theme.ts:
--------------------------------------------------------------------------------
1 | import { createCssVariablesTheme } from "./theme-css-variables";
2 |
3 | export const noir = createCssVariablesTheme({
4 | name: "noir",
5 | variableDefaults: {
6 | foreground: "#B1B1B1",
7 | background: "#18181b",
8 | },
9 | });
10 |
11 | export const min_dark = createCssVariablesTheme({
12 | name: "min-dark",
13 | variableDefaults: {
14 | background: "#18181b",
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/empire-web/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | import { GeistSans } from "geist/font/sans";
2 | import { GeistMono } from "geist/font/mono";
3 | import localFont from 'next/font/local'
4 |
5 | // Export fonts
6 | export { GeistSans, GeistMono };
7 |
8 | export const MinecartLCD = localFont({
9 | src: '../app/fonts/Minecart LCD.ttf',
10 | variable: '--font-minecart-lcd',
11 | })
12 |
--------------------------------------------------------------------------------
/empire-web/lib/hooks/use-loading.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useLoading as useLoadingContext } from '@/components/core/loading-provider';
4 |
5 | // Re-export the hook for easier access
6 | export const useLoading = useLoadingContext;
7 |
8 | // Utility function to wrap async functions with loading state
9 | export const withLoading =
14 |
28 |
29 | {/* Features Section */}
30 |
15 |
27 | 16 | Scroll Down 17 |
18 |19 | To See The Features Section With Zoom Effect 20 |
21 |
22 |
25 |
26 |
34 |
43 |
35 |
42 | 36 | Section Complete 37 |
38 |39 | The image should now be settled in the background 40 |
41 |
7 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/packages/components/src/components/ui/PasscodeCard/index.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { PasscodeCard } from "@/components/core/passcode-card";
3 |
4 | export const PasscodeCardExample = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/packages/components/src/components/ui/TrainingSummaryCard/index.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | "use client";
3 |
4 | import { motion } from "framer-motion";
5 |
6 | import { TrainingSummaryCard } from "@/components/core/training-summary-card";
7 |
8 | export const TrainingSummaryCardExample = () => {
9 | const trainingSummaries = [
10 | {
11 | accuracy: 0.95,
12 | loss: 0.12,
13 | epoch: 50,
14 | timeTaken: "2h 34m",
15 | modelName: "Neural Network",
16 | modelType: "Neural Network",
17 | datasetUsed: "CIFAR-10",
18 | },
19 | ];
20 |
21 | return (
22 |
23 | {/* Main content */}
24 |
25 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/packages/components/src/components/ui/button/apiHandler.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | //apiHandler.ts
3 | export {};
4 |
--------------------------------------------------------------------------------
/packages/components/src/components/ui/button/styles.css:
--------------------------------------------------------------------------------
1 | @layer base {
2 | :root {
3 | --background: 0 0% 100%;
4 | --foreground: 222.2 84% 4.9%;
5 | --card: 0 0% 100%;
6 | --card-foreground: 222.2 84% 4.9%;
7 | --popover: 0 0% 100%;
8 | --popover-foreground: 222.2 84% 4.9%;
9 | --primary: 222.2 47.4% 11.2%;
10 | --primary-foreground: 210 40% 98%;
11 | --secondary: 210 40% 96.1%;
12 | --secondary-foreground: 222.2 47.4% 11.2%;
13 | --muted: 210 40% 96.1%;
14 | --muted-foreground: 215.4 16.3% 46.9%;
15 | --accent: 210 40% 96.1%;
16 | --accent-foreground: 222.2 47.4% 11.2%;
17 | --destructive: 0 84.2% 60.2%;
18 | --destructive-foreground: 210 40% 98%;
19 | --border: 214.3 31.8% 91.4%;
20 | --input: 214.3 31.8% 91.4%;
21 | --ring: 222.2 84% 4.9%;
22 | --radius: 0.5rem;
23 | }
24 |
25 | .dark {
26 | --background: 222.2 84% 4.9%;
27 | --foreground: 210 40% 98%;
28 | --card: 222.2 84% 4.9%;
29 | --card-foreground: 210 40% 98%;
30 | --popover: 222.2 84% 4.9%;
31 | --popover-foreground: 210 40% 98%;
32 | --primary: 210 40% 98%;
33 | --primary-foreground: 222.2 47.4% 11.2%;
34 | --secondary: 217.2 32.6% 17.5%;
35 | --secondary-foreground: 210 40% 98%;
36 | --muted: 217.2 32.6% 17.5%;
37 | --muted-foreground: 215 20.2% 65.1%;
38 | --accent: 217.2 32.6% 17.5%;
39 | --accent-foreground: 210 40% 98%;
40 | --destructive: 0 62.8% 30.6%;
41 | --destructive-foreground: 210 40% 98%;
42 | --border: 217.2 32.6% 17.5%;
43 | --input: 217.2 32.6% 17.5%;
44 | --ring: 212.7 26.8% 83.9%;
45 | }
46 | }
--------------------------------------------------------------------------------
/packages/components/src/index.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | export * from "./components/ui/button";
3 | export * from "./components/ui/chatbot";
4 | export * from './components/ui/AuroraBackgrounds';
5 | export * from './components/ui/DatasetOverviewCard';
6 | export * from './components/ui/ExpandCard';
7 | export * from './components/ui/PasscodeCard';
8 | export * from './components/ui/PredictionOutputCard';
9 | export * from './components/ui/StepForm';
10 | export * from './components/ui/toast-';
11 | export * from './components/ui/TrainingSummaryCard';
12 |
13 | // New AI Components
14 | export * from './components/ui/MCPInterface';
15 | export * from './components/ui/NodeCanvas';
16 |
17 | // Utilities
18 | export * from './lib/utils';
19 |
--------------------------------------------------------------------------------
/packages/components/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { type ClassValue, clsx } from "clsx";
3 | import { twMerge } from "tailwind-merge";
4 |
5 | export function cn(...inputs: ClassValue[]) {
6 | return twMerge(clsx(inputs));
7 | }
8 |
--------------------------------------------------------------------------------
/packages/components/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2018",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": false,
8 | "forceConsistentCasingInFileNames": true,
9 | "esModuleInterop": true,
10 | "noImplicitAny": false,
11 | "noResolve": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "react-jsx",
17 | "incremental": true,
18 | "baseUrl": ".",
19 | "paths": {
20 | "@/*": ["./src/*"]
21 | },
22 | "outDir": "dist"
23 | },
24 | "include": ["src/**/*.ts", "src/**/*.tsx"],
25 | "exclude": ["node_modules", "dist"]
26 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "skipLibCheck": true,
10 | "strict": false,
11 | "noEmit": true,
12 | "incremental": true,
13 | "module": "esnext",
14 | "esModuleInterop": true,
15 | "moduleResolution": "node",
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "jsx": "preserve",
19 | "plugins": [
20 | {
21 | "name": "next"
22 | }
23 | ]
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | ".next/types/**/*.ts",
28 | "**/*.ts",
29 | "**/*.tsx"
30 | ],
31 | "exclude": [
32 | "node_modules"
33 | ]
34 | }
35 |
--------------------------------------------------------------------------------
Recent Training Sessions
26 |
27 | {trainingSummaries.map((summary, index) => (
28 |
34 |
43 | console.log(`View report for session ${index + 1}`)
44 | }
45 | />
46 |
47 | ))}
48 |
49 |