Evandro Fonseca Junior
50ffed4fee
- Updated ErrorBoundary and ErrorTracking components to directly access the Rybbit object without type assertions. - Enhanced error tracking by ensuring stack traces and component stacks are only included if available. - Improved the HeroSection component by replacing the standard img tag with Next.js Image component for better performance and optimization.
70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronDown } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function HeroSection() {
|
|
const scrollToNext = () => {
|
|
const nextSection = document.getElementById("problema");
|
|
nextSection?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 overflow-hidden">
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%230055ff%22%20fill-opacity%3D%220.05%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-40"></div>
|
|
|
|
<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
{/* Logo */}
|
|
<div className="mb-8">
|
|
<Image
|
|
src="/apple-touch-icon.png"
|
|
alt="NutriScan Logo"
|
|
width={96}
|
|
height={96}
|
|
className="mx-auto rounded-2xl shadow-xl"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Title */}
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
|
|
Saber o que colocamos no{" "}
|
|
<span className="bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text text-transparent">
|
|
prato
|
|
</span>
|
|
<br />é um direito de todos
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
|
|
Em um mundo onde rótulos são confusos e ingredientes impossíveis de
|
|
pronunciar, o NutriScan nasceu para devolver o poder de escolha às
|
|
suas mãos.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<Button
|
|
onClick={scrollToNext}
|
|
variant="outline"
|
|
size="lg"
|
|
className="group hover:bg-gradient-to-r hover:from-blue-600 hover:to-green-600 hover:text-white hover:border-transparent transition-all duration-300"
|
|
>
|
|
<span className="mr-2">Conheça nossa história</span>
|
|
<ChevronDown className="w-5 h-5 group-hover:animate-bounce" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
|
<div className="animate-bounce">
|
|
<div className="w-6 h-10 border-2 border-gray-400 dark:border-gray-500 rounded-full flex justify-center">
|
|
<div className="w-1 h-3 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|