bender/ac944e59-8f8d-4d9c-8d37-ae232b7b0bec
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to version 1: remove src/pages/HomePage/sections/Hero.tsx

Browse Source
This commit is contained in:
bender
2026-06-25 07:28:07 +00:00
parent ee3f7c5475
commit 4b8dae6f6a
1 changed files with 0 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/pages/HomePage/sections/Hero.tsx
View File

@@ -1,218 +0,0 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
const primaryButton = {
href: "/signup",
text: "Start tracking free"
};
const secondaryButton = {
href: "#features",
text: "See how it works"
};
const leftItems = [];
const rightItems = [];
type HeroSplitVerticalMarqueeProps = {
tag: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
leftItems: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
rightItems: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
};
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
const HeroInline = () => {
return (
<section aria-label="Hero section" className="relative flex items-center min-h-screen pt-25 pb-20 md:py-0 overflow-hidden">
<div className="hidden"><HeroBillboardTiltedCarousel tag="" title="" description="" primaryButton={{text:'', href:''}} secondaryButton={{text:'', href:''}} items={[]} /></div>
<HeroBackgroundSlot />
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20 w-content-width mx-auto z-10">
<div className="w-full lg:w-1/2 flex flex-col items-center lg:items-start gap-6">
<div className="px-4 py-1.5 text-sm font-medium card rounded-full shadow-sm border border-background-accent/20">
<p className="text-primary-cta">AI-Powered Nutrition Companion</p>
</div>
<TextAnimation
text={"Track Macros, Achieve Goals, Transform Health"}
variant="slide-up"
gradientText={false}
tag="h1"
className="text-5xl md:text-6xl lg:text-7xl font-bold text-center lg:text-left text-foreground leading-tight tracking-tight"
/>
<TextAnimation
text={"Log meals in seconds, visualize your nutrition in real-time, and stay accountable to your fitness goals. Nutri Track makes macro tracking effortless."}
variant="slide-up"
gradientText={false}
tag="p"
className="text-lg md:text-xl text-accent text-center lg:text-left leading-relaxed max-w-xl"
/>
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto mt-2">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="w-full sm:w-auto justify-center py-3 px-8 text-base font-medium shadow-lg shadow-primary-cta/20" />
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" className="w-full sm:w-auto justify-center py-3 px-8 text-base font-medium" />
</div>
<div className="mt-8 flex items-center gap-4">
<div className="flex -space-x-3">
{[1, 2, 3, 4].map((i) => (
<img
key={i}
src={`https://i.pravatar.cc/100?img=${i + 10}`}
alt="User"
className="w-10 h-10 rounded-full border-2 border-background object-cover"
/>
))}
</div>
<div className="flex flex-col">
<div className="flex items-center gap-1 text-primary-cta">
{[1, 2, 3, 4, 5].map((star) => (
<svg key={star} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
<path fillRule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clipRule="evenodd" />
</svg>
))}
</div>
<span className="text-xs text-accent font-medium">Trusted by 50,000+ users</span>
</div>
</div>
</div>
<div className="w-full lg:w-1/2 relative h-[600px] lg:h-[700px] flex items-center justify-center">
<div className="relative w-full max-w-[320px] aspect-[9/19] rounded-[2.5rem] border-[8px] border-card bg-card shadow-2xl overflow-hidden z-20">
{/* Notch */}
<div className="absolute top-0 inset-x-0 h-6 bg-card rounded-b-3xl w-1/2 mx-auto z-30"></div>
{/* Screen Content */}
<div className="absolute inset-0 bg-background flex flex-col overflow-hidden">
{/* Header */}
<div className="pt-10 pb-4 px-5 flex justify-between items-center bg-card">
<div>
<h3 className="text-sm font-medium text-accent">Today</h3>
<h2 className="text-xl font-bold text-foreground">Dashboard</h2>
</div>
<div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</div>
</div>
{/* Content */}
<div className="flex-1 p-5 space-y-5 overflow-y-auto pb-24 scrollbar-hide">
{/* Calorie Ring */}
<div className="bg-card rounded-2xl p-5 flex flex-col items-center justify-center shadow-sm relative overflow-hidden group hover:-translate-y-1 transition-transform duration-300">
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary-cta to-accent"></div>
<div className="relative w-32 h-32 flex items-center justify-center">
<svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="transparent" stroke="var(--background-accent)" strokeWidth="8" className="opacity-30" />
<circle cx="50" cy="50" r="40" fill="transparent" stroke="var(--primary-cta)" strokeWidth="8" strokeDasharray="251.2" strokeDashoffset="60" strokeLinecap="round" className="transition-all duration-1000 ease-out" />
</svg>
<div className="absolute flex flex-col items-center">
<span className="text-2xl font-bold text-foreground">1,840</span>
<span className="text-xs text-accent">kcal left</span>
</div>
</div>
<div className="flex justify-between w-full mt-4 text-xs font-medium">
<div className="flex flex-col items-center"><span className="text-accent">Eaten</span><span className="text-foreground">660</span></div>
<div className="flex flex-col items-center"><span className="text-accent">Burned</span><span className="text-primary-cta">320</span></div>
</div>
</div>
{/* Macros */}
<div className="grid grid-cols-3 gap-3">
{[
{ label: 'Protein', value: '45g', color: 'bg-[#3B82F6]', percent: '60%' },
{ label: 'Carbs', value: '120g', color: 'bg-[#10B981]', percent: '40%' },
{ label: 'Fat', value: '22g', color: 'bg-[#F59E0B]', percent: '30%' }
].map((macro, i) => (
<div key={i} className="bg-card rounded-xl p-3 flex flex-col items-center shadow-sm hover:-translate-y-1 transition-transform duration-300">
<span className="text-[10px] text-accent uppercase tracking-wider mb-1">{macro.label}</span>
<span className="text-sm font-bold text-foreground mb-2">{macro.value}</span>
<div className="w-full h-1.5 bg-background-accent/30 rounded-full overflow-hidden">
<div className={`h-full ${macro.color} rounded-full`} style={{ width: macro.percent }}></div>
</div>
</div>
))}
</div>
{/* Recent Meal */}
<div className="bg-card rounded-2xl p-4 shadow-sm hover:-translate-y-1 transition-transform duration-300">
<div className="flex justify-between items-center mb-3">
<h4 className="text-sm font-bold text-foreground">Lunch</h4>
<span className="text-xs font-medium text-primary-cta bg-primary-cta/10 px-2 py-1 rounded-md">540 kcal</span>
</div>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-lg bg-background-accent overflow-hidden shrink-0">
<img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=200&auto=format&fit=crop" alt="Salad" className="w-full h-full object-cover" />
</div>
<div className="flex-1 min-w-0">
<h5 className="text-sm font-medium text-foreground truncate">Grilled Chicken Salad</h5>
<p className="text-xs text-accent truncate">1 serving • 45g P • 12g C • 22g F</p>
</div>
</div>
</div>
</div>
{/* Bottom Nav */}
<div className="absolute bottom-0 inset-x-0 h-16 bg-card/90 backdrop-blur-md border-t border-background-accent/20 flex justify-around items-center px-2 pb-2 z-30">
<div className="flex flex-col items-center gap-1 text-primary-cta">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5"><path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" /><path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" /></svg>
</div>
<div className="flex flex-col items-center gap-1 text-accent hover:text-foreground transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
</div>
<div className="relative -top-5">
<div className="w-12 h-12 rounded-full bg-primary-cta text-primary-cta-text flex items-center justify-center shadow-lg shadow-primary-cta/40 hover:scale-105 transition-transform cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
</div>
</div>
<div className="flex flex-col items-center gap-1 text-accent hover:text-foreground transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
</div>
<div className="flex flex-col items-center gap-1 text-accent hover:text-foreground transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
</div>
</div>
</div>
</div>
{/* Floating Elements */}
<div className="absolute -right-4 lg:-right-12 top-20 bg-card/80 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-background-accent/20 flex items-center gap-3 animate-[bounce_4s_infinite] z-30">
<div className="w-10 h-10 rounded-full bg-[#10B981]/20 flex items-center justify-center text-[#10B981]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6"><path fillRule="evenodd" d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z" clipRule="evenodd" /></svg>
</div>
<div>
<p className="text-sm font-bold text-foreground">Goal Reached!</p>
<p className="text-xs text-accent">Protein target hit</p>
</div>
</div>
<div className="absolute -left-4 lg:-left-12 bottom-32 bg-card/80 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-background-accent/20 flex items-center gap-3 animate-[bounce_5s_infinite_0.5s] z-30">
<div className="w-10 h-10 rounded-full bg-[#F59E0B]/20 flex items-center justify-center text-[#F59E0B]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6"><path fillRule="evenodd" d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.177A7.547 7.547 0 016.648 6.61a.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.545 3.75 3.75 0 013.255 3.717z" clipRule="evenodd" /></svg>
</div>
<div>
<p className="text-sm font-bold text-foreground">320 kcal</p>
<p className="text-xs text-accent">Burned today</p>
</div>
</div>
</div>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" id="hero">
<HeroInline />
</div>
);
}