Skip to content

Refresh website UX and visual design #37

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

Open
PrimeBuild-pc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refresh website UX and visual design #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 14 additions & 11 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import NotFound from "@/pages/not-found";
import SchemaMarkup from "@/components/SchemaMarkup";
import CookieBanner from "@/components/CookieBanner";
import SkipLink from "@/components/SkipLink";
import { MotionConfig } from "framer-motion";

function Router() {
return (
Expand All @@ -28,17 +29,19 @@ function Router() {
function App() {
return (
<QueryClientProvider client={queryClient}>
<SchemaMarkup />
<SkipLink />
<div className="flex flex-col min-h-screen bg-black text-white font-inter">
<NavBar />
<main id="main-content" className="flex-grow">
<Router />
</main>
<Footer />
</div>
<Toaster />
<CookieBanner />
<MotionConfig reducedMotion="user">
<SchemaMarkup />
<SkipLink />
<div className="flex min-h-screen flex-col bg-black text-white font-inter">
<NavBar />
<main id="main-content" className="flex-grow">
<Router />
</main>
<Footer />
</div>
<Toaster />
<CookieBanner />
</MotionConfig>
</QueryClientProvider>
);
}
Expand Down
47 changes: 25 additions & 22 deletions client/src/components/AppsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,36 +118,39 @@ const AppsSection = () => {
};

return (
<section id="apps" className="py-20 bg-black">
<div className="container mx-auto px-4">
<section id="apps" className="section-shell relative overflow-hidden bg-[#08090b]">
<div className="section-glow -right-64 top-24 opacity-50" aria-hidden="true" />
<div className="site-container">
<AnimatedElement>
<SectionHeader
title="Le nostre"
highlight="app"
eyebrow="Software"
title="Strumenti open source per"
highlight="controllo e performance"
subtitle="Strumenti esclusivi per ottimizzare la tua esperienza di gioco"
underline={false}
/>
</AnimatedElement>

<div className="flex gap-6 max-w-6xl mx-auto overflow-x-auto pb-4 snap-x snap-mandatory no-scrollbar md:grid md:grid-cols-2 lg:grid-cols-4 md:overflow-visible">
<div className="mx-auto flex max-w-6xl snap-x snap-mandatory gap-5 overflow-x-auto pb-5 no-scrollbar md:grid md:grid-cols-2 md:overflow-visible lg:grid-cols-4">
{apps.map((app, index) => {
const repoUrl = buildGitHubRepoUrl(app.owner, app.repo);

return (
<AnimatedElement
key={index}
className="glow-card relative bg-neutral-900 rounded-xl overflow-hidden flex flex-col
flex-shrink-0 w-[280px] snap-center md:w-auto
focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary
transition-transform hover:scale-105 focus-within:scale-105"
className="surface-card interactive-card relative flex w-[82vw] max-w-[310px] flex-shrink-0 snap-center flex-col md:w-auto md:max-w-none"
delay={0.1 * index}
>
{/* wrapper interno a colonna per riempire l'altezza */}
<div className="p-6 flex flex-col h-full">
<h3 className="text-xl font-bold mb-2">{app.name}</h3>
<p className="text-neutral-400 mb-4">{app.description}</p>
<div className="relative z-10 flex h-full flex-col p-6">
<div className="mb-5 flex items-center justify-between">
<span className="eyebrow py-1">Windows</span>
<span className="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgb(52_211_153/0.8)]" aria-label="Disponibile" />
</div>
<h3 className="mb-2 text-xl font-bold">{app.name}</h3>
<p className="mb-5 text-sm leading-6 text-neutral-400">{app.description}</p>

<ul className="space-y-2 mb-6">
<ul className="mb-6 space-y-2">
{app.features.map((feature, i) => (
<li key={i} className="flex items-center text-sm text-neutral-300">
<span className="text-primary mr-2">•</span> {feature}
Expand All @@ -164,7 +167,7 @@ const AppsSection = () => {
rel="noopener noreferrer"
onClick={() => handleRepoClick(app.name, repoUrl)}
aria-label={`Visualizza repository GitHub di ${app.name}`}
className="inline-flex items-center gap-1.5 bg-[#24292f] hover:bg-[#444d56] text-white px-3 py-1.5 rounded-md text-sm min-h-[32px]"
className="inline-flex min-h-10 items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm text-white transition hover:bg-white/10"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
Expand All @@ -183,7 +186,7 @@ const AppsSection = () => {
onClick={() => handleDownloadClick(app)}
disabled={downloadingApp === app.name}
aria-label={`Scarica ${app.name}`}
className="inline-flex items-center gap-1.5 bg-primary hover:bg-primary text-black font-semibold px-3 py-1.5 rounded-md min-h-[32px] text-sm transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
className="inline-flex min-h-10 items-center gap-1.5 rounded-full bg-primary px-3 py-2 text-sm font-semibold text-black transition hover:bg-orange-400 disabled:cursor-not-allowed disabled:opacity-60"
>
<FaDownload aria-hidden="true" /> {downloadingApp === app.name ? 'Verifica...' : 'Download'}
</button>
Expand All @@ -195,20 +198,20 @@ const AppsSection = () => {
})}
</div>

<AnimatedElement className="mt-16 text-center" delay={0.3}>
<div className="max-w-2xl mx-auto bg-neutral-900 p-8 rounded-xl">
<h3 className="text-2xl font-bold mb-4">Supporta il nostro lavoro</h3>
<p className="text-neutral-400 mb-6">
Le nostre app sono in fase di sviluppo e saranno presto disponibili. Supporta il nostro lavoro con una
donazione per accelerare lo sviluppo e ottenere accesso anticipato.
<AnimatedElement className="mt-10 text-center" delay={0.3}>
<div className="surface-card mx-auto max-w-3xl p-7 sm:p-9">
<span className="eyebrow mb-4">Community driven</span>
<h3 className="text-2xl font-bold mb-3">Supporta lo sviluppo</h3>
<p className="mx-auto mb-6 max-w-xl leading-7 text-neutral-400">
Le nostre app sono open source e vengono migliorate continuamente. Una donazione ci aiuta a dedicare più tempo a sviluppo, test e documentazione.
</p>
<a
href="https://paypal.me/PrimeBuildOfficial?country.x=IT&locale.x=it_IT"
target="_blank"
rel="noopener noreferrer"
onClick={handlePayPalClick}
aria-label="Supportaci con una donazione su PayPal"
className="inline-flex items-center bg-[#0070BA] hover:bg-[#003087] text-white font-medium py-3 px-8 rounded-md transition-all transform hover:scale-105"
className="button-secondary"
>
<FaPaypal className="mr-2 text-xl" aria-hidden="true" /> Supportaci su PayPal
</a>
Expand Down
83 changes: 38 additions & 45 deletions client/src/components/BuildsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,90 +113,83 @@ const BuildsSection = () => {
], []);

return (
<section id="builds" className="py-20 bg-neutral-900" ref={specBarsRef}>
<div className="container mx-auto px-4">
<section id="builds" className="section-shell relative overflow-hidden bg-[#08090b]" ref={specBarsRef}>
<div className="section-glow -left-72 top-1/3 opacity-50" aria-hidden="true" />
<div className="site-container">
<AnimatedElement>
<SectionHeader
title="Le"
highlight="nostre build"
eyebrow="Configurazioni"
title="Una base solida,"
highlight="costruita intorno a te"
subtitle="Configurazioni di PC Gaming su misura per ogni esigenza e budget"
italicText="Esempi di build che puoi trovare da noi"
/>
</AnimatedElement>

<div className="max-w-6xl mx-auto">
<div className="mx-auto max-w-6xl space-y-8">
{builds.map((build, index) => (
<AnimatedElement
key={index}
className={`mb-24 ${index === builds.length - 1 ? "mb-0" : ""}`}
delay={0.2}
delay={0.08 * index}
>
<div
className={`grid md:grid-cols-2 gap-8 items-center ${index % 2 !== 0 ? "md:order-first" : ""}`}
className="surface-card interactive-card grid overflow-hidden lg:grid-cols-[0.92fr_1.08fr]"
>
<div className="order-1">
<div className="flex justify-between items-center mb-2">
<h3 className="text-2xl font-bold font-montserrat">
<div className={`relative min-h-[280px] overflow-hidden sm:min-h-[360px] ${index % 2 !== 0 ? "lg:order-2" : ""}`}>
<ImageWithFallback
src={build.image}
alt={`PC Gaming ${build.name} - ${build.tagline} - Build gaming custom Prime Build`}
width={720}
height={520}
className="absolute inset-0 h-full w-full object-cover transition duration-700 hover:scale-[1.03]"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent lg:bg-gradient-to-r" />
<div className="absolute inset-x-0 bottom-0 p-6 lg:p-8">
<span className="eyebrow border-white/10 bg-black/50 text-neutral-200">{build.level}</span>
<p className="mt-3 text-lg font-semibold text-white">{build.tagline}</p>
</div>
</div>

<div className={`relative z-10 p-6 sm:p-8 lg:p-10 ${index % 2 !== 0 ? "lg:order-1" : ""}`}>
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<h3 className="text-2xl font-bold tracking-tight font-montserrat">
PRIME{" "}
<span className="text-primary">{build.shortName}</span>
</h3>
<span className="text-primary text-xl font-bold border border-primary rounded-md px-3 py-1">
{build.price}
<span className="rounded-full border border-primary/25 bg-primary/10 px-4 py-2 text-sm font-bold text-orange-300">
Da {build.price}
</span>
</div>
<p className="text-neutral-300 mb-6">{build.description}</p>
<p className="mb-7 leading-7 text-neutral-400">{build.description}</p>

<div className="space-y-4">
<div className="space-y-5">
{build.specs.map((spec, i) => (
<div key={i}>
<div className="flex justify-between mb-1">
<span className="font-medium">{spec.name}</span>
<span className="text-primary">{spec.value}</span>
<div className="mb-2 flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between">
<span className="font-medium text-neutral-300">{spec.name}</span>
<span className="text-neutral-500 sm:text-right">{spec.value}</span>
</div>
<div className="relative h-2 bg-white/10 rounded-full overflow-hidden">
<div className="relative h-1 overflow-hidden rounded-full bg-white/10">
<div
className="spec-bar-fill absolute h-full bg-primary rounded-full w-0 transition-all duration-1000 ease-out"
className="spec-bar-fill absolute h-full w-0 rounded-full bg-gradient-to-r from-primary to-amber-400 transition-all duration-1000 ease-out"
data-width={spec.performance}
></div>
</div>
</div>
))}
</div>

<div className="mt-8">
<div className="mt-9">
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSfXO6-BVQ3x1WLDlxpp7B534U8xIxymD7QbP8MId0fcf_9Yqw/viewform?usp=sharing"
target="_blank"
rel="noopener noreferrer"
className="inline-block bg-primary hover:bg-primary text-black font-semibold py-3 px-8 rounded-md transition-all transform hover:scale-105"
className="button-primary"
>
Richiedi Preventivo
</a>
</div>
</div>

<div
className={`relative rounded-xl overflow-hidden group order-2 ${index % 2 !== 0 ? "md:order-1" : "md:order-2"}`}
>
<ImageWithFallback
src={build.image}
alt={`PC Gaming ${build.name} - ${build.tagline} - Build gaming custom Prime Build`}
width={600}
height={384}
className="w-full h-96 object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div>
<span className="inline-block bg-primary text-black text-xs font-semibold px-3 py-1 rounded-full mb-3">
{build.level}
</span>
<h3 className="text-2xl font-bold font-montserrat">
{build.name}
</h3>
<p className="text-neutral-300">{build.tagline}</p>
</div>
</div>
</div>
</div>
</AnimatedElement>
))}
Expand Down
Loading
Loading