Skip to content

Commit

Permalink
fix: landing
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjaminshafii
benjaminshafii committed Dec 24, 2024
1 parent 41a5471 commit de487d7
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 160 deletions.
28 changes: 14 additions & 14 deletions packages/landing-v0/app/(landing)/components/value-journey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,67 +8,67 @@ import {
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Zap, CheckCircle2 } from "lucide-react";
import { Eye, Wallet, CheckCircle2 } from "lucide-react";

export function ValueJourney() {
return (
<Card className="border-border/40 bg-background/60 backdrop-blur-sm">
<CardHeader>
<CardDescription>See how HyprSqrl automates your workflow</CardDescription>
<CardDescription>See how HyprSqrl automates your financial operations</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-4 md:grid-cols-3">
<Card className="border-border/40 bg-background/60">
<CardHeader>
<CardTitle className="flex items-center text-lg">
<MessageSquare className="mr-2 h-4 w-4 text-[#6E45FE]" />
1. Detect
<Eye className="mr-2 h-4 w-4 text-[#6E45FE]" />
1. Monitor
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
AI monitors your messages and identifies actionable items.
AI monitors your screen, emails, and messages for financial activities and opportunities.
</p>
<div className="mt-4 p-2 bg-muted/40 rounded-md">
<p className="text-sm italic">
"Don't forget to tweet about Vitalik's keynote at Unconf!"
"Detected: Payment agreement of $2,500 for UI mockups in design review meeting"
</p>
</div>
</CardContent>
</Card>
<Card className="border-border/40 bg-background/60">
<CardHeader>
<CardTitle className="flex items-center text-lg">
<Zap className="mr-2 h-4 w-4 text-[#6E45FE]" />
2. Automate
<Wallet className="mr-2 h-4 w-4 text-[#6E45FE]" />
2. Process
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
HyprSqrl automatically creates tasks and drafts content.
HyprSqrl automatically processes financial tasks and optimizes treasury positions.
</p>
<div className="mt-4 space-y-2">
<Badge variant="secondary" className="bg-[#6E45FE]/10 text-[#6E45FE] hover:bg-[#6E45FE]/20">
Task Created
Payment Triggered
</Badge>
<p className="text-sm">Draft tweet about Vitalik</p>
<p className="text-sm">USDC transfer prepared: $2,500</p>
</div>
</CardContent>
</Card>
<Card className="border-border/40 bg-background/60">
<CardHeader>
<CardTitle className="flex items-center text-lg">
<CheckCircle2 className="mr-2 h-4 w-4 text-[#6E45FE]" />
3. Review
3. Optimize
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
Review and approve AI-generated content with one click.
Review automated actions and optimize treasury yields with one click.
</p>
<div className="mt-4 p-2 bg-muted/40 rounded-md">
<p className="text-sm">
🚀 Exciting news! @VitalikButerin will be delivering a keynote at #Unconf2023! Don't miss this opportunity to hear from one of the brightest minds in crypto. Get your tickets now at unconf.crypto 🎟️ #Ethereum #Blockchain
🚀 Yield Opportunity: Move $50k USDC from Aave (8.2% APY) to Compound (12.5% APY) for +$2,150/year
</p>
</div>
</CardContent>
Expand Down
34 changes: 17 additions & 17 deletions packages/landing-v0/app/(landing)/data/integrations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,43 @@ interface Integration {

export const enterpriseIntegrations: Integration[] = [
{
name: 'Screenpipe',
name: 'Screen Monitor',
status: 'active',
description: 'Screen activity monitoring',
description: 'Automated financial task detection',
},
{
name: 'Salesforce',
status: 'coming-soon',
description: 'CRM automation',
name: 'USDC',
status: 'active',
description: 'Stablecoin payments and treasury',
},
{
name: 'SAP',
name: 'Aave',
status: 'coming-soon',
description: 'ERP integration',
description: 'DeFi yield optimization',
},
{
name: 'ServiceNow',
name: 'Compound',
status: 'coming-soon',
description: 'ITSM automation',
description: 'DeFi lending and borrowing',
},
{
name: 'Workday',
name: 'QuickBooks',
status: 'coming-soon',
description: 'HR automation',
description: 'Accounting automation',
},
{
name: 'Oracle',
name: 'Stripe',
status: 'coming-soon',
description: 'Database integration',
description: 'Payment processing',
},
{
name: 'Microsoft 365',
name: 'Xero',
status: 'coming-soon',
description: 'Office suite integration',
description: 'Financial reporting',
},
{
name: 'Jira',
name: 'Circle',
status: 'coming-soon',
description: 'Project management',
description: 'Business payments infrastructure',
},
];
128 changes: 34 additions & 94 deletions packages/landing-v0/app/(landing)/demo/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '../../../components/ui/badge';
import {
Calendar,
Monitor,
} from 'lucide-react';
import { Monitor, Wallet } from 'lucide-react';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
import { BrowserWindow } from './browser-window';
import { AnimatePresence, motion } from 'framer-motion';
import { motion, AnimatePresence } from 'framer-motion';
import { ValueJourney } from '../components/value-journey';

// Demo data based on dashboard-store
Expand Down Expand Up @@ -99,51 +96,7 @@ const demoRecognizedItems = [
];

export const Demo = () => {
const defaultValue = `HyprSqrl Financial Activity Report
Our AI has detected several actionable financial events from your recent activities:
1. Meeting Payment Agreement (10:30 AM)
- Design review meeting completed
- Milestone: UI mockups delivery
- Payment amount: $2,500
- Status: Ready to trigger upon delivery confirmation
- Action required: Review and approve
2. Invoice Recognition (11:45 AM)
- Sender: Cloud Services Ltd
- Amount: $850
- Category: Infrastructure
- Due date: Net 30
- Status: Automatically processed and scheduled
3. Treasury Yield Optimization
- Current position: 8.2% APY on Aave
- Opportunity: 12.5% APY on Compound
- Potential gain: +$1,200/year
- Risk assessment: Similar risk profile
- Action required: Review rebalancing proposal
4. Bank Transfer Required
- Purpose: Upcoming payroll
- Amount: $5,000
- From: Treasury wallet
- To: Operational account
- Deadline: Next 48 hours
- Action required: Approve transfer
5. Automated Expense Categorization
- Merchant: Developer Tools Inc
- Amount: $99
- Category: Development Tools
- Tax category: Business Expense
- Status: Automatically processed
Our AI agents continue to monitor your screen activity for financial optimization opportunities. Visit your dashboard to take action on these items.
Need assistance? Our support team is available 24/7.
— HyprSqrl Financial Assistant`;




Expand All @@ -168,33 +121,6 @@ Need assistance? Our support team is available 24/7.




const renderTaskAutomationProgress = () => {
return (
<div className="bg-[#1C1D21] rounded-lg p-6">
<h2 className="text-xl font-semibold mb-2">Task Automation Progress</h2>
<p className="text-gray-400 text-sm mb-4">
Percentage of tasks automated
</p>
<div className="w-32 h-32 mx-auto">
<CircularProgressbar
value={automationRate}
text={`${Math.round(automationRate)}%`}
styles={{
path: { stroke: '#6E45FE' },
text: { fill: '#fff', fontSize: '16px' },
trail: { stroke: '#2A2B2E' },
}}
/>
</div>
<div className="mt-4 text-center text-sm text-gray-400">
{demoTasks.filter((t) => t.automated).length} / {demoTasks.length}{' '}
tasks
</div>
</div>
);
};

const renderActiveAgents = () => {
return (
<div className="bg-[#1C1D21] rounded-lg p-6">
Expand All @@ -209,30 +135,30 @@ Need assistance? Our support team is available 24/7.
<div className="flex items-center space-x-3">
<Monitor className="h-5 w-5 text-[#6E45FE]" />
<div>
<h3 className="font-medium">Task Agent</h3>
<h3 className="font-medium">Finance Agent</h3>
<p className="text-sm text-gray-400">
Detects and processes actionable tasks from screen content
Detects and processes financial tasks from screen content
</p>
</div>
</div>
<div className="mt-2 flex justify-between text-sm text-gray-400">
<span>Today: 12</span>
<span>Total: 12</span>
<span>Today: 5</span>
<span>Total: 5</span>
</div>
</div>
<div className="border border-gray-800 rounded-lg p-4">
<div className="flex items-center space-x-3">
<Calendar className="h-5 w-5 text-[#6E45FE]" />
<Wallet className="h-5 w-5 text-[#6E45FE]" />
<div>
<h3 className="font-medium">Calendar Agent</h3>
<h3 className="font-medium">Treasury Agent</h3>
<p className="text-sm text-gray-400">
Detects and processes calendar events from screen content
Monitors and optimizes treasury positions
</p>
</div>
</div>
<div className="mt-2 flex justify-between text-sm text-gray-400">
<span>Today: 0</span>
<span>Total: 0</span>
<span>Today: 3</span>
<span>Total: 3</span>
</div>
</div>
</div>
Expand All @@ -246,7 +172,7 @@ Need assistance? Our support team is available 24/7.
<div className="flex justify-between items-center mb-4">
<div>
<h2 className="text-xl font-semibold">Live Screen Activity</h2>
<p className="text-gray-400 text-sm">Recently detected by Screenpipe</p>
<p className="text-gray-400 text-sm">Recently detected by HyprSqrl</p>
</div>
</div>

Expand Down Expand Up @@ -291,7 +217,7 @@ Need assistance? Our support team is available 24/7.
</span>
<div className="flex space-x-2">
<Button variant="outline" size="sm" className="bg-transparent">
Add Task
Process
</Button>
</div>
</div>
Expand All @@ -307,21 +233,35 @@ Need assistance? Our support team is available 24/7.
<div className="space-y-6">
<ValueJourney />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{renderTaskAutomationProgress()}
{renderActiveAgents()}
<div className="bg-[#1C1D21] rounded-lg p-6">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">Screenpipe</h2>
<h2 className="text-xl font-semibold">Automations</h2>
<Badge
variant="outline"
className="bg-green-500/10 text-green-500"
>
Connected
5 Active
</Badge>
</div>
<p className="text-gray-400 text-sm">
Captures and processes screen content for task and event detection
</p>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-400">Screen</span>
<Badge variant="secondary" className="bg-green-500/10 text-green-500">Active</Badge>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-gray-400">Email</span>
<Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500">Coming Soon</Badge>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-gray-400">Slack</span>
<Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500">Coming Soon</Badge>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-gray-400">Telegram</span>
<Badge variant="secondary" className="bg-yellow-500/10 text-yellow-500">Coming Soon</Badge>
</div>
</div>
<Button className="mt-4" variant="outline">
Add Integration
</Button>
Expand Down
Loading

0 comments on commit de487d7

Please sign in to comment.