diff --git a/client/app/Components/UI/IRISCompare.tsx b/client/app/Components/UI/IRISCompare.tsx new file mode 100644 index 0000000..d136f10 --- /dev/null +++ b/client/app/Components/UI/IRISCompare.tsx @@ -0,0 +1,55 @@ +import { + ImageComparison, + ImageComparisonImage, + ImageComparisonSlider, +} from "../core/ImageComparsion"; + +export function IRISCompare() { + return ( +
+
+ + Before: v1.3.0 + +
+ +
+ + After: Current Build + +
+ + + + + + + +
+ + + + +
+ + +
+ ); +} diff --git a/client/app/Components/UI/IrisHero.tsx b/client/app/Components/UI/IrisHero.tsx index 3079035..8b6fd37 100644 --- a/client/app/Components/UI/IrisHero.tsx +++ b/client/app/Components/UI/IrisHero.tsx @@ -74,7 +74,7 @@ export default function IrisHero({ "0 0 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,0.9)", }} > - Integrated Responsive Intelligence System + Your High-Performance Desktop Assistant

- Your device. Fully under command.{" "} - Speak once — IRIS - handles the rest. From files and apps to browser and beyond,{" "} - - real-time, zero friction. - + Command your PC completely hands-free.{" "} + Simply Speak and + let IRIS manage your files, analyze your screen, and control your + applications with{" "} + zero friction.

@@ -102,15 +101,15 @@ export default function IrisHero({ className="text-[11px] font-mono text-white tracking-widest uppercase font-semibold" style={{ textShadow: "0 0 10px rgba(0,0,0,1)" }} > - Voice-native AI + Native Voice Control
} iconRight={ @@ -121,7 +120,7 @@ export default function IrisHero({ } iconRight={ @@ -134,10 +133,10 @@ export default function IrisHero({
{[ - { label: "Latency", value: "<1.5s" }, - { label: "Context", value: "128k+" }, - { label: "Uptime", value: "24/7" }, - { label: "Local AI", value: "On-device" }, + { label: "Wake Word", value: "Offline" }, + { label: "Execution", value: "Real-Time" }, + { label: "Integration", value: "Native OS" }, + { label: "Memory", value: "Persistent" }, ].map(({ label, value }) => (
{ + children: ReactNode; + className?: string; +} + +interface BentoCardProps extends ComponentPropsWithoutRef<"div"> { + name: string; + className: string; + background: ReactNode; + Icon: React.ElementType; + description: string; + href: string; + cta: string; +} + +const BentoGrid = ({ children, className, ...props }: BentoGridProps) => { + return ( +
+ {children} +
+ ); +}; + +const BentoCard = ({ + name, + className, + background, + Icon, + description, + href, + cta, + ...props +}: BentoCardProps) => ( +
+
{background}
+ +
+
+ +

+ {name} +

+

+ {description} +

+
+
+ +
+
+); + +const ImageHeader = ({ src, alt }: { src: string; alt: string }) => { + return ( +
+ {alt} +
+
+ ); +}; + +const items = [ + { + name: "Deep System & File Execution", + description: + "Total file system access. IRIS creates folders, reads code files, executes terminal scripts, and manages your local drives without lifting a finger.", + background: , + Icon: Terminal, + href: "#", + cta: "View Module", + className: + "md:col-span-2 border-white/5 hover:border-[#10b981]/50 bg-black", + }, + { + name: "WhatsApp Automation", + description: + "Bypass the browser. Schedule and dispatch WhatsApp messages autonomously.", + background: ( + + ), + Icon: MessageSquare, + href: "#", + cta: "View Module", + className: + "md:col-span-1 border-white/5 hover:border-[#10b981]/50 bg-black", + }, + { + name: "Mobile Telekinesis", + description: + "Absolute Android integration. Read incoming notifications, push files, and launch apps directly from your PC.", + background: , + Icon: Smartphone, + href: "#", + cta: "View Module", + className: + "md:col-span-1 border-white/5 hover:border-[#10b981]/50 bg-black", + }, + { + name: "Autonomous Deep Research", + description: + "Deploys crawlers to scrape live web data, digest documentation, and synthesize full reports directly into your workspace.", + background: ( + + ), + Icon: Globe, + href: "#", + cta: "View Module", + className: + "md:col-span-2 border-white/5 hover:border-[#10b981]/50 bg-black", + }, + { + name: "Live Web & Browser Control", + description: + "Hack the DOM. IRIS manipulates live websites, extracts visual UI into raw code, and generates Tailwind on the fly.", + background: , + Icon: Code, + href: "#", + cta: "View Module", + className: + "md:col-span-2 border-white/5 hover:border-[#10b981]/50 bg-black", + }, + { + name: "Screen Peeling & Optics", + description: + "IRIS sees your monitor. It targets UI coordinates, reads OCR text, and injects phantom keystrokes system-wide.", + background: , + Icon: ScanLine, + href: "#", + cta: "View Module", + className: + "md:col-span-1 border-white/5 hover:border-[#10b981]/50 bg-black", + }, +]; + +export default function SystemsSection() { + return ( +
+
+ +
+
+
+ + + Core Capabilities + +
+ +

+ Absolute Control.
+ + Zero Friction. + +

+ +

+ IRIS hooks directly into your operating system. It sees your screen, + manages your files, automates your terminal, and commands your + mobile device. No wrappers. Just raw execution. +

+
+ + + {items.map((item, i) => ( + + ))} + +
+
+ ); +} \ No newline at end of file diff --git a/client/app/Components/core/BentoCard.tsx b/client/app/Components/core/BentoCard.tsx new file mode 100644 index 0000000..b5bf6a4 --- /dev/null +++ b/client/app/Components/core/BentoCard.tsx @@ -0,0 +1,71 @@ +import { type ComponentPropsWithoutRef, type ReactNode } from "react"; + +import { cn } from "@/app/lib/utils"; + +interface BentoGridProps extends ComponentPropsWithoutRef<"div"> { + children: ReactNode; + className?: string; +} + +interface BentoCardProps extends ComponentPropsWithoutRef<"div"> { + name: string; + className: string; + background: ReactNode; + Icon: React.ElementType; + description: string; + href: string; + cta: string; +} + +const BentoGrid = ({ children, className, ...props }: BentoGridProps) => { + return ( +
+ {children} +
+ ); +}; + +const BentoCard = ({ + name, + className, + background, + Icon, + description, + href, + cta, + ...props +}: BentoCardProps) => ( +
+
{background}
+
+
+ +

+ {name} +

+

{description}

+
+
+ +
+
+); + +export { BentoCard, BentoGrid }; diff --git a/client/app/Components/core/ImageComparsion.tsx b/client/app/Components/core/ImageComparsion.tsx new file mode 100644 index 0000000..912c7a1 --- /dev/null +++ b/client/app/Components/core/ImageComparsion.tsx @@ -0,0 +1,147 @@ +"use client"; +import { cn } from "../../lib/utils"; +import { useState, createContext, useContext } from "react"; +import { + motion, + MotionValue, + SpringOptions, + useMotionValue, + useSpring, + useTransform, +} from "motion/react"; + +const ImageComparisonContext = createContext< + | { + sliderPosition: number; + setSliderPosition: (pos: number) => void; + motionSliderPosition: MotionValue; + } + | undefined +>(undefined); + +export type ImageComparisonProps = { + children: React.ReactNode; + className?: string; + enableHover?: boolean; + springOptions?: SpringOptions; +}; + +const DEFAULT_SPRING_OPTIONS = { + bounce: 0, + duration: 0, +}; + +function ImageComparison({ + children, + className, + enableHover, + springOptions, +}: ImageComparisonProps) { + const [isDragging, setIsDragging] = useState(false); + const motionValue = useMotionValue(50); + const motionSliderPosition = useSpring( + motionValue, + springOptions ?? DEFAULT_SPRING_OPTIONS, + ); + const [sliderPosition, setSliderPosition] = useState(50); + + const handleDrag = (event: React.MouseEvent | React.TouchEvent) => { + if (!isDragging && !enableHover) return; + + const containerRect = ( + event.currentTarget as HTMLElement + ).getBoundingClientRect(); + const x = + "touches" in event + ? event.touches[0].clientX - containerRect.left + : (event as React.MouseEvent).clientX - containerRect.left; + + const percentage = Math.min( + Math.max((x / containerRect.width) * 100, 0), + 100, + ); + motionValue.set(percentage); + setSliderPosition(percentage); + }; + + return ( + +
!enableHover && setIsDragging(true)} + onMouseUp={() => !enableHover && setIsDragging(false)} + onMouseLeave={() => !enableHover && setIsDragging(false)} + onTouchMove={handleDrag} + onTouchStart={() => !enableHover && setIsDragging(true)} + onTouchEnd={() => !enableHover && setIsDragging(false)} + > + {children} +
+ + ); +} + +const ImageComparisonImage = ({ + className, + alt, + src, + position, +}: { + className?: string; + alt: string; + src: string; + position: "left" | "right"; +}) => { + const { motionSliderPosition } = useContext(ImageComparisonContext)!; + const leftClipPath = useTransform( + motionSliderPosition, + (value) => `inset(0 0 0 ${value}%)`, + ); + const rightClipPath = useTransform( + motionSliderPosition, + (value) => `inset(0 ${100 - value}% 0 0)`, + ); + + return ( + + ); +}; + +const ImageComparisonSlider = ({ + className, + children, +}: { + className: string; + children?: React.ReactNode; +}) => { + const { motionSliderPosition } = useContext(ImageComparisonContext)!; + + const left = useTransform(motionSliderPosition, (value) => `${value}%`); + + return ( + + {children} + + ); +}; + +export { ImageComparison, ImageComparisonImage, ImageComparisonSlider }; diff --git a/client/app/Components/core/bento-grid.tsx b/client/app/Components/core/bento-grid.tsx new file mode 100644 index 0000000..6cb4e62 --- /dev/null +++ b/client/app/Components/core/bento-grid.tsx @@ -0,0 +1,54 @@ +import { cn } from "@/app/lib/utils"; + +export const BentoGrid = ({ + className, + children, +}: { + className?: string; + children?: React.ReactNode; +}) => { + return ( +
+ {children} +
+ ); +}; + +export const BentoGridItem = ({ + className, + title, + description, + header, + icon, +}: { + className?: string; + title?: string | React.ReactNode; + description?: string | React.ReactNode; + header?: React.ReactNode; + icon?: React.ReactNode; +}) => { + return ( +
+ {header} +
+ {icon} +
+ {title} +
+
+ {description} +
+
+
+ ); +}; diff --git a/client/app/Landing/IRIS.tsx b/client/app/Landing/IRIS.tsx index 4260fab..de3ca14 100644 --- a/client/app/Landing/IRIS.tsx +++ b/client/app/Landing/IRIS.tsx @@ -5,7 +5,6 @@ import { ScrollTrigger } from "gsap/ScrollTrigger"; import Header from "../Components/Header"; import { useRef, useState, useEffect } from "react"; import Footer from "../Components/Footer"; -import MagicBento from "../utils/MagicBento"; import Image from "next/image"; import LogoLoop from "../utils/LogoLoop"; import { @@ -28,60 +27,11 @@ import { TbBrandSocketIo } from "react-icons/tb"; import IrisHero from "../Components/UI/IrisHero"; import { MacbookScroll } from "../constants/MacbookScroll"; import { ContainerScroll } from "../constants/ContainerScroll"; +import { IRISCompare } from "../Components/UI/IRISCompare"; +import SystemsSection from "../Components/UI/SystemSection"; gsap.registerPlugin(ScrollTrigger); -const CodeBlock = ({ code }: { code: string }) => { - const [copied, setCopied] = useState(false); - const handleCopy = () => { - navigator.clipboard.writeText(code); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - - return ( -
-
- {code} - -
-
- ); -}; - const IRIS = () => { const containerRef = useRef(null); const heroTextRef = useRef(null); @@ -210,13 +160,14 @@ const IRIS = () => { "drop-shadow(0px 0px 15px rgba(57, 255, 20, 1)) drop-shadow(0px 0px 50px rgba(57, 255, 20, 0.8))", }} > - Your AI. Your Rules. + Total System Control.

- One Voice. Total Control Over Your Device. + Run terminals, automate UI, link your phone, and execute deep + OS tasks hands-free.

} @@ -230,7 +181,7 @@ const IRIS = () => { /> } - src={`/img/screen.png`} + src={`/iris.png`} showGradient={false} /> @@ -239,8 +190,8 @@ const IRIS = () => { -

- Run IRIS straight from your
+

+ Total command over your
{ "drop-shadow(0px 0px 15px rgba(57, 255, 20, 1)) drop-shadow(0px 0px 50px rgba(57, 255, 20, 0.8))", }} > - Terminal + Mobile Device.

- +

+ Read notifications, push files, and launch Android + applications directly from your desktop. +

} > hero +
+

+ Built with a bleeding-edge modern stack +

+ +
+ +
+
+

+ Rewritten for Speed. +

+

+ v1.3 was a buggy prototype. The new engine is instantaneous, + stable, and completely native. +

+
+ +
+ +
+
+ +
+
+ +
+
+
@@ -278,10 +278,10 @@ const IRIS = () => { "drop-shadow(0px 0px 15px rgba(57, 255, 20, 1)) drop-shadow(0px 0px 50px rgba(57, 255, 20, 0.8))", }} > - Meet IRIS AI + Built to Execute.

- The Agentic Assistant Built for the Future + Lightning-fast voice response and massive context memory.

@@ -318,25 +318,25 @@ const IRIS = () => {
- 24/7 + IRIS - Autonomous + Wake Word
- <1.5s + <1s - Latency + Voice Latency
- 128K+ + 1M+ Context Window @@ -361,74 +361,6 @@ const IRIS = () => {
-
-

- Built with a bleeding-edge modern stack -

- -
- -
-
- -
-
-
- - - IRIS_OS // ACTIVE_MODULES - -
- -

- System{" "} - - Capabilities. - -

- -

- IRIS is not a chatbot; it is a deep-system neural extension. By - weaponizing{" "} - - kernel-level execution hooks - - , autonomous keystroke injection, and a persistent memory - matrix, IRIS bridges the gap between human thought and OS - execution. -

-
- -
- -
-
-
-
diff --git a/client/public/bento/bento-mobile.png b/client/public/bento/bento-mobile.png new file mode 100644 index 0000000..c0ee027 Binary files /dev/null and b/client/public/bento/bento-mobile.png differ diff --git a/client/public/bento/deep-research.png b/client/public/bento/deep-research.png new file mode 100644 index 0000000..7e20e08 Binary files /dev/null and b/client/public/bento/deep-research.png differ diff --git a/client/public/bento/iris.png b/client/public/bento/iris.png new file mode 100644 index 0000000..fc247cf Binary files /dev/null and b/client/public/bento/iris.png differ diff --git a/client/public/bento/peeler.png b/client/public/bento/peeler.png new file mode 100644 index 0000000..b2f3de3 Binary files /dev/null and b/client/public/bento/peeler.png differ diff --git a/client/public/bento/web.png b/client/public/bento/web.png new file mode 100644 index 0000000..1fc0c4e Binary files /dev/null and b/client/public/bento/web.png differ diff --git a/client/public/bento/whatsapp.png b/client/public/bento/whatsapp.png new file mode 100644 index 0000000..c901d5f Binary files /dev/null and b/client/public/bento/whatsapp.png differ diff --git a/client/public/compare/after.png b/client/public/compare/after.png new file mode 100644 index 0000000..fc247cf Binary files /dev/null and b/client/public/compare/after.png differ diff --git a/client/public/compare/before.png b/client/public/compare/before.png new file mode 100644 index 0000000..438b040 Binary files /dev/null and b/client/public/compare/before.png differ diff --git a/client/public/img/mobile-link.png b/client/public/img/mobile-link.png new file mode 100644 index 0000000..c0ee027 Binary files /dev/null and b/client/public/img/mobile-link.png differ diff --git a/client/public/iris.png b/client/public/iris.png new file mode 100644 index 0000000..fc247cf Binary files /dev/null and b/client/public/iris.png differ