https://sistur.lovable.app/assets/SplashScreen-DKJYkI6b.js

1const e=`import { useEffect, useState } from 'react';
2
3import { tx } from "@/i18n/t";
4interface SplashScreenProps {
5  onComplete: () => void;
6  minDuration?: number;
7}
8
9export const SplashScreen = ({ onComplete, minDuration = 1200 }: SplashScreenProps) => {
10  const [isExiting, setIsExiting] = useState(false);
11
12  useEffect(() => {
13    const timer = setTimeout(() => {
14      setIsExiting(true);
15      setTimeout(onComplete, 500); // Wait for exit animation
16    }, minDuration);
17
18    return () => clearTimeout(timer);
19  }, [onComplete, minDuration]);
20
21  return (
22    <div
23      className={\`fixed inset-0 z-[100] flex flex-col items-center justify-center gradient-hero transition-opacity duration-500 \${
24        isExiting ? 'opacity-0' : 'opacity-100'
25      }\`}
26    >
27      {/* Background Pattern */}
28      <div className="absolute inset-0 overflow-hidden">
29        <div className="absolute top-0 left-0 w-96 h-96 bg-primary-foreground/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
30        <div className="absolute bottom-0 right-0 w-96 h-96 bg-accent/10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
31      </div>
32
33      {/* Logo Container */}
34      <div className="relative flex flex-col items-center gap-8">
35        {/* Animated Logo Icon */}
36        <div className="relative">
37          <div className="absolute inset-0 bg-accent/30 rounded-full blur-2xl animate-pulse" />
38          <div className="relative w-24 h-24 md:w-32 md:h-32 bg-card rounded-2xl shadow-2xl flex items-center justify-center transform animate-[scale-in_0.6s_ease-out]">
39            <svg

40              viewBox="0 0 100 100"
41              className="w-16 h-16 md:w-20 md:h-20"
42              fill="none"
43            >
44              {/* Stylized S for SISTUR */}
45              <path
46                d="M70 25C70 25 60 20 50 20C35 20 25 30 25 40C25 55 45 55 50 60C55 65 35 65 35 75C35 85 45 90 55 90C65 90 75 85 75 85"
47                stroke="hsl(187 65% 28%)"
48                strokeWidth="8"
49                strokeLinecap="round"
50                className="animate-[draw-path_1.5s_ease-out_forwards]"
51                style={{
52                  strokeDasharray: 200,
53                  strokeDashoffset: 200,
54                }}
55              />
56              {/* Accent dot */}
57              <circle
58                cx="75"
59                cy="25"
60                r="6"
61                fill="hsl(38 95% 50%)"
62                className="animate-[fade-scale_0.5s_ease-out_1s_forwards]"
63                style={{ opacity: 0 }}
64              />
65            </svg>
66          </div>
67        </div>
68
69        {/* Brand Name */}
70        <div className="flex flex-col items-center gap-2 animate-[fade-up_0.6s_ease-out_0.3s_forwards]" style={{ opacity: 0 }}>
71          <h1 className="text-4xl md:text-5xl font-display font-bold text-primary-foreground tracking-tight">
72            {tx("SISTUR")}
73          </h1>
74          <p className="text-primary-foreground/70 text-sm md:text-base font-medium tracking-widest uppercase">
75            {tx("Sistema de Inteligência Territorial")}
76          </p>
77        </div>
78
79        {/* Loading Indicator */}
80        <div className="flex items-center gap-2 animate-[fade-up_0.6s_ease-out_0.6s_forwards]" style={{ opacity: 0 }}>
81          <div className="flex gap-1">
82            <span className="w-2 h-2 bg-accent rounded-full animate-[bounce_1s_ease-in-out_infinite]" />
83            <span className="w-2 h-2 bg-accent rounded-full animate-[bounce_1s_ease-in-out_0.2s_infinite]" />
84            <span className="w-2 h-2 bg-accent rounded-full animate-[bounce_1s_ease-in-out_0.4s_infinite]" />
85          </div>
86          <span className="text-primary-foreground/50 text-sm ml-2">{tx("Carregando...")}</span>
87        </div>
88      </div>
89
90      {/* Footer */}
91      <div className="absolute bottom-8 text-center animate-[fade-up_0.6s_ease-out_0.9s_forwards]" style={{ opacity: 0 }}>
92        <p className="text-primary-foreground/40 text-xs">
93          {tx("Transformando indicadores em decisões estratégicas")}
94        </p>
95      </div>
96
97      {/* Custom Animations */}
98      <style>{\`
99        @keyframes draw-path {
100          to {
101            stroke-dashoffset: 0;
102          }
103        }
104        @keyframes fade-scale {
105          to {
106            opacity: 1;
107            transform: scale(1);
108          }
109        }
110        @keyframes fade-up {
111          from {
112            opacity: 0;
113            transform: translateY(20px);
114          }
115          to {
116            opacity: 1;
117            transform: translateY(0);
118          }
119        }
120        @keyframes scale-in {
121          from {
122            transform: scale(0.8);
123            opacity: 0;
124          }
125          to {
126            transform: scale(1);
127            opacity: 1;
128          }
129        }
130        @keyframes bounce {
131          0%, 100% {
132            transform: translateY(0);
133          }
134          50% {
135            transform: translateY(-6px);
136          }
137        }
138      \`}</style>
139    </div>
140  );
141};
142`;export{e as default};