Skip to content

Polish #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carsonSgit merged 3 commits into from
Oct 26, 2025
Merged

Polish #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a8f5f9
avatar
carsonSgit Oct 26, 2025
336624e
mobile landing
carsonSgit Oct 26, 2025
fc18790
mobile nav
carsonSgit Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 77 additions & 11 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ import DecryptedText from "@/components/fancy/text/decrypted-text";
import { NavigationMenu } from "@/components/ui/navigation-menu";
import { LuxeButton } from "@/components/ui/luxe-button";
import { ModelsSection } from "@/components/models-section";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Menu } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Home() {
const [isLoading, setIsLoading] = useState(true);
const [fadeOut, setFadeOut] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

useEffect(() => {
const loadContent = async () => {
Expand Down Expand Up @@ -181,7 +185,8 @@ export default function Home() {
/>
</div>

<div className="fixed top-0 left-0 right-0 z-20 flex items-center justify-center p-4 ">
{/* Desktop Navigation */}
<div className="hidden md:flex fixed top-0 left-0 right-0 z-20 items-center justify-center p-4">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
Expand All @@ -200,9 +205,54 @@ export default function Home() {
</NavigationMenu>
</div>

<main id="overview" className="w-full min-h-screen flex items-center justify-between overflow-hidden relative [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-mt-24">
{/* Mobile Navigation */}
<div className="md:hidden fixed top-4 right-4 z-20">
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
<SheetTrigger asChild>
<Button variant="outline" size="icon" className="bg-background/80 backdrop-blur-sm">
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle menu</span>
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-[250px] sm:w-[300px]">
<nav className="flex flex-col gap-4 mt-8">
<Link
href="#overview"
className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
onClick={() => setMobileMenuOpen(false)}
>
Overview
</Link>
<Link
href="#models"
className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
onClick={() => setMobileMenuOpen(false)}
>
Models
</Link>
<Link
href="#features"
className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
onClick={() => setMobileMenuOpen(false)}
>
Features
</Link>
<Link
href="/watch"
className="text-lg font-medium hover:text-primary transition-colors py-2"
onClick={() => setMobileMenuOpen(false)}
>
Dashboard
</Link>
</nav>
</SheetContent>
</Sheet>
</div>

<main id="overview" className="w-full min-h-screen flex items-center justify-center lg:justify-between overflow-hidden relative [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-mt-24">

<div className="z-10 ml-0 w-1/3 flex items-start justify-center relative pointer-events-none ">
{/* Desktop Layout */}
<div className="hidden lg:flex z-10 ml-0 w-1/3 items-start justify-center relative pointer-events-none">
<div className="text-left">
<h1 className="text-7xl mt-0 font-bold mb-4 pb-4">ARGUS</h1>
<LuxeButton variant="animated-border" className="pointer-events-auto px-4 py-2 text-base">
Expand All @@ -211,25 +261,41 @@ export default function Home() {
</div>
</div>

<div className="z-10 mt-10 w-1/2 h-full flex items-center justify-center relative pointer-events-none">
<div className="w-full h-full flex items-center justify-center ">
<div className="hidden lg:flex z-10 mt-10 w-1/2 h-full items-center justify-center relative pointer-events-none">
<div className="w-full h-full flex items-center justify-center">
<AsciiEye />
</div>
</div>

{/* Mobile Layout - Centered with Overlay */}
<div className="lg:hidden relative w-full h-screen flex items-center justify-center px-4">
{/* ASCII Eye Background */}
<div className="absolute inset-0 flex items-center justify-center pointer-events-none scale-90 sm:scale-100">
<AsciiEye />
</div>

{/* Overlayed Text Content */}
<div className="relative z-20 flex flex-col items-center justify-center text-center space-y-6">
<h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-white drop-shadow-2xl">ARGUS</h1>
<LuxeButton variant="animated-border" className="pointer-events-auto px-6 py-3 text-base">
<Link href="/watch">Open Argus</Link>
</LuxeButton>
</div>
</div>
</main>

<section id="models" className="w-full py-20 relative z-10 scroll-mt-24">
<section id="models" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-bold text-center mb-6 text-foreground">Technology for the Future </h2>
<p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">Argus is built on the latest and greatest technologies to deliver the best possible experience for you and your team.</p>
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 lg:mb-6 text-foreground">Technology for the Future</h2>
<p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">Argus is built on the latest and greatest technologies to deliver the best possible experience for you and your team.</p>
<ModelsSection />
</div>
</section>

<section id="features" className="w-full py-20 relative z-10 scroll-mt-24">
<section id="features" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-bold text-center mb-4 text-foreground">Features</h2>
<p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-3 lg:mb-4 text-foreground">Features</h2>
<p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">
Discover the powerful capabilities that make Argus the ultimate surveillance and monitoring solution.
</p>
<FeaturesAlternating features={featuresContent} />
Expand Down
2 changes: 1 addition & 1 deletion components/ascii-eye.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ export const AsciiEye = memo(function AsciiEye() {
return (
<div className="h-full w-full pointer-events-auto">
<pre
className="font-medium sm:text-xs select-none"
className="font-medium text-[0.5rem] sm:text-[0.6rem] md:text-xs select-none"
style={{
fontFamily: "monospace",
willChange: "transform", // GPU acceleration hint
Expand Down
18 changes: 9 additions & 9 deletions components/features-alternating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function FeaturesAlternating({
}, [features]);

return (
<div className="w-full max-w-[80%] mx-auto space-y-24">
<div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto space-y-12 lg:space-y-24">
{features.map((feature, index) => {
const isEven = index % 2 === 0;

Expand All @@ -91,41 +91,41 @@ export function FeaturesAlternating({
ref={(el) => {
sectionRefs.current[index] = el;
}}
className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 items-start"
>
{isEven ? (
<>
{/* Left: Text Content */}
<LuxeCard variant="revealed-pointer" className="feature-card">
<LuxeCardHeader>
<LuxeCardTitle className="text-2xl">
<LuxeCardTitle className="text-xl lg:text-2xl">
{feature.title}
</LuxeCardTitle>
<LuxeCardDescription className="text-lg">
<LuxeCardDescription className="text-base lg:text-lg">
{feature.description}
</LuxeCardDescription>
</LuxeCardHeader>
</LuxeCard>

{/* Right: Browser Component */}
<div className="w-full min-h-[600px] feature-content">
<div className="w-full min-h-[300px] lg:min-h-[600px] feature-content">
{feature.content}
</div>
</>
) : (
<>
{/* Left: Browser Component */}
<div className="w-full min-h-[600px] feature-content">
<div className="w-full min-h-[300px] lg:min-h-[600px] feature-content lg:order-first">
{feature.content}
</div>

{/* Right: Text Content */}
<LuxeCard variant="revealed-pointer" className="feature-card">
<LuxeCard variant="revealed-pointer" className="feature-card lg:order-last">
<LuxeCardHeader>
<LuxeCardTitle className="text-2xl">
<LuxeCardTitle className="text-xl lg:text-2xl">
{feature.title}
</LuxeCardTitle>
<LuxeCardDescription className="text-lg">
<LuxeCardDescription className="text-base lg:text-lg">
{feature.description}
</LuxeCardDescription>
</LuxeCardHeader>
Expand Down
22 changes: 11 additions & 11 deletions components/models-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const aiModels = [

export function ModelsSection() {
return (
<div className="w-full max-w-[80%] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
<div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
{/* Left: Text with Highlighter */}
<div className="space-y-6">
<p className="text-lg leading-loose">
<div className="space-y-4 lg:space-y-6">
<p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
Argus leverages the{" "}
<TextHighlighter
triggerType="inView"
Expand Down Expand Up @@ -79,7 +79,7 @@ export function ModelsSection() {
<br />

</p>
<p className="text-lg leading-loose">
<p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
Built on a {" "}
<TextHighlighter
triggerType="inView"
Expand Down Expand Up @@ -115,7 +115,7 @@ export function ModelsSection() {
and resilient delivery while segments are scheduled and analyzed at the edge.
</p>

<p className="text-lg leading-loose">
<p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
Detections from {" "}
<TextHighlighter
triggerType="inView"
Expand Down Expand Up @@ -161,15 +161,15 @@ export function ModelsSection() {
</div>

{/* Right: AI Models List */}
<div className="space-y-6 lg:pl-12">
<div className="mb-4 text-right">
<Badge variant="secondary" className="mb-6">
<div className="space-y-4 lg:space-y-6 lg:pl-12">
<div className="mb-2 lg:mb-4 text-center lg:text-right">
<Badge variant="secondary" className="mb-4 lg:mb-6">
Powered by
</Badge>
</div>
<div className="space-y-8 text-right">
<div className="space-y-4 lg:space-y-8 text-center lg:text-right">
{aiModels.map((model, index) => (
<div key={index} className="text-2xl font-semibold">
<div key={index} className="text-xl lg:text-2xl font-semibold">
<ScrambleHover
text={model}
sequential={true}
Expand Down
20 changes: 13 additions & 7 deletions components/user-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { IconLogout, IconSettings, IconUser } from "@tabler/icons-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
Expand All @@ -28,11 +28,14 @@ export function UserNav() {
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<AvatarFallback className="rounded-lg">U</AvatarFallback>
<AvatarImage
src="assets/admin.png"
alt="Admin"
/>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">User</span>
<span className="truncate text-xs">user@example.com</span>
<span className="truncate font-semibold">Admin</span>
<span className="truncate text-xs">admin@argus.ai</span>
</div>
</SidebarMenuButton>
</DropdownMenuTrigger>
Expand All @@ -45,11 +48,14 @@ export function UserNav() {
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarFallback className="rounded-lg">U</AvatarFallback>
<AvatarImage
src="assets/admin.png"
alt="Admin"
/>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">User</span>
<span className="truncate text-xs">user@example.com</span>
<span className="truncate font-semibold">Admin</span>
<span className="truncate text-xs">admin@argus.ai</span>
</div>
</div>
</DropdownMenuLabel>
Expand Down
Binary file added public/assets/admin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.