Skip to content

Commit 01cb4bf

Browse files
author
JianZcar
committed
better mobile viewing
1 parent e3addb4 commit 01cb4bf

1 file changed

Lines changed: 190 additions & 130 deletions

File tree

‎src/index.html‎

Lines changed: 190 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -510,192 +510,252 @@ <h3 class="card-title">Package Management</h3>
510510
</div>
511511
</div>
512512
</div>
513+
</div>
513514

514-
<!-- Zix Spotlight Section -->
515-
<div class="bg-base-200 rounded-2xl shadow-xl p-8 mb-8">
516-
<div class="text-center mb-8">
517-
<h3 class="text-3xl font-bold mb-4">
518-
<i class="bi bi-boxes text-primary mr-3"></i>
519-
Introducing <strong class="text-primary">zix</strong>: Flexible Package Management
520-
</h3>
521-
<p class="text-xl text-base-content/70">
522-
Zix is a Nix user package manager that gives you the best of both worlds:
523-
<strong class="text-primary">imperative convenience</strong> for quick changes and
524-
<strong class="text-secondary">declarative consistency</strong> for reliable environments.
525-
</p>
526-
<p class="mt-4 text-base-content/70">
527-
<a href="https://github.com/Zena-Linux/zix" class="link link-primary font-semibold">
528-
<i class="bi bi-github mr-2"></i>View zix on GitHub
529-
</a>
530-
</p>
531-
</div>
515+
<!-- Zix Spotlight Section -->
516+
<div class="bg-base-200 rounded-2xl shadow-xl p-4 md:p-8 mb-8">
517+
<div class="text-center mb-6 md:mb-8">
518+
<h3 class="text-2xl md:text-3xl font-bold mb-4">
519+
<i class="bi bi-boxes text-primary mr-2 md:mr-3"></i>
520+
Introducing <strong class="text-primary">zix</strong>: Flexible Package Management
521+
</h3>
522+
<p class="text-lg md:text-xl text-base-content/70">
523+
Zix is a Nix user package manager that gives you the best of both worlds:
524+
<strong class="text-primary">imperative convenience</strong> for quick changes and
525+
<strong class="text-secondary">declarative consistency</strong> for reliable environments.
526+
</p>
527+
<p class="mt-3 md:mt-4 text-base-content/70">
528+
<a href="https://github.com/Zena-Linux/zix" class="link link-primary font-semibold">
529+
<i class="bi bi-github mr-1 md:mr-2"></i>View zix on GitHub
530+
</a>
531+
</p>
532+
</div>
532533

533-
<div class="grid md:grid-cols-2 gap-8 mb-8">
534-
<!-- Imperative Commands -->
535-
<div>
536-
<h4 class="text-2xl font-bold mb-4 text-primary">
537-
<i class="bi bi-terminal mr-2"></i>
538-
Imperative Style
539-
</h4>
540-
<p class="mb-4">Quick, command-line driven package management for rapid changes:</p>
541-
<div class="mockup-code bg-base-100">
534+
<div class="grid md:grid-cols-2 gap-6 md:gap-8 mb-6 md:mb-8">
535+
<!-- Imperative Commands -->
536+
<div class="w-full">
537+
<h4 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-primary">
538+
<i class="bi bi-terminal mr-2"></i>
539+
Imperative Style
540+
</h4>
541+
<p class="mb-3 md:mb-4 text-sm md:text-base">Quick, command-line driven package management for rapid changes:</p>
542+
<div class="overflow-x-auto">
543+
<div class="mockup-code bg-base-100 text-xs md:text-sm min-w-0 w-full">
542544
<pre><code><span class="text-info">$</span> zix add neovim nodejs python3</code></pre>
543545
<pre><code><span class="text-info">$</span> zix remove rust go</code></pre>
544546
<pre><code><span class="text-info">$</span> zix apply</code></pre>
545547
<pre><code><span class="text-info">$</span> zix search firefox</code></pre>
546548
<pre><code><span class="text-info">$</span> zix rollback</code></pre>
547549
</div>
548-
<div class="mt-4 p-4 bg-primary/10 rounded-lg">
549-
<p class="text-sm"><strong>Perfect for:</strong> Quick experimentation, trying new tools, and on-the-fly
550-
adjustments.</p>
551-
</div>
552550
</div>
551+
<div class="mt-3 md:mt-4 p-3 md:p-4 bg-primary/10 rounded-lg">
552+
<p class="text-xs md:text-sm"><strong>Perfect for:</strong> Quick experimentation, trying new tools, and
553+
on-the-fly adjustments.</p>
554+
</div>
555+
</div>
553556

554-
<!-- Declarative Configuration -->
555-
<div>
556-
<h4 class="text-2xl font-bold mb-4 text-secondary">
557-
<i class="bi bi-file-code mr-2"></i>
558-
Declarative Style
559-
</h4>
560-
<p class="mb-4">Define your environment in a <code>zix.json</code> file for reproducibility:</p>
561-
<div class="mockup-code bg-base-100">
562-
<pre><code><span class="text-comment">// zix.json - Shareable, version-controlled setup</span></code></pre>
557+
<!-- Declarative Configuration -->
558+
<div class="w-full">
559+
<h4 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-secondary">
560+
<i class="bi bi-file-code mr-2"></i>
561+
Declarative Style
562+
</h4>
563+
<p class="mb-3 md:mb-4 text-sm md:text-base">Define your environment in a <code>zix.json</code> file for
564+
reproducibility:</p>
565+
<div class="overflow-x-auto">
566+
<div class="mockup-code bg-base-100 text-xs md:text-sm min-w-0 w-full">
567+
<pre><code><span class="text-comment">// zix.json - Shareable setup</span></code></pre>
563568
<pre><code>{</code></pre>
564-
<pre><code> "packages": [</code></pre>
565-
<pre><code> "neovim",</code></pre>
566-
<pre><code> "nodejs",</code></pre>
567-
<pre><code> "python3",</code></pre>
568-
<pre><code> "ripgrep",</code></pre>
569-
<pre><code> "fzf"</code></pre>
569+
<pre><code> <span class="text-info">"packages"</span>: [</code></pre>
570+
<pre><code> <span class="text-info">"neovim"</span>,</code></pre>
571+
<pre><code> <span class="text-info">"nodejs"</span>,</code></pre>
572+
<pre><code> <span class="text-info">"python3"</span>,</code></pre>
573+
<pre><code> <span class="text-info">"ripgrep"</span>,</code></pre>
574+
<pre><code> <span class="text-info">"fzf"</span></code></pre>
570575
<pre><code> ]</code></pre>
571576
<pre><code>}</code></pre>
572577
<pre><code><span class="text-info">$</span> zix apply</code></pre>
573578
</div>
574-
<div class="mt-4 p-4 bg-secondary/10 rounded-lg">
575-
<p class="text-sm"><strong>Perfect for:</strong> Team environments, reproducible setups, and configuration as
576-
code.</p>
577-
</div>
579+
</div>
580+
<div class="mt-3 md:mt-4 p-3 md:p-4 bg-secondary/10 rounded-lg">
581+
<p class="text-xs md:text-sm"><strong>Perfect for:</strong> Team environments, reproducible setups, and
582+
configuration as code.</p>
578583
</div>
579584
</div>
585+
</div>
580586

581-
<!-- Profiles Feature -->
582-
<div class="bg-base-100 rounded-xl p-6">
583-
<h4 class="text-2xl font-bold mb-4 text-accent">
584-
<i class="bi bi-layers mr-2"></i>
585-
Profiles: Context-Specific Environments
586-
</h4>
587-
<p class="mb-4">Create isolated environments for different projects or workflows:</p>
588-
589-
<div class="grid md:grid-cols-3 gap-4 mb-6">
590-
<div class="card bg-base-200">
591-
<div class="card-body p-4">
592-
<h5 class="card-title text-lg">Default Profile</h5>
593-
<p class="text-sm">Your everyday tools available system-wide</p>
594-
</div>
587+
<!-- Profiles Feature -->
588+
<div class="bg-base-100 rounded-xl p-4 md:p-6">
589+
<h4 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-accent">
590+
<i class="bi bi-layers mr-2"></i>
591+
Profiles: Context-Specific Environments
592+
</h4>
593+
<p class="mb-3 md:mb-4 text-sm md:text-base">Create isolated environments for different projects or workflows:</p>
594+
595+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4 mb-4 md:mb-6">
596+
<div class="card bg-base-200">
597+
<div class="card-body p-3 md:p-4">
598+
<h5 class="card-title text-base md:text-lg">Default Profile</h5>
599+
<p class="text-xs md:text-sm">Your everyday tools available system-wide</p>
595600
</div>
596-
<div class="card bg-base-200">
597-
<div class="card-body p-4">
598-
<h5 class="card-title text-lg">Project-Specific</h5>
599-
<p class="text-sm">Different packages for different projects</p>
600-
</div>
601+
</div>
602+
<div class="card bg-base-200">
603+
<div class="card-body p-3 md:p-4">
604+
<h5 class="card-title text-base md:text-lg">Project-Specific</h5>
605+
<p class="text-xs md:text-sm">Different packages for different projects</p>
601606
</div>
602-
<div class="card bg-base-200">
603-
<div class="card-body p-4">
604-
<h5 class="card-title text-lg">Temporary Profiles</h5>
605-
<p class="text-sm">Test environments that can be discarded</p>
606-
</div>
607+
</div>
608+
<div class="card bg-base-200">
609+
<div class="card-body p-3 md:p-4">
610+
<h5 class="card-title text-base md:text-lg">Temporary Profiles</h5>
611+
<p class="text-xs md:text-sm">Test environments that can be discarded</p>
607612
</div>
608613
</div>
614+
</div>
609615

610-
<div class="mockup-code bg-base-200">
616+
<div class="overflow-x-auto text-left">
617+
<div class="mockup-code bg-base-200 text-xs md:text-sm min-w-0 w-full">
611618
<pre><code><span class="text-comment"># Create a new profile for a project</span></code></pre>
612619
<pre><code><span class="text-info">$</span> zix profile create web-dev</code></pre>
613620
<pre><code><span class="text-comment"># Switch to the web-dev profile</span></code></pre>
614621
<pre><code><span class="text-info">$</span> zix profile switch web-dev</code></pre>
615-
<pre><code><span class="text-comment"># Add packages to this specific profile</span></code></pre>
622+
<pre><code><span class="text-comment"># Add packages to this profile</span></code></pre>
616623
<pre><code><span class="text-info">$</span> zix add nodejs typescript</code></pre>
617624
<pre><code><span class="text-comment"># List all profiles</span></code></pre>
618625
<pre><code><span class="text-info">$</span> zix profile list</code></pre>
619626
</div>
627+
</div>
620628

621-
<div class="mt-6 flex flex-wrap gap-4 justify-center">
622-
<div class="badge badge-primary badge-lg p-3">
623-
<i class="bi bi-arrow-left-right"></i>
624-
Seamless Switching
625-
</div>
626-
<div class="badge badge-secondary badge-lg p-3">
627-
<i class="bi bi-shield"></i>
628-
No Conflicts
629-
</div>
630-
<div class="badge badge-accent badge-lg p-3">
631-
<i class="bi bi-trash"></i>
632-
Easy Cleanup
633-
</div>
629+
<div class="mt-4 md:mt-6 flex flex-wrap gap-2 md:gap-4 justify-center">
630+
<div class="badge badge-primary p-2 md:p-3 text-xs md:text-sm">
631+
<i class="bi bi-arrow-left-right mr-1"></i>
632+
Seamless Switching
633+
</div>
634+
<div class="badge badge-secondary p-2 md:p-3 text-xs md:text-sm">
635+
<i class="bi bi-shield mr-1"></i>
636+
No Conflicts
637+
</div>
638+
<div class="badge badge-accent p-2 md:p-3 text-xs md:text-sm">
639+
<i class="bi bi-trash mr-1"></i>
640+
Easy Cleanup
634641
</div>
635642
</div>
643+
</div>
636644

637-
<!-- Combined Workflow -->
638-
<div class="mt-8 text-center">
639-
<h4 class="text-2xl font-bold mb-4">
640-
<i class="bi bi-arrow-repeat text-primary mr-2"></i>
641-
Best of Both Worlds Workflow
642-
</h4>
643-
<div class="mockup-code bg-base-100 max-w-3xl mx-auto text-left">
645+
<!-- Combined Workflow -->
646+
<div class="mt-6 md:mt-8">
647+
<h4 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-center">
648+
<i class="bi bi-arrow-repeat text-primary mr-2"></i>
649+
Best of Both Worlds Workflow
650+
</h4>
651+
<div class="overflow-x-auto">
652+
<div class="mockup-code bg-base-100 text-xs md:text-sm min-w-0 w-full">
644653
<pre><code><span class="text-comment"># 1. Start with imperative experimentation</span></code></pre>
645654
<pre><code><span class="text-info">$</span> zix add python3 neovim git</code></pre>
646655
<pre><code><span class="text-comment"># 2. Edit the config file</span></code></pre>
647656
<pre><code><span class="text-info">$</span> nano zix.json</code></pre>
648-
<pre><code><span class="text-comment"># 3. Apply declarative changes</span></pre>
657+
<pre><code><span class="text-comment"># 3. Apply declarative changes</span></code></pre>
649658
<pre><code><span class="text-info">$</span> zix apply</code></pre>
650659
</div>
651660
</div>
652661
</div>
653662
</div>
663+
654664
<!-- Updates Section -->
655-
<div class="bg-base-200 rounded-2xl shadow-2xl mb-12 p-8">
665+
<div class="bg-base-200 rounded-2xl shadow-2xl mb-12 p-4 md:p-8">
656666
<div class="flex-col lg:flex-row">
657667
<div class="lg:mr-12">
658-
<h2 class="text-4xl font-bold mb-6">
668+
<h2 class="text-3xl md:text-4xl font-bold mb-4 md:mb-6">
659669
<i class="bi bi-arrow-repeat text-primary mr-2"></i>
660670
Always Fresh. Never Fragile.
661671
</h2>
662672

663-
<p class="text-xl mb-6 leading-relaxed">
664-
Zena follows Fedora closely and delivers <strong>daily image-based updates</strong>
665-
sometimes multiple times per day without sacrificing stability.
673+
<p class="text-lg md:text-xl mb-4 md:mb-6 leading-relaxed">
674+
Zena delivers <strong>daily image-based updates</strong> while respecting your workflow.
675+
The immutable design means you can update with confidence that your current version stays rock-solid until you're
676+
ready to move forward.
666677
</p>
667678

668-
<ul class="space-y-4 text-lg">
669-
<li class="flex items-start">
670-
<i class="bi bi-check-circle-fill text-success text-xl mt-1 mr-3"></i>
671-
<span><strong>Atomic updates</strong>: The system updates as a single image</span>
672-
</li>
673-
<li class="flex items-start">
674-
<i class="bi bi-check-circle-fill text-success text-xl mt-1 mr-3"></i>
675-
<span><strong>Safe rollbacks</strong>: Boot into a previous version instantly</span>
676-
</li>
677-
<li class="flex items-start">
678-
<i class="bi bi-check-circle-fill text-success text-xl mt-1 mr-3"></i>
679-
<span><strong>Daily builds</strong>: Security fixes and improvements land fast</span>
680-
</li>
681-
<li class="flex items-start">
682-
<i class="bi bi-check-circle-fill text-success text-xl mt-1 mr-3"></i>
683-
<span>No partial upgrades, no broken states</span>
684-
</li>
685-
</ul>
679+
<div class="grid md:grid-cols-2 gap-6 md:gap-8 mb-6 md:mb-8">
680+
<div class="space-y-3 md:space-y-4">
681+
<h3 class="text-xl md:text-2xl font-bold text-primary flex items-center gap-2">
682+
<i class="bi bi-person-check"></i>
683+
Update on Your Terms
684+
</h3>
685+
<ul class="space-y-2 md:space-y-3">
686+
<li class="flex items-start gap-2 md:gap-3">
687+
<i class="bi bi-arrow-clockwise text-primary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
688+
<span><strong>Daily updates available</strong> but never forced</span>
689+
</li>
690+
<li class="flex items-start gap-2 md:gap-3">
691+
<i class="bi bi-wifi-off text-primary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
692+
<span><strong>Work offline confidently</strong> without updates</span>
693+
</li>
694+
<li class="flex items-start gap-2 md:gap-3">
695+
<i class="bi bi-infinity text-primary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
696+
<span><strong>Stay on any version</strong> as long as you want</span>
697+
</li>
698+
</ul>
699+
</div>
686700

687-
<div class="mt-8 flex flex-wrap gap-4 justify-center">
688-
<div class="badge badge-primary badge-lg p-4">
689-
<i class="bi bi-lightning-charge mr-2"></i>
690-
Fast Updates
701+
<div class="space-y-3 md:space-y-4">
702+
<h3 class="text-xl md:text-2xl font-bold text-secondary flex items-center gap-2">
703+
<i class="bi bi-shield-lock"></i>
704+
Zero-Risk Updates
705+
</h3>
706+
<ul class="space-y-2 md:space-y-3">
707+
<li class="flex items-start gap-2 md:gap-3">
708+
<i class="bi bi-box text-secondary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
709+
<span><strong>Atomic updates</strong>: Entire system as one unit</span>
710+
</li>
711+
<li class="flex items-start gap-2 md:gap-3">
712+
<i class="bi bi-arrow-counterclockwise text-secondary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
713+
<span><strong>Instant rollbacks</strong> at boot time</span>
714+
</li>
715+
<li class="flex items-start gap-2 md:gap-3">
716+
<i class="bi bi-check-circle text-secondary text-lg md:text-xl mt-0.5 flex-shrink-0"></i>
717+
<span><strong>No broken states</strong> - all or nothing</span>
718+
</li>
719+
</ul>
691720
</div>
692-
<div class="badge badge-secondary badge-lg p-4">
693-
<i class="bi bi-shield-check mr-2"></i>
694-
Rollback Safe
721+
</div>
722+
723+
<!-- The Immutable Advantage -->
724+
<div class="bg-base-100 rounded-xl p-4 md:p-6 mb-6 md:mb-8">
725+
<div class="flex items-center gap-3 mb-3 md:mb-4">
726+
<i class="bi bi-rocket-takeoff text-accent text-xl md:text-2xl"></i>
727+
<h3 class="text-xl md:text-2xl font-bold text-accent">
728+
Update with Confidence
729+
</h3>
695730
</div>
696-
<div class="badge badge-accent badge-lg p-4">
697-
<i class="bi bi-clock-history mr-2"></i>
698-
Daily Builds
731+
<p class="text-base md:text-lg mb-3 md:mb-4">
732+
Because Zena is immutable, your current version remains <strong>completely stable</strong> regardless of how
733+
long you use it.
734+
Whether you update daily or stay on a version for weeks, you're always on a rock-solid foundation.
735+
</p>
736+
<div class="flex items-start p-3 md:p-4 bg-primary/10 rounded-lg">
737+
<i class="bi bi-lightbulb text-primary text-lg md:text-xl mt-0.5 mr-2 md:mr-3 flex-shrink-0"></i>
738+
<div>
739+
<h4 class="font-bold text-base md:text-lg">No Pressure to Update</h4>
740+
<p class="text-base-content/70 text-sm md:text-base">Unlike traditional systems that degrade over time,
741+
Zena's immutable design
742+
means every version is as stable as the day it was installed.</p>
743+
</div>
744+
</div>
745+
</div>
746+
747+
<div class="mt-6 md:mt-8 flex flex-wrap gap-2 md:gap-4 justify-center">
748+
<div class="badge badge-primary p-2 md:p-4 flex items-center gap-1 md:gap-2 text-xs md:text-sm">
749+
<i class="bi bi-person-check"></i>
750+
Your Schedule
751+
</div>
752+
<div class="badge badge-secondary p-2 md:p-4 flex items-center gap-1 md:gap-2 text-xs md:text-sm">
753+
<i class="bi bi-arrow-counterclockwise"></i>
754+
Instant Rollbacks
755+
</div>
756+
<div class="badge badge-accent p-2 md:p-4 flex items-center gap-1 md:gap-2 text-xs md:text-sm">
757+
<i class="bi bi-rocket"></i>
758+
Update with Confidence
699759
</div>
700760
</div>
701761
</div>

0 commit comments

Comments
 (0)