Skip to content

Commit b9bfa6a

Browse files
Mac Userclaude
authored and
Mac User
committed
Redesign layout as full-width app shell for desktop
Replace narrow centered Card with a responsive header/content/footer app shell. Desktop gets a sticky header with inline tabs, large logo, feature highlights below the work area, and a full-width footer. Mobile retains a compact layout with stacked tabs. Also updates the favicon to use the IttyBitz logo. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 465778b commit b9bfa6a

4 files changed

Lines changed: 102 additions & 44 deletions

File tree

‎public/favicon.ico‎

25.6 KB
Binary file not shown.

‎src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function RootLayout({
1515
return (
1616
<html lang="en" className="dark">
1717
<head>
18+
<link rel="icon" href="/logo.png" type="image/png" />
1819
<link rel="preconnect" href="https://fonts.googleapis.com" />
1920
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
2021
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { EncryptorTool } from "@/components/encryptor-tool";
22

33
export default function Home() {
44
return (
5-
<main className="flex min-h-screen w-full flex-col items-center justify-center p-4">
5+
<main className="min-h-screen w-full flex flex-col">
66
<EncryptorTool />
77
</main>
88
);

‎src/components/encryptor-tool.tsx‎

Lines changed: 100 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ import {
1818
Info,
1919
Download,
2020
QrCode,
21+
Shield,
22+
Globe,
23+
UserX,
2124
} from "lucide-react";
22-
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
2325
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
2426
import { Button } from "@/components/ui/button";
2527
import { Input } from "@/components/ui/input";
@@ -711,67 +713,122 @@ export function EncryptorTool() {
711713
</div>
712714
);
713715

716+
const tabTriggerClasses = "font-semibold data-[state=active]:bg-gradient-to-br data-[state=active]:from-yellow-400 data-[state=active]:via-orange-500 data-[state=active]:to-red-600 data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg";
717+
714718
return (
715-
<Card className="w-full max-w-md shadow-2xl bg-card/80 backdrop-blur-sm border border-zinc-700">
716-
<CardHeader className="text-center">
717-
<div className="mx-auto mb-2">
718-
<img src="/logo.png" alt="IttyBitz Logo" width={64} height={64} />
719+
<Tabs value={mode} onValueChange={handleModeChange} className="flex flex-col min-h-screen">
720+
{/* ---- HEADER ---- */}
721+
<header className="sticky top-0 z-50 w-full border-b border-zinc-700 bg-background/80 backdrop-blur-sm">
722+
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4 sm:px-6">
723+
<div className="flex items-center gap-2">
724+
<img src="/logo.png" alt="IttyBitz Logo" width={28} height={28} />
725+
<span className="text-lg font-bold">IttyBitz</span>
726+
</div>
727+
<TabsList className="hidden sm:inline-flex bg-zinc-800 p-1">
728+
<TabsTrigger value="encrypt" className={tabTriggerClasses}>
729+
<Lock className="mr-2 h-4 w-4" />
730+
Encrypt
731+
</TabsTrigger>
732+
<TabsTrigger value="decrypt" className={tabTriggerClasses}>
733+
<Unlock className="mr-2 h-4 w-4" />
734+
Decrypt
735+
</TabsTrigger>
736+
</TabsList>
719737
</div>
720-
<CardTitle className="text-3xl font-bold">IttyBitz</CardTitle>
721-
<CardDescription className="font-semibold text-white">
722-
Secure by design. Simple by nature.
723-
</CardDescription>
724-
<p className="text-sm text-muted-foreground pt-2">
725-
Secure, <a href="https://github.com/seQRets/ittybitz" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">open-source</a>, client-side encryption and decryption.
726-
</p>
727-
</CardHeader>
728-
<CardContent>
729-
<Tabs defaultValue="encrypt" className="w-full" onValueChange={handleModeChange}>
738+
<div className="sm:hidden border-t border-zinc-800 px-4 pb-2 pt-1">
730739
<TabsList className="grid w-full grid-cols-2 bg-zinc-800 p-1">
731-
<TabsTrigger value="encrypt" className="font-semibold data-[state=active]:bg-gradient-to-br data-[state=active]:from-yellow-400 data-[state=active]:via-orange-500 data-[state=active]:to-red-600 data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg">
740+
<TabsTrigger value="encrypt" className={tabTriggerClasses}>
732741
<Lock className="mr-2 h-4 w-4" />
733742
Encrypt
734743
</TabsTrigger>
735-
<TabsTrigger value="decrypt" className="font-semibold data-[state=active]:bg-gradient-to-br data-[state=active]:from-yellow-400 data-[state=active]:via-orange-500 data-[state=active]:to-red-600 data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg">
744+
<TabsTrigger value="decrypt" className={tabTriggerClasses}>
736745
<Unlock className="mr-2 h-4 w-4" />
737746
Decrypt
738747
</TabsTrigger>
739748
</TabsList>
740-
<TabsContent value="encrypt" className="pt-6">
749+
</div>
750+
</header>
751+
752+
{/* ---- MAIN CONTENT ---- */}
753+
<div className="flex-1 w-full">
754+
<div className="mx-auto max-w-2xl px-4 sm:px-6 py-6 sm:py-8">
755+
{/* Desktop-only large logo + name */}
756+
<div className="hidden sm:flex items-center justify-center gap-3 mb-6">
757+
<img src="/logo.png" alt="IttyBitz Logo" width={48} height={48} />
758+
<span className="text-4xl font-bold text-white">IttyBitz</span>
759+
</div>
760+
<div className="mb-6 text-center">
761+
<p className="text-lg font-semibold text-white">Secure by design. Simple by nature.</p>
762+
<p className="text-sm text-muted-foreground mt-1">
763+
Secure, <a href="https://github.com/seQRets/ittybitz" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">open-source</a>, client-side encryption and decryption.
764+
</p>
765+
</div>
766+
<TabsContent value="encrypt">
741767
{renderContent("encrypt")}
742768
</TabsContent>
743-
<TabsContent value="decrypt" className="pt-6">
769+
<TabsContent value="decrypt">
744770
{renderContent("decrypt")}
745771
</TabsContent>
746-
</Tabs>
747-
</CardContent>
748-
<CardFooter className="flex-col items-center justify-center pt-6 text-xs text-muted-foreground">
749-
<div className="flex items-center gap-1">
750-
<Heart className="h-4 w-4 text-red-500" />
751-
<span>Enjoying IttyBitz?</span>
772+
{/* Desktop-only feature highlights */}
773+
<div className="hidden sm:grid grid-cols-3 gap-4 mt-8 text-left">
774+
<div className="flex items-start gap-2">
775+
<Shield className="h-4 w-4 mt-0.5 text-accent shrink-0" />
776+
<div>
777+
<p className="text-sm font-medium text-white">AES-256-GCM</p>
778+
<p className="text-xs text-muted-foreground">Military-grade encryption with 1M iteration key derivation.</p>
779+
</div>
780+
</div>
781+
<div className="flex items-start gap-2">
782+
<Globe className="h-4 w-4 mt-0.5 text-accent shrink-0" />
783+
<div>
784+
<p className="text-sm font-medium text-white">100% Client-Side</p>
785+
<p className="text-xs text-muted-foreground">Nothing leaves your browser. No servers, no uploads, no tracking.</p>
786+
</div>
787+
</div>
788+
<div className="flex items-start gap-2">
789+
<UserX className="h-4 w-4 mt-0.5 text-accent shrink-0" />
790+
<div>
791+
<p className="text-sm font-medium text-white">No Accounts</p>
792+
<p className="text-xs text-muted-foreground">No sign-ups or logins. Just encrypt and go.</p>
793+
</div>
794+
</div>
795+
</div>
752796
</div>
753-
<Dialog>
754-
<DialogTrigger asChild>
755-
<Button variant="link" className="text-accent p-0 h-auto">Support this project</Button>
756-
</DialogTrigger>
757-
<DialogContent>
797+
</div>
798+
799+
{/* ---- FOOTER ---- */}
800+
<footer className="w-full border-t border-zinc-700 bg-background/80 backdrop-blur-sm">
801+
<div className="mx-auto flex max-w-5xl flex-col items-center gap-2 px-4 py-4 sm:flex-row sm:justify-between text-xs text-muted-foreground">
802+
<div className="flex items-center gap-1">
803+
<Heart className="h-3 w-3 text-red-500" />
804+
<span>Enjoying IttyBitz?</span>
805+
<Dialog>
806+
<DialogTrigger asChild>
807+
<Button variant="link" className="text-accent p-0 h-auto text-xs">Support this project</Button>
808+
</DialogTrigger>
809+
<DialogContent>
758810
<DialogHeader>
759-
<DialogTitle>Support IttyBitz</DialogTitle>
760-
<DialogDescription>
761-
If you find this tool useful, please consider supporting its development. Your donation helps keep the project alive and ad-free.
762-
</DialogDescription>
811+
<DialogTitle>Support IttyBitz</DialogTitle>
812+
<DialogDescription>
813+
If you find this tool useful, please consider supporting its development. Your donation helps keep the project alive and ad-free.
814+
</DialogDescription>
763815
</DialogHeader>
764816
<div className="flex flex-col items-center gap-4 py-4">
765-
<QRCode value="https://coinos.io/svrn_money" size={128} />
766-
<a href="https://coinos.io/svrn_money" target="_blank" rel="noopener noreferrer" className="text-sm text-accent hover:underline break-all">
767-
https://coinos.io/svrn_money
768-
</a>
817+
<QRCode value="https://coinos.io/svrn_money" size={128} />
818+
<a href="https://coinos.io/svrn_money" target="_blank" rel="noopener noreferrer" className="text-sm text-accent hover:underline break-all">
819+
https://coinos.io/svrn_money
820+
</a>
769821
</div>
770-
</DialogContent>
771-
</Dialog>
772-
<p className="mt-4 text-xs text-muted-foreground">v1.3.0</p>
773-
</CardFooter>
774-
</Card>
822+
</DialogContent>
823+
</Dialog>
824+
</div>
825+
<div className="flex items-center gap-3">
826+
<a href="https://github.com/seQRets/ittybitz" target="_blank" rel="noopener noreferrer" className="hover:underline">GitHub</a>
827+
<span>v1.3.0</span>
828+
</div>
829+
</div>
830+
</footer>
831+
</Tabs>
775832
);
776833
}
777834

0 commit comments

Comments
 (0)