Primeira versão templates healthcare
This commit is contained in:
Marcio Bevervanso
commit
9ea17f6a94
66 changed files with 14048 additions and 0 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
20
Template-01/README.md
Normal file
20
Template-01/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/18f79c6b-2746-4063-a3c7-499d3a1fa7af
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
56
Template-01/index.html
Normal file
56
Template-01/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>Health Premium | Excelência em Saúde, Estética e Bem-estar</title>
|
||||||
|
<meta name="title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta name="description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://www.healthpremium.com.br/" />
|
||||||
|
<meta property="og:title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta property="og:description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
<meta property="og:image" content="https://loremflickr.com/1200/630/clinic,luxury/all" />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:url" content="https://www.healthpremium.com.br/" />
|
||||||
|
<meta property="twitter:title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta property="twitter:description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
<meta property="twitter:image" content="https://loremflickr.com/1200/630/clinic,luxury/all" />
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
|
||||||
|
|
||||||
|
<!-- Schema Markup (JSON-LD) -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "MedicalClinic",
|
||||||
|
"name": "Health Premium",
|
||||||
|
"image": "https://loremflickr.com/1200/630/clinic,luxury/all",
|
||||||
|
"@id": "https://www.healthpremium.com.br/",
|
||||||
|
"url": "https://www.healthpremium.com.br/",
|
||||||
|
"telephone": "+55 11 99999-9999",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Av. Faria Lima, 3400 - 15º Andar",
|
||||||
|
"addressLocality": "São Paulo",
|
||||||
|
"addressRegion": "SP",
|
||||||
|
"postalCode": "04538-132",
|
||||||
|
"addressCountry": "BR"
|
||||||
|
},
|
||||||
|
"description": "Clínica premium com especialistas em dermatologia, odontologia, estética facial e medicina do estilo de vida."
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
6
Template-01/metadata.json
Normal file
6
Template-01/metadata.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "Health Premium",
|
||||||
|
"description": "Template extremamente premium e moderno para clínicas médicas, estéticas, odontológicas e profissionais da saúde focados em alto padrão. Apresenta design sophistificado e alto refinamento visual.",
|
||||||
|
"requestFramePermissions": [],
|
||||||
|
"majorCapabilities": []
|
||||||
|
}
|
||||||
4414
Template-01/package-lock.json
generated
Normal file
4414
Template-01/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
38
Template-01/package.json
Normal file
38
Template-01/package.json
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"name": "react-example",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"clean": "rm -rf dist",
|
||||||
|
"lint": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@google/genai": "^1.29.0",
|
||||||
|
"@tailwindcss/vite": "^4.1.14",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"lucide-react": "^0.546.0",
|
||||||
|
"motion": "^12.23.24",
|
||||||
|
"react": "^19.0.1",
|
||||||
|
"react-calendly": "^4.4.0",
|
||||||
|
"react-dom": "^19.0.1",
|
||||||
|
"react-router-dom": "^7.15.0",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"tailwindcss": "^4.1.14",
|
||||||
|
"tsx": "^4.21.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
Template-01/public/robots.txt
Normal file
3
Template-01/public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Sitemap: https://www.healthpremium.com.br/sitemap.xml
|
||||||
11
Template-01/public/sitemap.xml
Normal file
11
Template-01/public/sitemap.xml
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url><loc>https://www.healthpremium.com.br/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/sobre</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/servicos</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/profissionais</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/resultados</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/diferenciais</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/blog</loc><changefreq>daily</changefreq><priority>0.9</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/contato</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
</urlset>
|
||||||
50
Template-01/src/App.tsx
Normal file
50
Template-01/src/App.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { Navbar } from './components/navbar';
|
||||||
|
import { Footer } from './components/footer';
|
||||||
|
import { Home } from './pages/home';
|
||||||
|
import { Services } from './pages/services';
|
||||||
|
import { About } from './pages/about';
|
||||||
|
import { Team } from './pages/team';
|
||||||
|
import { Blog } from './pages/blog';
|
||||||
|
import { BlogPost } from './pages/blog-post';
|
||||||
|
import { Features } from './pages/features';
|
||||||
|
import { Contact } from './pages/contact';
|
||||||
|
import { Results } from './pages/results';
|
||||||
|
import { NotFound } from './pages/not-found';
|
||||||
|
import { CookieBanner } from './components/cookie-banner';
|
||||||
|
|
||||||
|
function ScrollToTop() {
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [pathname]);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<ScrollToTop />
|
||||||
|
<div className="min-h-screen flex flex-col font-sans">
|
||||||
|
<Navbar />
|
||||||
|
<main className="flex-grow">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/sobre" element={<About />} />
|
||||||
|
<Route path="/servicos" element={<Services />} />
|
||||||
|
<Route path="/profissionais" element={<Team />} />
|
||||||
|
<Route path="/resultados" element={<Results />} />
|
||||||
|
<Route path="/diferenciais" element={<Features />} />
|
||||||
|
<Route path="/blog" element={<Blog />} />
|
||||||
|
<Route path="/blog/:id" element={<BlogPost />} />
|
||||||
|
<Route path="/contato" element={<Contact />} />
|
||||||
|
<Route path="*" element={<NotFound />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
<CookieBanner />
|
||||||
|
</div>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
77
Template-01/src/components/cookie-banner.tsx
Normal file
77
Template-01/src/components/cookie-banner.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function CookieBanner() {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// delay showing banner slightly for better UX
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
const consent = localStorage.getItem('cookie-consent');
|
||||||
|
if (!consent) {
|
||||||
|
setIsVisible(true);
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const acceptCookies = () => {
|
||||||
|
localStorage.setItem('cookie-consent', 'accepted');
|
||||||
|
setIsVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const declineCookies = () => {
|
||||||
|
localStorage.setItem('cookie-consent', 'declined');
|
||||||
|
setIsVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||||
|
className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 pointer-events-none flex justify-center"
|
||||||
|
>
|
||||||
|
<div className="bg-stone-900 border border-stone-800 text-stone-300 w-full max-w-5xl rounded-3xl p-6 shadow-2xl pointer-events-auto flex flex-col md:flex-row items-center gap-6 md:gap-12 justify-between">
|
||||||
|
<div className="flex flex-col gap-2 flex-grow">
|
||||||
|
<h4 className="text-white font-medium text-lg flex items-center gap-2">
|
||||||
|
Nós valorizamos sua privacidade
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm font-light text-stone-400 leading-relaxed">
|
||||||
|
Utilizamos cookies e tecnologias semelhantes (incluindo pixels de rastreamento) para melhorar sua experiência de navegação,
|
||||||
|
analisar o tráfego do site e personalizar nosso conteúdo e anúncios. Ao clicar em "Aceitar",
|
||||||
|
você concorda com nossa <Link to="/privacidade" className="text-primary-300 hover:text-white transition-colors hover:underline">Política de Privacidade</Link>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end mt-4 md:mt-0">
|
||||||
|
<button
|
||||||
|
onClick={declineCookies}
|
||||||
|
className="px-5 py-3 text-sm font-medium text-stone-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
Recusar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={acceptCookies}
|
||||||
|
className="px-8 py-3 bg-white hover:bg-stone-200 text-stone-900 text-sm font-medium rounded-full transition-colors whitespace-nowrap active:scale-95"
|
||||||
|
>
|
||||||
|
Aceitar Cookies
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={declineCookies}
|
||||||
|
className="p-2.5 text-stone-500 hover:text-white transition-colors ml-2 hidden md:flex items-center justify-center rounded-full hover:bg-stone-800"
|
||||||
|
aria-label="Fechar"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
Template-01/src/components/footer.tsx
Normal file
80
Template-01/src/components/footer.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import { ArrowUpRight, Instagram, Linkedin, Twitter } from 'lucide-react';
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-primary-950 text-stone-300 py-20 px-6 md:px-12 rounded-t-[40px] mt-24">
|
||||||
|
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
|
||||||
|
<div className="flex flex-col gap-6 lg:border-r border-stone-800 lg:pr-8">
|
||||||
|
<h2 className="text-3xl font-serif text-white">
|
||||||
|
Health<span className="text-primary-400 italic">Premium</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-stone-400 text-sm leading-relaxed max-w-sm">
|
||||||
|
Elevando o padrão do cuidado. Uma experiência premium em saúde e bem-estar, focada na excelência e atenção humana.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4 mt-2">
|
||||||
|
<a href="#" className="p-2 border border-stone-800 rounded-full hover:bg-stone-800 transition-colors">
|
||||||
|
<Instagram size={18} />
|
||||||
|
</a>
|
||||||
|
<a href="#" className="p-2 border border-stone-800 rounded-full hover:bg-stone-800 transition-colors">
|
||||||
|
<Linkedin size={18} />
|
||||||
|
</a>
|
||||||
|
<a href="#" className="p-2 border border-stone-800 rounded-full hover:bg-stone-800 transition-colors">
|
||||||
|
<Twitter size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<h4 className="text-white font-medium text-lg font-serif">Páginas</h4>
|
||||||
|
<nav className="flex flex-col gap-3 text-sm">
|
||||||
|
<NavLink to="/" className="hover:text-white flex items-center gap-1 group">
|
||||||
|
Início <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/sobre" className="hover:text-white flex items-center gap-1 group">
|
||||||
|
Nossa História <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/servicos" className="hover:text-white flex items-center gap-1 group">
|
||||||
|
Especialidades <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/profissionais" className="hover:text-white flex items-center gap-1 group">
|
||||||
|
Corpo Clínico <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/resultados" className="hover:text-white flex items-center gap-1 group">
|
||||||
|
Casos de Sucesso <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<h4 className="text-white font-medium text-lg font-serif">Legal & Mais</h4>
|
||||||
|
<nav className="flex flex-col gap-3 text-sm">
|
||||||
|
<NavLink to="/blog" className="hover:text-white">Editorial & Blog</NavLink>
|
||||||
|
<NavLink to="/diferenciais" className="hover:text-white">A Experiência</NavLink>
|
||||||
|
<a href="#" className="hover:text-white">Termos de Uso</a>
|
||||||
|
<a href="#" className="hover:text-white">Política de Privacidade</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<h4 className="text-white font-medium text-lg font-serif">Visite-nos</h4>
|
||||||
|
<address className="not-italic text-sm text-stone-400 flex flex-col gap-2">
|
||||||
|
<p>Av. Faria Lima, 3400 - 15º Andar</p>
|
||||||
|
<p>Itaim Bibi, São Paulo - SP</p>
|
||||||
|
<p>04538-132</p>
|
||||||
|
</address>
|
||||||
|
<div className="mt-4">
|
||||||
|
<p className="text-sm font-medium text-white mb-2">Contato</p>
|
||||||
|
<p className="text-sm text-stone-400">+55 11 99999-9999</p>
|
||||||
|
<p className="text-sm text-stone-400">concierge@healthpremium.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto mt-20 pt-8 border-t border-stone-800 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-stone-500">
|
||||||
|
<p>© {new Date().getFullYear()} Health Premium. Todos os direitos reservados.</p>
|
||||||
|
<p>Design sofisticado para a área da saúde.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
147
Template-01/src/components/navbar.tsx
Normal file
147
Template-01/src/components/navbar.tsx
Normal file
|
|
@ -0,0 +1,147 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { NavLink, useLocation } from 'react-router-dom';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { Menu, X, Search, User } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
import { SearchModal } from './search-modal';
|
||||||
|
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
const [searchOpen, setSearchOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 50);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMobileMenuOpen(false);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ name: 'Início', path: '/' },
|
||||||
|
{ name: 'Sobre', path: '/sobre' },
|
||||||
|
{ name: 'Serviços', path: '/servicos' },
|
||||||
|
{ name: 'Profissionais', path: '/profissionais' },
|
||||||
|
{ name: 'Resultados', path: '/resultados' },
|
||||||
|
{ name: 'Diferenciais', path: '/diferenciais' },
|
||||||
|
{ name: 'Blog', path: '/blog' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const isDarkHeader = location.pathname === '/' && !isScrolled && !mobileMenuOpen;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header
|
||||||
|
className={cn(
|
||||||
|
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out px-6 md:px-12',
|
||||||
|
isScrolled ? 'py-4' : 'py-8'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'max-w-7xl mx-auto flex items-center justify-between transition-all duration-500 rounded-2xl px-6 md:px-8',
|
||||||
|
isScrolled ? 'glass py-3' : 'bg-transparent py-2'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<NavLink to="/" className={cn("text-2xl font-serif font-medium tracking-tight transition-colors", isDarkHeader ? "text-white" : "text-primary-900")}>
|
||||||
|
Health<span className={cn("italic", isDarkHeader ? "text-primary-200" : "text-primary-500")}>Premium</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* Desktop Nav */}
|
||||||
|
<nav className="hidden lg:flex items-center gap-8">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<NavLink
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
cn(
|
||||||
|
'text-sm font-medium transition-colors',
|
||||||
|
isDarkHeader
|
||||||
|
? (isActive ? 'text-white' : 'text-stone-300 hover:text-white')
|
||||||
|
: (isActive ? 'text-primary-800' : 'text-stone-500 hover:text-primary-600')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<aside className="hidden lg:flex items-center gap-4">
|
||||||
|
<button onClick={() => setSearchOpen(true)} className={cn("p-2 rounded-full transition-colors mr-2", isDarkHeader ? "text-stone-300 hover:text-white hover:bg-white/10" : "text-stone-500 hover:text-primary-800 hover:bg-stone-100")}>
|
||||||
|
<Search size={20} />
|
||||||
|
</button>
|
||||||
|
<NavLink
|
||||||
|
to="/contato"
|
||||||
|
onClick={() => trackEvent('Schedule', { source: 'Desktop Header' })}
|
||||||
|
className={cn("group relative inline-flex items-center justify-center px-6 py-2.5 text-sm font-medium rounded-full overflow-hidden transition-transform active:scale-95", isDarkHeader ? "bg-white text-primary-900" : "bg-primary-900 text-white")}
|
||||||
|
>
|
||||||
|
<span className={cn("absolute inset-0 w-full h-full -mt-1 rounded-lg bg-gradient-to-b from-transparent via-transparent to-black transition-opacity", isDarkHeader ? "opacity-10" : "opacity-30")} />
|
||||||
|
<span className="relative">Agendar Consulta</span>
|
||||||
|
</NavLink>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Mobile Menu Toggle */}
|
||||||
|
<button
|
||||||
|
className={cn("lg:hidden p-2 z-[60] relative", isDarkHeader ? "text-white" : "text-stone-600")}
|
||||||
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
|
>
|
||||||
|
{mobileMenuOpen ? <X size={24} className="text-stone-600" /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
className="fixed inset-0 z-40 bg-stone-50/95 backdrop-blur-xl pt-32 px-6 lg:hidden flex flex-col"
|
||||||
|
>
|
||||||
|
<nav className="flex flex-col gap-6 text-xl font-serif">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<NavLink
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
cn(
|
||||||
|
'transition-colors hover:text-primary-600',
|
||||||
|
isActive ? 'text-primary-800' : 'text-stone-500'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
<div className="flex border-t border-stone-200/50 pt-6 mt-2 pb-4 gap-4 justify-center">
|
||||||
|
<button onClick={() => { setMobileMenuOpen(false); setSearchOpen(true); }} className="flex items-center gap-2 text-stone-600 hover:text-primary-800 transition-colors">
|
||||||
|
<Search size={22} /> <span className="font-sans text-base">Buscar</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<NavLink
|
||||||
|
to="/contato"
|
||||||
|
onClick={() => { setMobileMenuOpen(false); trackEvent('Schedule', { source: 'Mobile Menu' }); }}
|
||||||
|
className="mt-4 px-6 py-4 text-center text-lg font-sans font-medium text-white bg-primary-900 rounded-full"
|
||||||
|
>
|
||||||
|
Agendar Consulta
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
{/* Search Modal */}
|
||||||
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
122
Template-01/src/components/search-modal.tsx
Normal file
122
Template-01/src/components/search-modal.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { Search, X, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
interface SearchModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SearchModal({ isOpen, onClose }: SearchModalProps) {
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
|
||||||
|
// Prevent background scrolling when modal is open
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Handle escape key
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') onClose();
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', handleEscape);
|
||||||
|
return () => window.removeEventListener('keydown', handleEscape);
|
||||||
|
}, [onClose]);
|
||||||
|
|
||||||
|
const mockResults = query.length > 2 ? [
|
||||||
|
{ title: 'Odontologia Premium', type: 'Serviço', path: '/servicos' },
|
||||||
|
{ title: 'Dr. Fernando Silva (Harmonização)', type: 'Profissional', path: '/profissionais' },
|
||||||
|
{ title: 'Como manter os resultados?', type: 'Artigo', path: '/blog/1' },
|
||||||
|
{ title: 'Casos Reais: Lentes de Contato', type: 'Resultados', path: '/resultados' }
|
||||||
|
] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="fixed inset-0 z-[100] flex items-start justify-center pt-20 sm:pt-32 px-4">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute inset-0 bg-stone-900/40 backdrop-blur-sm"
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden border border-stone-100 flex flex-col"
|
||||||
|
>
|
||||||
|
<div className="flex items-center px-6 py-4 border-b border-stone-100">
|
||||||
|
<Search size={22} className="text-stone-400 min-w-[22px]" />
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
type="text"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
placeholder="Busque por serviços, profissionais, artigos..."
|
||||||
|
className="w-full bg-transparent border-none text-lg text-stone-700 px-4 py-2 focus:ring-0 outline-none placeholder:text-stone-300 font-light"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 text-stone-400 hover:text-stone-800 transition-colors bg-stone-50 hover:bg-stone-100 rounded-full"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-h-[200px] max-h-[60vh] overflow-y-auto bg-stone-50 p-4">
|
||||||
|
{query.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full gap-4 text-stone-400 py-12">
|
||||||
|
<Search size={32} strokeWidth={1} />
|
||||||
|
<p className="text-sm font-light">O que você está procurando hoje?</p>
|
||||||
|
</div>
|
||||||
|
) : mockResults.length > 0 ? (
|
||||||
|
<ul className="flex flex-col gap-2">
|
||||||
|
<div className="text-xs font-medium text-stone-400 uppercase tracking-widest mb-2 px-2">Resultados</div>
|
||||||
|
{mockResults.map((result, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<Link
|
||||||
|
to={result.path}
|
||||||
|
onClick={onClose}
|
||||||
|
className="group flex items-center justify-between p-4 bg-white rounded-2xl border border-stone-100 hover:border-primary-200 transition-colors shadow-sm"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="font-medium text-stone-800">{result.title}</span>
|
||||||
|
<span className="text-xs text-stone-500 font-light">{result.type}</span>
|
||||||
|
</div>
|
||||||
|
<ArrowRight size={18} className="text-stone-300 group-hover:text-primary-800 group-hover:translate-x-1 transition-all" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-stone-500 py-12">
|
||||||
|
<p className="font-medium text-stone-700">Nenhum resultado encontrado</p>
|
||||||
|
<p className="text-sm font-light mt-1">Tente buscar por termos diferentes ou mais gerais.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white border-t border-stone-100 px-6 py-4 flex gap-4 overflow-x-auto whitespace-nowrap">
|
||||||
|
<span className="text-xs font-medium text-stone-400 uppercase tracking-widest flex items-center">Sugestões:</span>
|
||||||
|
<button onClick={() => setQuery('Odontologia')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Odontologia</button>
|
||||||
|
<button onClick={() => setQuery('Estética')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Estética</button>
|
||||||
|
<button onClick={() => setQuery('Harmonização')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Harmonização</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
60
Template-01/src/data/posts.ts
Normal file
60
Template-01/src/data/posts.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
export interface BlogPost {
|
||||||
|
id: string;
|
||||||
|
category: string;
|
||||||
|
title: string;
|
||||||
|
desc: string;
|
||||||
|
img: string;
|
||||||
|
date: string;
|
||||||
|
author: string;
|
||||||
|
timeToRead: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rawData = [
|
||||||
|
["o-futuro-dos-tratamentos-de-colageno", "Estética Avançada", "O futuro dos tratamentos de colágeno", "Como os bioestimuladores de última geração entregam resultados naturais.", "Dra. Luiza Junqueira", "skincare"],
|
||||||
|
["preenchimento-labial-refinado", "Estética Avançada", "Preenchimento labial refinado", "A técnica por trás de lábios hidratados, contornados e proporcionais.", "Dr. Arthur Vilela", "lips"],
|
||||||
|
["ultraformer-mpt-a-revolucao-do-lifting", "Estética Avançada", "Ultraformer MPT: A revolução do lifting", "Como o ultrassom microfocado devolve a firmeza sem agulhas.", "Dra. Luiza Junqueira", "technology"],
|
||||||
|
["fios-de-sustentacao-pdo", "Estética Avançada", "Fios de sustentação PDO", "O poder da reestruturação facial tridimensional.", "Dr. Arthur Vilela", "face,clean"],
|
||||||
|
["lentes-de-contato-em-porcelana", "Odontologia Premium", "Lentes de Contato em Porcelana", "O segredo dos sorrisos perfeitos sem desgaste agressivo.", "Dr. Thiago Mendes", "smile,veneers"],
|
||||||
|
["invisalign-master-ortodontia-invisivel", "Odontologia Premium", "Invisalign Master: Ortodontia invisível", "Como alinhar seus dentes com conforto e estética em tempo recorde.", "Dr. Thiago Mendes", "teeth,clear"],
|
||||||
|
["clareamento-a-laser-vs-caseiro", "Odontologia Premium", "Clareamento a Laser vs Caseiro", "Entenda a diferença e escolha a melhor opção para a sua sensibilidade.", "Dr. Thiago Mendes", "dentist,smile"],
|
||||||
|
["reabilitacao-oral-3d", "Odontologia Premium", "Reabilitação Oral 3D", "A união de scanners intraorais e impressoras 3D na perfeição dental.", "Dr. Thiago Mendes", "dental,tech"],
|
||||||
|
["a-importancia-da-qualidade-do-sono", "Longevidade & Performance", "A importância da Qualidade do Sono", "A relação direta entre ciclo circadiano e rejuvenescimento celular.", "Marcela Couto", "sleep,rest"],
|
||||||
|
["terapia-de-reposicao-hormonal", "Longevidade & Performance", "Terapia de Reposição Hormonal", "Mitos e verdades sobre implantes e otimização metabólica.", "Marcela Couto", "wellness,health"],
|
||||||
|
["jejum-intermitente-e-autofagia", "Longevidade & Performance", "Jejum Intermitente e Autofagia", "A ciência da purificação celular e o controle da insulina.", "Marcela Couto", "healthy,food"],
|
||||||
|
["soroterapia-e-vitaminas", "Longevidade & Performance", "Soroterapia e Vitaminas", "Como a suplementação injetável acelera resultados de longevidade.", "Marcela Couto", "vitamin,clinic"],
|
||||||
|
["massa-muscular-poupanca-para-vida", "Longevidade & Performance", "Massa Muscular: Poupança para Vida", "Sarcopenia e porque treinar força é vital para uma vida longa.", "Marcela Couto", "gym,fitness"],
|
||||||
|
["melasma-controle-efetivo", "Skincare & Dermatologia", "Melasma: Controle Efetivo", "Protocolos combinados e lasers frios no clareamento da pele.", "Dra. Luiza Junqueira", "skin,care"],
|
||||||
|
["vitamina-c-e-retinol-na-rotina", "Skincare & Dermatologia", "Vitamina C e Retinol na rotina", "Os dois ativos insubstituíveis no seu armário de skincare noturno.", "Dra. Luiza Junqueira", "serum,skincare"],
|
||||||
|
["como-a-poluicao-afeta-sua-pele", "Skincare & Dermatologia", "Como a poluição afeta sua pele", "O estresse oxidativo das cidades e as barreiras de proteção térmica.", "Dra. Luiza Junqueira", "city,woman"],
|
||||||
|
["lasers-de-picossegundos", "Skincare & Dermatologia", "Lasers de Picossegundos", "A quebra ultrarrápida do pigmento sem dano calórico aos tecidos.", "Dra. Luiza Junqueira", "laser,dermatology"],
|
||||||
|
["o-eixo-intestino-cerebro", "Saúde Mental & Wellness", "O Eixo Intestino-Cérebro", "Como a microbiota modula seu humor e seus níveis de ansiedade.", "Marcela Couto", "brain,gut"],
|
||||||
|
["mindfulness-para-alta-performance", "Saúde Mental & Wellness", "Mindfulness para Alta Performance", "Esvaziando a mente da sobrecarga corporativa de alto escalão.", "Marcela Couto", "meditation,peace"],
|
||||||
|
["biofeedback-na-reducao-do-estresse", "Saúde Mental & Wellness", "Biofeedback na Redução do Estresse", "A tecnologia auxiliando no controle das respostas fisiológicas.", "Dr. Arthur Vilela", "calm,wellness"],
|
||||||
|
["burnout-silencioso", "Saúde Mental & Wellness", "Burnout Silencioso", "Quando a exaustão se transforma em inflamação crônica.", "Marcela Couto", "exhaustion,relax"]
|
||||||
|
];
|
||||||
|
|
||||||
|
export const posts: BlogPost[] = rawData.map((t, i) => {
|
||||||
|
const [id, category, title, desc, author, imgKeys] = t;
|
||||||
|
const content = `
|
||||||
|
<div class="blog-content">
|
||||||
|
<p>O conceito de ${category} tem avançado significativamente. Falando em <strong>${title}</strong>, adentramos um mundo de possibilidades focadas em excelência, rejuvenescimento e saúde. Em instalações luxuosas e bem preparadas, aliamos ciência e tecnologia para obter retornos biológicos substanciais, que garantam um estado de completude sistêmica e paz interior.</p>
|
||||||
|
<h2>O Método Health Premium</h2>
|
||||||
|
<p>A fundação da nossa abordagem baseia-se na singularidade de cada organismo. Os exames de precisão que empregamos são responsáveis por ditar o rumo fisiológico do tratamento recomendado, sem falsas promessas, baseados apenas no conhecimento empírico e prático.</p>
|
||||||
|
<blockquote>"A verdadeira elegância e bem-estar ocorrem quando a aparência e a saúde andam integralmente alinhadas. E os resultados, por mais naturais que sejam, encapam uma ciência assustadoramente moderna." - ${author}</blockquote>
|
||||||
|
<img src="https://loremflickr.com/800/400/${imgKeys}/all?random=${i+100}" alt="${title}" class="rounded-[32px] my-10 w-full object-cover aspect-[21/9] shadow-sm bg-stone-100" />
|
||||||
|
<h3>Seus Maiores Benefícios</h3>
|
||||||
|
<ul class="list-disc pl-6 mb-8 flex flex-col gap-3 text-stone-600 font-light">
|
||||||
|
<li>Evidências pautadas nas maiores revistas médicas do mundo.</li>
|
||||||
|
<li>Uma jornada hiper-customizada levando em conta seus hábitos, histórico e genética.</li>
|
||||||
|
<li>Apoio resolutivo e follow-up contínuo exclusivo da equipe Health Premium.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Estamos aguardando seu contato para agendar uma visita sem compromisso. Sinta o aroma, o conforto e o acolhimento do nosso espaço; sinta-se como sua melhor versão.</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return {
|
||||||
|
id, category, title, desc, img: `https://loremflickr.com/800/600/${imgKeys}/all?random=${i}`,
|
||||||
|
date: `${(i % 28) + 1} Mai 2026`, author, timeToRead: `${(i % 3) + 3} min`,
|
||||||
|
content
|
||||||
|
};
|
||||||
|
});
|
||||||
59
Template-01/src/index.css
Normal file
59
Template-01/src/index.css
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-serif: "Playfair Display", ui-serif, Georgia, serif;
|
||||||
|
|
||||||
|
--color-primary-50: #f4f6f5;
|
||||||
|
--color-primary-100: #e4ebe8;
|
||||||
|
--color-primary-200: #c9d8d1;
|
||||||
|
--color-primary-300: #a2bcb2;
|
||||||
|
--color-primary-400: #769a8d;
|
||||||
|
--color-primary-500: #557f71;
|
||||||
|
--color-primary-600: #426459;
|
||||||
|
--color-primary-700: #355149;
|
||||||
|
--color-primary-800: #2d433c;
|
||||||
|
--color-primary-900: #263832;
|
||||||
|
--color-primary-950: #141f1c;
|
||||||
|
|
||||||
|
--color-sand-50: #fdfdfc;
|
||||||
|
--color-sand-100: #fbfbf9;
|
||||||
|
--color-sand-200: #f5f5f0;
|
||||||
|
--color-sand-300: #ecece4;
|
||||||
|
--color-sand-400: #dfdfd4;
|
||||||
|
--color-sand-500: #cecebe;
|
||||||
|
|
||||||
|
--color-stone-900: #1c1917;
|
||||||
|
--color-stone-800: #292524;
|
||||||
|
--color-stone-50: #fafaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
@apply font-sans bg-stone-50 text-stone-900 antialiased selection:bg-primary-200 selection:text-primary-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@apply font-serif tracking-tight text-stone-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
@apply bg-white/70 backdrop-blur-md border border-white/20 shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.blog-content p {
|
||||||
|
@apply text-lg text-stone-600 font-light leading-relaxed mb-6;
|
||||||
|
}
|
||||||
|
.blog-content h2 {
|
||||||
|
@apply text-3xl font-serif text-stone-900 mt-12 mb-6;
|
||||||
|
}
|
||||||
|
.blog-content h3 {
|
||||||
|
@apply text-2xl font-serif text-stone-900 mt-8 mb-4;
|
||||||
|
}
|
||||||
|
.blog-content blockquote {
|
||||||
|
@apply border-l-4 border-primary-500 bg-sand-200/50 px-8 py-6 rounded-r-2xl italic font-serif text-xl text-stone-800 my-10 shadow-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
Template-01/src/lib/analytics.ts
Normal file
45
Template-01/src/lib/analytics.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
/**
|
||||||
|
* Utilitário de rastreamento de eventos simulado para adicionar Analytics e Pixels.
|
||||||
|
* Em um ambiente de produção real, as chamadas mockadas aqui (console.log) seriam substituídas
|
||||||
|
* pelas chamadas originais das APIs do Facebook Pixel (fbq) e Google Analytics/Tag Manager (gtag).
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const trackEvent = (eventName: string, params?: Record<string, any>) => {
|
||||||
|
// Respeitar as decisões da LGPD e a escolha de cookies do usuário
|
||||||
|
const consent = localStorage.getItem('cookie-consent');
|
||||||
|
if (consent === 'declined') {
|
||||||
|
console.log(`[Pixel Blocked - user declined cookies] Event: ${eventName}`, params);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Simulate Meta Pixel (fbq) tracking ---
|
||||||
|
console.log(`[Meta Pixel] Tracked Event: ${eventName}`, params);
|
||||||
|
|
||||||
|
// In production:
|
||||||
|
// if (typeof window !== 'undefined' && window.fbq) {
|
||||||
|
// window.fbq('track', eventName, params);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// --- Simulate Google Ads/Analytics (gtag) tracking ---
|
||||||
|
const gaEventName = mapEventNameToGoogle(eventName);
|
||||||
|
console.log(`[Google Analytics] Tracked Event: ${gaEventName}`, params);
|
||||||
|
|
||||||
|
// In production:
|
||||||
|
// if (typeof window !== 'undefined' && window.gtag) {
|
||||||
|
// window.gtag('event', gaEventName, params);
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Conversão básica de eventos customizados para nomes padrão do Google (opcional)
|
||||||
|
const mapEventNameToGoogle = (eventName: string): string => {
|
||||||
|
switch (eventName) {
|
||||||
|
case 'Lead':
|
||||||
|
return 'generate_lead';
|
||||||
|
case 'Schedule':
|
||||||
|
return 'book_appointment';
|
||||||
|
case 'Contact':
|
||||||
|
return 'contact';
|
||||||
|
default:
|
||||||
|
return eventName;
|
||||||
|
}
|
||||||
|
};
|
||||||
6
Template-01/src/lib/utils.ts
Normal file
6
Template-01/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
10
Template-01/src/main.tsx
Normal file
10
Template-01/src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {StrictMode} from 'react';
|
||||||
|
import {createRoot} from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
51
Template-01/src/pages/about.tsx
Normal file
51
Template-01/src/pages/about.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
|
||||||
|
export function About() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 flex flex-col gap-32">
|
||||||
|
<section className="px-6 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="flex flex-col gap-8 pr-0 md:pr-12">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossa História</span>
|
||||||
|
<h1 className="text-5xl lg:text-7xl font-serif text-stone-900 leading-[1.1]">
|
||||||
|
A arte de cuidar da <span className="italic text-primary-800">essência.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light leading-relaxed">
|
||||||
|
Fundada com o propósito de redefinir o mercado de saúde e estética, a Health Premium não é apenas uma clínica, é um ecossistema de bem-estar.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-stone-500 font-light leading-relaxed">
|
||||||
|
Nossa jornada começou pela paixão em unir a tecnologia médica mais avançada do mundo ao calor do atendimento humano, criando uma experiência verdadeiramente memorável e transformadora para cada paciente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="aspect-[4/5] rounded-[40px] overflow-hidden bg-stone-200">
|
||||||
|
<img src="https://loremflickr.com/1200/1500/clinic,interior/all" alt="Clínica" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bg-primary-950 py-32 px-6 rounded-[80px] mx-2 md:mx-6 text-center text-white flex flex-col items-center gap-12">
|
||||||
|
<h2 className="text-4xl md:text-6xl font-serif max-w-4xl leading-tight font-light">
|
||||||
|
"Tratar o paciente de ponta a ponta, olhando para a sua saúde, autoestima e felicidade como pilares inseparáveis."
|
||||||
|
</h2>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<p className="font-medium text-xl">Dr. Arthur Vilela</p>
|
||||||
|
<p className="text-primary-400 font-light tracking-wide text-sm uppercase">Fundador & Diretor Clínico</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="px-6 max-w-7xl mx-auto w-full">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{[
|
||||||
|
{ year: '2015', title: 'A Fundação', desc: 'Inauguração do primeiro espaço no Itaim Bibi, focado em Odontologia.' },
|
||||||
|
{ year: '2018', title: 'Expansão Estética', desc: 'Introdução do departamento de dermatologia e tecnologias a laser.' },
|
||||||
|
{ year: '2023', title: 'Ecossistema Health', desc: 'Abertura da nova sede integrada: wellness, medicina e estética em 1000m².' }
|
||||||
|
].map((item, i) => (
|
||||||
|
<div key={i} className="flex flex-col gap-4 border-t border-stone-200 pt-8 mt-8 md:mt-0">
|
||||||
|
<span className="text-4xl font-serif text-primary-300 italic">{item.year}</span>
|
||||||
|
<h4 className="text-xl font-medium text-stone-900">{item.title}</h4>
|
||||||
|
<p className="text-stone-500 font-light">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
Template-01/src/pages/blog-post.tsx
Normal file
67
Template-01/src/pages/blog-post.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { useParams, Link } from 'react-router-dom';
|
||||||
|
import { ArrowLeft, Clock } from 'lucide-react';
|
||||||
|
import { posts } from '../data/posts';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export function BlogPost() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const post = posts.find(p => p.id === id);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return (
|
||||||
|
<div className="pt-40 pb-24 px-6 text-center text-4xl font-serif">Artigo não encontrado.</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article className="pt-32 pb-24">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="px-6 max-w-4xl mx-auto flex flex-col items-center text-center gap-6 mb-12">
|
||||||
|
<Link to="/blog" className="inline-flex items-center gap-2 text-stone-400 hover:text-primary-800 transition-colors text-sm font-medium uppercase tracking-widest self-start mb-4">
|
||||||
|
<ArrowLeft size={16} /> Voltar para o Blog
|
||||||
|
</Link>
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm border border-primary-200 bg-primary-50 px-4 py-1.5 rounded-full">{post.category}</span>
|
||||||
|
<h1 className="text-4xl md:text-6xl font-serif text-stone-900 leading-tight">
|
||||||
|
{post.title}
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center gap-4 text-stone-500 text-sm font-mono mt-4">
|
||||||
|
<span>{post.date}</span>
|
||||||
|
<span className="w-1 h-1 rounded-full bg-stone-300" />
|
||||||
|
<span>Por {post.author}</span>
|
||||||
|
<span className="w-1 h-1 rounded-full bg-stone-300" />
|
||||||
|
<span className="flex items-center gap-1.5"><Clock size={14} /> {post.timeToRead}</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero Image */}
|
||||||
|
<div className="px-6 max-w-6xl mx-auto mb-16">
|
||||||
|
<div className="aspect-[21/9] rounded-[40px] overflow-hidden bg-stone-100">
|
||||||
|
<img src={post.img} alt={post.title} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="px-6 max-w-3xl mx-auto">
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: post.content }} />
|
||||||
|
|
||||||
|
{/* Footer Author Bio */}
|
||||||
|
<div className="mt-20 pt-10 border-t border-stone-200 flex flex-col sm:flex-row items-center sm:items-start gap-6 bg-sand-100 p-8 rounded-[32px]">
|
||||||
|
<div className="w-20 h-20 rounded-full overflow-hidden shrink-0 bg-stone-200">
|
||||||
|
<img src={`https://i.pravatar.cc/150?u=${post.author}`} alt={post.author} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col text-center sm:text-left">
|
||||||
|
<span className="text-xs uppercase tracking-widest text-primary-600 font-bold mb-1">Escrito por</span>
|
||||||
|
<span className="font-serif text-2xl text-stone-900 mb-2">{post.author}</span>
|
||||||
|
<p className="text-stone-600 font-light text-sm leading-relaxed">
|
||||||
|
Especialista da clínica Health Premium, dedicada a integrar as mais recentes tecnologias globais em protocolos de excelência que valorizam a beleza natural e o bem-estar sistêmico.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
Template-01/src/pages/blog.tsx
Normal file
44
Template-01/src/pages/blog.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { posts } from '../data/posts';
|
||||||
|
|
||||||
|
export function Blog() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto flex flex-col gap-16">
|
||||||
|
<div className="max-w-3xl flex flex-col gap-6">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Editorial & Saúde</span>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Conteúdo com <span className="italic text-primary-800">embasamento.</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{posts.map((post, i) => (
|
||||||
|
<Link key={post.id} to={`/blog/${post.id}`} className="group cursor-pointer flex flex-col gap-6">
|
||||||
|
<div className="aspect-[4/3] rounded-[32px] overflow-hidden bg-stone-100 relative">
|
||||||
|
<div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-primary-800 z-10 shadow-sm">
|
||||||
|
{post.category}
|
||||||
|
</div>
|
||||||
|
<img src={post.img} alt={post.title} className="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3 flex-grow">
|
||||||
|
<span className="text-xs uppercase tracking-widest text-stone-400 font-mono">{post.date} · {post.timeToRead}</span>
|
||||||
|
<h3 className="text-2xl font-serif font-medium group-hover:text-primary-800 transition-colors">{post.title}</h3>
|
||||||
|
<p className="text-stone-500 font-light leading-relaxed line-clamp-2">{post.desc}</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-sand-200 mt-16 p-12 md:p-20 rounded-[40px] flex flex-col items-center text-center gap-8 border border-sand-300/50">
|
||||||
|
<h3 className="text-3xl md:text-4xl font-serif text-stone-900">Receba atualizações exclusivas</h3>
|
||||||
|
<p className="text-stone-600 font-light max-w-lg">Junte-se a mais de 5.000 pessoas que recebem nossa newsletter quinzenal com dicas de saúde, longevidade e estética.</p>
|
||||||
|
<div className="flex flex-col sm:flex-row w-full max-w-md gap-2">
|
||||||
|
<input type="email" placeholder="Seu melhor e-mail" className="flex-1 bg-white border-none rounded-full px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none" />
|
||||||
|
<button className="bg-primary-900 text-white rounded-full px-8 py-4 font-medium hover:bg-stone-800 transition-colors">Assinar</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
132
Template-01/src/pages/contact.tsx
Normal file
132
Template-01/src/pages/contact.tsx
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export function Contact() {
|
||||||
|
const [activeTab, setActiveTab] = useState<'message' | 'schedule'>('message');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6">
|
||||||
|
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-10">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif leading-tight">
|
||||||
|
Inicie a sua <span className="italic text-primary-800">jornada.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light max-w-md">
|
||||||
|
Nossa equipe de concierge está à disposição para agendar a sua avaliação e esclarecer qualquer dúvida.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-8 bg-white p-8 md:p-12 rounded-[40px] border border-stone-100 shadow-sm">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">WhatsApp Exclusivo</span>
|
||||||
|
<a href="tel:+5511999999999" className="text-2xl font-serif text-primary-900">+55 11 99999-9999</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">E-mail</span>
|
||||||
|
<a href="mailto:concierge@healthpremium.com" className="text-2xl font-serif text-primary-900">concierge@healthpremium.com</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="text-sm font-medium text-stone-400 uppercase tracking-widest">Endereço</span>
|
||||||
|
<p className="text-xl font-serif text-primary-900 max-w-xs">Av. Faria Lima, 3400 - 15º Andar, Itaim Bibi, São Paulo - SP</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-sand-200 rounded-[40px] p-8 md:p-12 flex flex-col gap-8">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex items-center gap-4 bg-white/50 p-1.5 rounded-full self-start">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('message')}
|
||||||
|
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'message' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
|
||||||
|
>
|
||||||
|
Enviar Mensagem
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('schedule')}
|
||||||
|
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all ${activeTab === 'schedule' ? 'bg-primary-900 text-white shadow-sm' : 'text-stone-600 hover:text-stone-900 hover:bg-white/50'}`}
|
||||||
|
>
|
||||||
|
Integração c/ Google Agenda
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeTab === 'message' ? (
|
||||||
|
<motion.form
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex flex-col gap-6"
|
||||||
|
onSubmit={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium text-stone-600">Nome Completo</label>
|
||||||
|
<input type="text" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="Como deseja ser chamado?" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium text-stone-600">Telefone / WhatsApp</label>
|
||||||
|
<input type="tel" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="(11) 90000-0000" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium text-stone-600">E-mail</label>
|
||||||
|
<input type="email" className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400" placeholder="seu@email.com" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium text-stone-600">Área de Interesse</label>
|
||||||
|
<select className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all text-stone-600 appearance-none">
|
||||||
|
<option>Estética Avançada</option>
|
||||||
|
<option>Odontologia Premium</option>
|
||||||
|
<option>Performance & Longevidade</option>
|
||||||
|
<option>Outros</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-sm font-medium text-stone-600">Como podemos ajudar?</label>
|
||||||
|
<textarea rows={4} className="bg-white border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-primary-300 outline-none transition-all placeholder:text-stone-400 resize-none" placeholder="Conte-nos um pouco sobre o que você busca..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="mt-4 bg-primary-900 text-white font-medium rounded-full py-5 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
|
||||||
|
Enviar Solicitação
|
||||||
|
</button>
|
||||||
|
</motion.form>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white rounded-3xl overflow-hidden shadow-sm h-[650px] flex flex-col items-center justify-center p-8 text-center border border-stone-100"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-2xl font-serif text-stone-900 mb-4">Agenda Online</h4>
|
||||||
|
<p className="text-stone-500 font-light max-w-sm mb-8">
|
||||||
|
Para integrar com o seu Google Agenda real, você precisa criar uma <a href="https://calendar.google.com/calendar/u/0/appointments/schedules" target="_blank" rel="noreferrer" className="text-blue-600 underline">Página de Agendamento do Google</a> e inserir o link (iframe) no código.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="w-full max-w-sm bg-stone-50 rounded-2xl p-6 text-left border border-stone-200">
|
||||||
|
<p className="text-sm font-medium text-stone-600 mb-4">Exemplo de horários livres hoje:</p>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">14:00</button>
|
||||||
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">15:30</button>
|
||||||
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">16:00</button>
|
||||||
|
<button className="py-2.5 rounded-xl border border-primary-200 text-primary-800 font-medium hover:bg-primary-50 transition-colors">17:30</button>
|
||||||
|
</div>
|
||||||
|
<button className="w-full mt-6 bg-primary-900 text-white font-medium rounded-xl py-3 hover:bg-primary-800 transition-colors active:scale-95 duration-200">
|
||||||
|
Simular Agendamento
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
Template-01/src/pages/features.tsx
Normal file
42
Template-01/src/pages/features.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { CheckCircle2 } from 'lucide-react';
|
||||||
|
|
||||||
|
export function Features() {
|
||||||
|
const features = [
|
||||||
|
{ title: 'Tecnologia de Ponta', desc: 'Utilizamos apenas os equipamentos mais avançados do mercado para diagnósticos precisos e tratamentos eficazes.' },
|
||||||
|
{ title: 'Atendimento Humanizado', desc: 'Sua jornada conosco é guiada por empatia, cuidado genuíno e escuta ativa. Aqui, você não é apenas um paciente.' },
|
||||||
|
{ title: 'Protocolos Multidisciplinares', desc: 'Nossa equipe trabalha em conjunto. Dermatologistas, dentistas e terapeutas alinhados em um único plano para você.' },
|
||||||
|
{ title: 'Ambiente Sofisticado', desc: 'Uma clínica inteiramente projetada para parecer um spa cinco estrelas, removendo a ansiedade do ambiente clínico.' },
|
||||||
|
{ title: 'Privacidade Absoluta', desc: 'Salas de espera privativas e protocolos de discrição desenhados para proteger sua identidade e segurança.' },
|
||||||
|
{ title: 'Acompanhamento Contínuo', desc: 'Nosso compromisso não termina após o procedimento. O concierge acompanha cada etapa do seu pós-operatório.' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto flex flex-col gap-20">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">O Padrão Premium</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif text-stone-900 leading-tight">
|
||||||
|
Por que escolher a <span className="italic text-primary-800">Health Premium?</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light mt-4">
|
||||||
|
Não somos apenas mais uma clínica. Somos o resultado da busca incessante pela perfeição na área da saúde.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||||
|
{features.slice(0,4).map((f, i) => (
|
||||||
|
<div key={i} className="bg-white border border-stone-100 p-8 rounded-[32px] hover:shadow-lg transition-shadow">
|
||||||
|
<CheckCircle2 className="text-primary-500 mb-6 w-8 h-8" />
|
||||||
|
<h3 className="text-xl font-serif font-medium mb-3 text-stone-900">{f.title}</h3>
|
||||||
|
<p className="text-stone-500 text-sm font-light leading-relaxed">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full aspect-[21/9] rounded-[40px] overflow-hidden bg-stone-200">
|
||||||
|
<img src="https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=2000&auto=format&fit=crop&crop=bottom" alt="Premium environment" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
269
Template-01/src/pages/home.tsx
Normal file
269
Template-01/src/pages/home.tsx
Normal file
|
|
@ -0,0 +1,269 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowRight, Star, Shield, Activity, Users } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative min-h-[90vh] flex items-center justify-center pt-24 pb-12 px-6">
|
||||||
|
{/* Background Image with Overlay */}
|
||||||
|
<div className="absolute inset-0 z-0 overflow-hidden rounded-b-[40px] md:rounded-b-[80px]">
|
||||||
|
<div className="absolute inset-0 bg-stone-900/40 z-10" />
|
||||||
|
<motion.img
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5, ease: 'easeOut' }}
|
||||||
|
src="https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=2500&auto=format&fit=crop"
|
||||||
|
alt="Clinic interior"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-5xl mx-auto text-center flex flex-col items-center mt-12 md:mt-0">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass bg-white/10 text-white border-white/20 mb-8"
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 rounded-full bg-primary-400" />
|
||||||
|
<span className="text-sm font-medium tracking-wide uppercase">Referência em Saúde Premium</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className="text-5xl md:text-7xl lg:text-8xl font-serif text-white leading-[1.05] tracking-tight mb-8"
|
||||||
|
>
|
||||||
|
A Excelência que a <br className="hidden md:block" />
|
||||||
|
sua vida <span className="italic font-light text-primary-200">merece.</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.6 }}
|
||||||
|
className="text-lg md:text-xl text-stone-200 max-w-2xl font-light leading-relaxed mb-10"
|
||||||
|
>
|
||||||
|
Um novo conceito de clínica. Aliamos tecnologia de ponta, atendimento humanizado e um ambiente sofisticado para resultados incomparáveis.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.8 }}
|
||||||
|
className="flex flex-col sm:flex-row items-center gap-6"
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to="/contato"
|
||||||
|
className="group relative inline-flex items-center justify-center px-8 py-4 text-base font-medium text-stone-900 bg-white rounded-full overflow-hidden transition-transform active:scale-95 w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
<span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-10 bg-gradient-to-b from-transparent via-transparent to-black" />
|
||||||
|
<span className="relative flex items-center gap-2">
|
||||||
|
Agendar Avaliação
|
||||||
|
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
<Link to="/servicos" className="text-white hover:text-primary-200 font-medium transition-colors">
|
||||||
|
Conheça as especialidades
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 1, delay: 1.5 }}
|
||||||
|
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 z-10"
|
||||||
|
>
|
||||||
|
<span className="text-white/60 text-xs font-medium uppercase tracking-widest">Explore</span>
|
||||||
|
<div className="w-[1px] h-12 bg-white/20 relative overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
animate={{ y: [0, 48, 48] }}
|
||||||
|
transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
|
||||||
|
className="absolute top-0 left-0 w-full h-1/2 bg-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="py-24 px-6 relative z-20 -mt-12">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="glass rounded-[32px] p-8 md:p-12 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-white/40" />
|
||||||
|
{[
|
||||||
|
{ label: 'Pacientes Satisfeitos', value: '+10k' },
|
||||||
|
{ label: 'Profissionais Especializados', value: '25' },
|
||||||
|
{ label: 'Anos de Experiência', value: '15' },
|
||||||
|
{ label: 'Protocolos Exclusivos', value: '40' },
|
||||||
|
].map((stat, i) => (
|
||||||
|
<div key={i} className="flex flex-col items-center text-center relative z-10">
|
||||||
|
<span className="text-4xl md:text-5xl font-serif text-primary-900 mb-2">{stat.value}</span>
|
||||||
|
<span className="text-sm font-medium text-stone-500 uppercase tracking-wider">{stat.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Philosophy Section */}
|
||||||
|
<section className="py-24 px-6 bg-sand-200/50">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
|
||||||
|
<div className="w-full lg:w-1/2 relative">
|
||||||
|
<div className="aspect-[4/5] rounded-[40px] overflow-hidden">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=1200&h=1500&auto=format&fit=crop&crop=entropy"
|
||||||
|
alt="Medical Professional"
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:flex absolute -bottom-10 -right-10 glass bg-white/80 p-8 rounded-[32px] max-w-sm flex-col gap-4">
|
||||||
|
<div className="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-primary-900 mb-2">
|
||||||
|
<Shield size={24} />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-serif font-medium">Cuidado Exclusivo</h4>
|
||||||
|
<p className="text-stone-500 text-sm">Cada protocolo é desenvolvido de forma única, respeitando a sua individualidade.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full lg:w-1/2 flex flex-col gap-8">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossa Filosofia</span>
|
||||||
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-serif leading-tight">
|
||||||
|
Acreditamos que a <span className="italic text-primary-800">saúde</span> e a estética caminham lado a lado.
|
||||||
|
</h2>
|
||||||
|
<p className="text-stone-600 text-lg font-light leading-relaxed">
|
||||||
|
No Health Premium, não tratamos apenas sintomas, nós desenhamos jornadas de transformação. Nosso corpo clínico multidisciplinar atua de forma integrada para elevar a sua qualidade de vida e ressaltar a sua beleza natural.
|
||||||
|
</p>
|
||||||
|
<p className="text-stone-600 text-lg font-light leading-relaxed">
|
||||||
|
Com um ambiente projetado para entregar tranquilidade desde o primeiro passo, utilizamos os equipamentos mais avançados do mundo para garantir segurança, conforto e resultados impressionantes.
|
||||||
|
</p>
|
||||||
|
<div className="pt-6 border-t border-stone-200/50">
|
||||||
|
<Link to="/sobre" className="group inline-flex items-center gap-2 text-primary-900 font-medium">
|
||||||
|
Conheça a nossa história
|
||||||
|
<span className="w-8 h-[1px] bg-primary-900 group-hover:w-12 transition-all" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Bento Grid */}
|
||||||
|
<section className="py-32 px-6">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col gap-16">
|
||||||
|
<div className="text-center max-w-2xl mx-auto flex flex-col gap-4">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Especialidades</span>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-serif">A resposta completa para o seu bem-estar</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="md:col-span-2 group relative overflow-hidden rounded-[40px] aspect-[16/9] md:aspect-auto md:h-[400px]">
|
||||||
|
<img src="https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=1200&h=800&auto=format&fit=crop&crop=bottom" className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Estética Avançada" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/80 via-stone-900/20 to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 p-8 md:p-12 flex flex-col gap-3">
|
||||||
|
<h3 className="text-3xl font-serif text-white">Estética Avançada</h3>
|
||||||
|
<p className="text-white/80 max-w-md font-light">Procedimentos minimamente invasivos com foco na naturalidade e rejuvenescimento.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="group relative overflow-hidden rounded-[40px] aspect-square md:aspect-auto md:h-[400px] bg-primary-900 flex flex-col justify-between p-8 md:p-10">
|
||||||
|
<Activity className="text-primary-300 w-12 h-12" />
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<h3 className="text-2xl font-serif text-white">Saúde Integrativa</h3>
|
||||||
|
<p className="text-white/70 font-light text-sm">Equilíbrio metabólico e longevidade através de protocolos personalizados.</p>
|
||||||
|
<div className="mt-4">
|
||||||
|
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full border border-white/20 text-white group-hover:bg-white group-hover:text-primary-900 transition-colors">
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="group relative overflow-hidden rounded-[40px] aspect-square md:aspect-auto md:h-[400px] bg-sand-200 flex flex-col justify-between p-8 md:p-10">
|
||||||
|
<Users className="text-primary-800 w-12 h-12" />
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<h3 className="text-2xl font-serif text-stone-900">Corpo Clínico</h3>
|
||||||
|
<p className="text-stone-600 font-light text-sm">Mais de 20 especialistas certificados atuando de forma focada e sinérgica.</p>
|
||||||
|
<div className="mt-4">
|
||||||
|
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full border border-stone-300 text-stone-900 group-hover:border-primary-900 transition-colors">
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2 group relative overflow-hidden rounded-[40px] aspect-[16/9] md:aspect-auto md:h-[400px]">
|
||||||
|
<img src="https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?q=80&w=1200&h=800&auto=format&fit=crop&crop=left" className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Odontologia Premium" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/80 via-stone-900/20 to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 p-8 md:p-12 flex flex-col gap-3">
|
||||||
|
<h3 className="text-3xl font-serif text-white">Odontologia Especializada</h3>
|
||||||
|
<p className="text-white/80 max-w-md font-light">Lentes de contato dental, invisalign e reabilitação oral com tecnologia 3D.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-4">
|
||||||
|
<Link to="/servicos" className="inline-flex items-center gap-2 px-8 py-4 rounded-full border border-stone-300 text-stone-900 hover:bg-stone-100 transition-colors font-medium">
|
||||||
|
Ver todas especialidades
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Testimonials Section */}
|
||||||
|
<section className="py-24 px-6 bg-primary-950 text-white rounded-[40px] md:rounded-[80px] mx-2 md:mx-6">
|
||||||
|
<div className="max-w-7xl mx-auto flex flex-col gap-16">
|
||||||
|
<div className="text-center max-w-2xl mx-auto flex flex-col gap-4">
|
||||||
|
<span className="text-primary-400 font-medium tracking-widest uppercase text-sm">Depoimentos</span>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-serif font-light">Histórias que <span className="italic text-primary-300">inspiram.</span></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
text: "A experiência superou todas as minhas expectativas. Desde o primeiro contato até o pós-procedimento, me senti acolhida e segura. Resultados extremamente naturais.",
|
||||||
|
author: "Camila Vilela",
|
||||||
|
role: "Empresária",
|
||||||
|
img: "https://i.pravatar.cc/150?img=44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Profissionalismo impecável. O tratamento foi totalmente personalizado para o meu perfil e a equipe médica me transmitiu muita confiança em cada etapa.",
|
||||||
|
author: "Rafael Souza",
|
||||||
|
role: "Advogado",
|
||||||
|
img: "https://i.pravatar.cc/150?img=68"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "O ambiente da clínica parece um spa cinco estrelas. A atenção aos mínimos detalhes faz toda a diferença para quem busca um atendimento realmente premium.",
|
||||||
|
author: "Juliana Mendes",
|
||||||
|
role: "Arquiteta",
|
||||||
|
img: "https://i.pravatar.cc/150?img=32"
|
||||||
|
}
|
||||||
|
].map((testimonial, i) => (
|
||||||
|
<div key={i} className="flex flex-col gap-6 bg-primary-900/50 p-8 rounded-[32px] border border-primary-800/50">
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{[1,2,3,4,5].map((s) => <Star key={s} size={16} className="fill-primary-400 text-primary-400" />)}
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-primary-100 font-light leading-relaxed flex-grow">
|
||||||
|
"{testimonial.text}"
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 mt-4 pt-6 border-t border-primary-800/50">
|
||||||
|
<div className="w-12 h-12 rounded-full overflow-hidden">
|
||||||
|
<img src={testimonial.img} alt={testimonial.author} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium text-white">{testimonial.author}</span>
|
||||||
|
<span className="text-primary-400 text-sm tracking-wide">{testimonial.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="h-24"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
Template-01/src/pages/not-found.tsx
Normal file
24
Template-01/src/pages/not-found.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowLeft } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-[80vh] flex flex-col items-center justify-center text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex flex-col items-center gap-6"
|
||||||
|
>
|
||||||
|
<span className="text-9xl font-serif text-stone-200">404</span>
|
||||||
|
<h1 className="text-4xl font-serif text-stone-900">Página não encontrada</h1>
|
||||||
|
<p className="text-stone-500 font-light max-w-md">
|
||||||
|
O caminho que você buscou não está mais disponível ou foi movido. Você pode retornar à página inicial e continuar sua jornada.
|
||||||
|
</p>
|
||||||
|
<Link to="/" className="mt-4 flex items-center gap-2 px-8 py-4 bg-primary-900 text-white rounded-full font-medium hover:bg-stone-800 transition-colors active:scale-95 duration-200">
|
||||||
|
<ArrowLeft size={18} /> Voltar ao Início
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
53
Template-01/src/pages/results.tsx
Normal file
53
Template-01/src/pages/results.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function Results() {
|
||||||
|
const results = [
|
||||||
|
{ title: 'Reabilitação Estética', desc: 'Preenchimento labial e reestruturação mandibular.', imgBefore: 'https://loremflickr.com/400/600/face,natural,before', imgAfter: 'https://loremflickr.com/400/600/face,beautiful,after' },
|
||||||
|
{ title: 'Lentes de Contato Dental', desc: 'Transformação do sorriso com 10 lentes em porcelana VIP.', imgBefore: 'https://loremflickr.com/400/600/teeth,smile,before', imgAfter: 'https://loremflickr.com/400/600/teeth,smile,perfect' },
|
||||||
|
{ title: 'Tratamento de Pele', desc: 'Protocolo de Laser Lavieen para melasma.', imgBefore: 'https://loremflickr.com/400/600/skin,natural,before', imgAfter: 'https://loremflickr.com/400/600/skin,perfect,after' },
|
||||||
|
{ title: 'Harmonização Facial', desc: 'Ultraformer III + Bioestimuladores.', imgBefore: 'https://loremflickr.com/400/600/woman,portrait,natural', imgAfter: 'https://loremflickr.com/400/600/woman,portrait,beautiful' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto flex flex-col gap-20">
|
||||||
|
<div className="max-w-3xl flex flex-col gap-6 mx-auto text-center items-center">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossos Resultados</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif text-stone-900 leading-tight">
|
||||||
|
A diferença que a <span className="italic text-primary-800">excelência</span> faz.
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light leading-relaxed">
|
||||||
|
Nossa maior assinatura é a naturalidade. Veja como transformamos vidas evidenciando o melhor de cada paciente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
{results.map((r, i) => (
|
||||||
|
<div key={i} className="flex flex-col gap-6">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="relative aspect-[3/4] bg-stone-200 rounded-l-[32px] overflow-hidden group">
|
||||||
|
<img src={r.imgBefore} alt="Antes" className="w-full h-full object-cover" />
|
||||||
|
<div className="absolute top-4 left-4 bg-black/40 backdrop-blur-sm text-white px-3 py-1 rounded-full text-xs uppercase tracking-wider">Antes</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative aspect-[3/4] bg-stone-200 rounded-r-[32px] overflow-hidden group">
|
||||||
|
<img src={r.imgAfter} alt="Depois" className="w-full h-full object-cover" />
|
||||||
|
<div className="absolute top-4 right-4 bg-primary-900/80 backdrop-blur-sm text-white px-3 py-1 rounded-full text-xs uppercase tracking-wider">Depois</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4">
|
||||||
|
<h3 className="text-2xl font-serif text-stone-900">{r.title}</h3>
|
||||||
|
<p className="text-stone-500 font-light mt-2">{r.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-8">
|
||||||
|
<Link to="/contato" className="group inline-flex items-center gap-3 px-8 py-4 bg-primary-900 text-white rounded-full font-medium hover:bg-stone-800 transition-colors">
|
||||||
|
Quero resultados assim <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
84
Template-01/src/pages/services.tsx
Normal file
84
Template-01/src/pages/services.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { Sparkles, Flower2, HeartPulse, Brain, Droplets, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function Services() {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: Sparkles,
|
||||||
|
title: 'Estética Facial',
|
||||||
|
desc: 'Harmonização, toxina botulínica, preenchimentos avançados e fios de sustentação com foco absoluto em naturalidade e rejuvenescimento estrutural.',
|
||||||
|
img: 'https://loremflickr.com/800/800/woman,spa,aesthetic/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Flower2,
|
||||||
|
title: 'Odontologia Premium',
|
||||||
|
desc: 'Lentes de contato em porcelana ultrafina, reabilitação oral 3D e acompanhamento clínico contínuo para um sorriso perfeito e saudável.',
|
||||||
|
img: 'https://loremflickr.com/800/800/dentist,smile,premium/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HeartPulse,
|
||||||
|
title: 'Performance & Longevidade',
|
||||||
|
desc: 'Reposição hormonal, medicina do estilo de vida e protocolos intravenosos para maximizar sua energia, foco e vitalidade.',
|
||||||
|
img: 'https://loremflickr.com/800/800/wellness,yoga,health/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Droplets,
|
||||||
|
title: 'Skincare Clínico',
|
||||||
|
desc: 'Lasers de última geração, peelings profundos e tecnologias híbridas para o tratamento de manchas, cicatrizes e textura de pele.',
|
||||||
|
img: 'https://loremflickr.com/800/800/skincare,laser,clinic/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Brain,
|
||||||
|
title: 'Saúde Mental & Wellness',
|
||||||
|
desc: 'Acompanhamento psiquiátrico e psicológico de alto padrão, focado em alta performance, manejo de estresse e inteligência emocional.',
|
||||||
|
img: 'https://loremflickr.com/800/800/therapy,calm,mind/all'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto flex flex-col gap-20">
|
||||||
|
<div className="max-w-3xl flex flex-col gap-6">
|
||||||
|
<motion.span initial={{opacity:0}} animate={{opacity:1}} transition={{duration:1}} className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossas Especialidades</motion.span>
|
||||||
|
<motion.h1 initial={{opacity:0, y:-10}} animate={{opacity:1, y:0}} transition={{duration:0.8, delay: 0.1}} className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Protocolos <span className="italic text-primary-800">exclusivos</span> para você.
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{duration:0.8, delay:0.2}} className="text-xl text-stone-500 font-light max-w-2xl leading-relaxed">
|
||||||
|
Cada tratamento é desenhado de forma única, unindo a ciência mais avançada a um olhar artístico e profundamente humano.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-12">
|
||||||
|
{services.map((svc, i) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{opacity: 0, y: 30}}
|
||||||
|
whileInView={{opacity: 1, y: 0}}
|
||||||
|
viewport={{once:true, margin: "-100px"}}
|
||||||
|
transition={{duration: 0.8}}
|
||||||
|
key={i}
|
||||||
|
className="group flex flex-col md:flex-row gap-8 md:gap-16 items-center bg-white p-6 md:p-8 rounded-[40px] shadow-sm border border-stone-100 hover:shadow-xl transition-all duration-500"
|
||||||
|
>
|
||||||
|
<div className="w-full md:w-5/12 h-[300px] md:h-[400px] rounded-[32px] overflow-hidden relative">
|
||||||
|
<div className="absolute inset-0 bg-primary-900/10 group-hover:bg-transparent transition-colors z-10 duration-500" />
|
||||||
|
<img src={svc.img} alt={svc.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-7/12 flex flex-col gap-6 p-4 md:pr-12">
|
||||||
|
<div className="w-14 h-14 rounded-full bg-sand-200 text-primary-800 flex items-center justify-center">
|
||||||
|
<svc.icon size={26} strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-serif text-stone-900">{svc.title}</h2>
|
||||||
|
<p className="text-lg text-stone-500 font-light leading-relaxed">{svc.desc}</p>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-6 border-t border-stone-100">
|
||||||
|
<Link to="/contato" className="inline-flex items-center gap-3 text-primary-800 font-medium hover:text-primary-600 transition-colors">
|
||||||
|
Agendar avaliação <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
Template-01/src/pages/team.tsx
Normal file
45
Template-01/src/pages/team.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { Linkedin } from 'lucide-react';
|
||||||
|
|
||||||
|
export function Team() {
|
||||||
|
const team = [
|
||||||
|
{ name: 'Dr. Arthur Vilela', role: 'Diretor Clínico & Estética', cro: 'CRM 12345', img: 'https://i.pravatar.cc/600?img=11' },
|
||||||
|
{ name: 'Dra. Luiza Junqueira', role: 'Dermatologista', cro: 'CRM 54321', img: 'https://i.pravatar.cc/600?img=35' },
|
||||||
|
{ name: 'Dr. Thiago Mendes', role: 'Odontologia Estética', cro: 'CRO 98765', img: 'https://i.pravatar.cc/600?img=12' },
|
||||||
|
{ name: 'Marcela Couto', role: 'Head de Wellness', cro: 'CRN 32189', img: 'https://i.pravatar.cc/600?img=43' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto">
|
||||||
|
<div className="flex flex-col items-center text-center gap-6 mb-20">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Corpo Clínico</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif text-stone-900 leading-tight">
|
||||||
|
Especialistas em <span className="italic text-primary-800">excelência.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light max-w-2xl">
|
||||||
|
Nossa equipe foi cuidadosamente selecionada para oferecer um atendimento multidisciplinar focado em resultados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{team.map((member, i) => (
|
||||||
|
<div key={i} className="group flex flex-col gap-4">
|
||||||
|
<div className="aspect-[3/4] bg-stone-200 rounded-[32px] overflow-hidden relative">
|
||||||
|
<img src={member.img} alt={member.name} className="w-full h-full object-cover grayscale-[30%] group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||||
|
<button className="bg-white/20 backdrop-blur-md p-3 rounded-full text-white hover:bg-white hover:text-black transition-colors">
|
||||||
|
<Linkedin size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col px-2">
|
||||||
|
<h3 className="text-xl font-serif font-medium">{member.name}</h3>
|
||||||
|
<p className="text-primary-700 text-sm mt-1 mb-2">{member.role}</p>
|
||||||
|
<p className="text-stone-400 text-xs font-mono">{member.cro}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
Template-01/tsconfig.json
Normal file
26
Template-01/tsconfig.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
24
Template-01/vite.config.ts
Normal file
24
Template-01/vite.config.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
import {defineConfig, loadEnv} from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig(({mode}) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
define: {
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
// HMR is disabled in AI Studio via DISABLE_HMR env var.
|
||||||
|
// Do not modifyâfile watching is disabled to prevent flickering during agent edits.
|
||||||
|
hmr: process.env.DISABLE_HMR !== 'true',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
20
Template-02/README.md
Normal file
20
Template-02/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/18f79c6b-2746-4063-a3c7-499d3a1fa7af
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
56
Template-02/index.html
Normal file
56
Template-02/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>Health Premium | Excelência em Saúde, Estética e Bem-estar</title>
|
||||||
|
<meta name="title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta name="description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://www.healthpremium.com.br/" />
|
||||||
|
<meta property="og:title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta property="og:description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
<meta property="og:image" content="https://loremflickr.com/1200/630/clinic,luxury/all" />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:url" content="https://www.healthpremium.com.br/" />
|
||||||
|
<meta property="twitter:title" content="Health Premium | Excelência em Saúde, Estética e Bem-estar" />
|
||||||
|
<meta property="twitter:description" content="Um novo conceito de clínica médica e estética. Especialistas em dermatologia, odontologia premium, performance e longevidade." />
|
||||||
|
<meta property="twitter:image" content="https://loremflickr.com/1200/630/clinic,luxury/all" />
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
|
||||||
|
|
||||||
|
<!-- Schema Markup (JSON-LD) -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "MedicalClinic",
|
||||||
|
"name": "Health Premium",
|
||||||
|
"image": "https://loremflickr.com/1200/630/clinic,luxury/all",
|
||||||
|
"@id": "https://www.healthpremium.com.br/",
|
||||||
|
"url": "https://www.healthpremium.com.br/",
|
||||||
|
"telephone": "+55 11 99999-9999",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Av. Faria Lima, 3400 - 15º Andar",
|
||||||
|
"addressLocality": "São Paulo",
|
||||||
|
"addressRegion": "SP",
|
||||||
|
"postalCode": "04538-132",
|
||||||
|
"addressCountry": "BR"
|
||||||
|
},
|
||||||
|
"description": "Clínica premium com especialistas em dermatologia, odontologia, estética facial e medicina do estilo de vida."
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
6
Template-02/metadata.json
Normal file
6
Template-02/metadata.json
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "Health Premium",
|
||||||
|
"description": "Template extremamente premium e moderno para clínicas médicas, estéticas, odontológicas e profissionais da saúde focados em alto padrão. Apresenta design sophistificado e alto refinamento visual.",
|
||||||
|
"requestFramePermissions": [],
|
||||||
|
"majorCapabilities": []
|
||||||
|
}
|
||||||
5692
Template-02/package-lock.json
generated
Normal file
5692
Template-02/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
41
Template-02/package.json
Normal file
41
Template-02/package.json
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"name": "react-example",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"clean": "rm -rf dist",
|
||||||
|
"lint": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@google/genai": "^1.29.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
|
"@tailwindcss/vite": "^4.1.14",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"dotenv": "^17.2.3",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"lucide-react": "^0.546.0",
|
||||||
|
"motion": "^12.23.24",
|
||||||
|
"react": "^19.0.1",
|
||||||
|
"react-calendly": "^4.4.0",
|
||||||
|
"react-dom": "^19.0.1",
|
||||||
|
"react-helmet-async": "^3.0.0",
|
||||||
|
"react-markdown": "^10.1.0",
|
||||||
|
"react-router-dom": "^7.15.0",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/node": "^22.14.0",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"tailwindcss": "^4.1.14",
|
||||||
|
"tsx": "^4.21.0",
|
||||||
|
"typescript": "~5.8.2",
|
||||||
|
"vite": "^6.2.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
Template-02/public/robots.txt
Normal file
3
Template-02/public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Sitemap: https://www.healthpremium.com.br/sitemap.xml
|
||||||
11
Template-02/public/sitemap.xml
Normal file
11
Template-02/public/sitemap.xml
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url><loc>https://www.healthpremium.com.br/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/sobre</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/servicos</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/profissionais</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/resultados</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/diferenciais</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/blog</loc><changefreq>daily</changefreq><priority>0.9</priority></url>
|
||||||
|
<url><loc>https://www.healthpremium.com.br/contato</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
</urlset>
|
||||||
62
Template-02/src/App.tsx
Normal file
62
Template-02/src/App.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { HelmetProvider } from 'react-helmet-async';
|
||||||
|
import { Navbar } from './components/navbar';
|
||||||
|
import { Footer } from './components/footer';
|
||||||
|
import { CookieBanner } from './components/cookie-banner';
|
||||||
|
import { WhatsAppButton } from './components/whatsapp-button';
|
||||||
|
import { Home } from './pages/home';
|
||||||
|
import { Services } from './pages/services';
|
||||||
|
import { About } from './pages/about';
|
||||||
|
import { Team } from './pages/team';
|
||||||
|
import { Blog } from './pages/blog';
|
||||||
|
import { BlogPost } from './pages/blog-post';
|
||||||
|
import { Privacy } from './pages/privacy';
|
||||||
|
import { Terms } from './pages/terms';
|
||||||
|
import { Features } from './pages/features';
|
||||||
|
import { Contact } from './pages/contact';
|
||||||
|
import { Results } from './pages/results';
|
||||||
|
import { NotFound } from './pages/not-found';
|
||||||
|
import { CookieBanner } from './components/cookie-banner';
|
||||||
|
import { trackPageView } from './lib/tracking';
|
||||||
|
|
||||||
|
function RouteTracker() {
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
trackPageView(pathname);
|
||||||
|
}, [pathname]);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<HelmetProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<RouteTracker />
|
||||||
|
<div className="min-h-screen flex flex-col font-sans">
|
||||||
|
<Navbar />
|
||||||
|
<main className="flex-grow">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/sobre" element={<About />} />
|
||||||
|
<Route path="/servicos" element={<Services />} />
|
||||||
|
<Route path="/profissionais" element={<Team />} />
|
||||||
|
<Route path="/resultados" element={<Results />} />
|
||||||
|
<Route path="/diferenciais" element={<Features />} />
|
||||||
|
<Route path="/blog" element={<Blog />} />
|
||||||
|
<Route path="/blog/:id" element={<BlogPost />} />
|
||||||
|
<Route path="/contato" element={<Contact />} />
|
||||||
|
<Route path="/privacidade" element={<Privacy />} />
|
||||||
|
<Route path="/termos" element={<Terms />} />
|
||||||
|
<Route path="*" element={<NotFound />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
<CookieBanner />
|
||||||
|
<WhatsAppButton />
|
||||||
|
</div>
|
||||||
|
</BrowserRouter>
|
||||||
|
</HelmetProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
Template-02/src/components/CookieConsent.tsx
Normal file
62
Template-02/src/components/CookieConsent.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { initTracking } from '../lib/tracking';
|
||||||
|
|
||||||
|
export default function CookieConsent() {
|
||||||
|
const [showConsent, setShowConsent] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const consent = localStorage.getItem('cookieConsent');
|
||||||
|
if (!consent) {
|
||||||
|
setShowConsent(true);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleAccept = () => {
|
||||||
|
localStorage.setItem('cookieConsent', 'accepted');
|
||||||
|
setShowConsent(false);
|
||||||
|
initTracking();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDecline = () => {
|
||||||
|
localStorage.setItem('cookieConsent', 'declined');
|
||||||
|
setShowConsent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{showConsent && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6"
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto bg-stone-900 text-white rounded-2xl shadow-2xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-serif mb-2">Sua privacidade importa</h3>
|
||||||
|
<p className="text-stone-300 text-sm leading-relaxed">
|
||||||
|
Utilizamos cookies para analisar o tráfego do site, personalizar conteúdos e oferecer anúncios relevantes.
|
||||||
|
Ao clicar em "Aceitar", você concorda com o uso de cookies para Analytics e marketing através do Google Analytics e Meta Pixel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 w-full md:w-auto shrink-0">
|
||||||
|
<button
|
||||||
|
onClick={handleDecline}
|
||||||
|
className="px-6 py-3 border border-stone-700 text-stone-300 hover:bg-stone-800 text-sm tracking-widest uppercase font-semibold transition-colors w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
Recusar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleAccept}
|
||||||
|
className="px-6 py-3 bg-white text-stone-900 hover:bg-stone-200 text-sm tracking-widest uppercase font-semibold transition-colors w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
Aceitar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
Template-02/src/components/cookie-banner.tsx
Normal file
82
Template-02/src/components/cookie-banner.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { initTracking } from '../lib/tracking';
|
||||||
|
|
||||||
|
export function CookieBanner() {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// delay showing banner slightly for better UX
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
const consent = localStorage.getItem('cookie-consent');
|
||||||
|
if (!consent) {
|
||||||
|
setIsVisible(true);
|
||||||
|
} else if (consent === 'accepted') {
|
||||||
|
initTracking();
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const acceptCookies = () => {
|
||||||
|
localStorage.setItem('cookie-consent', 'accepted');
|
||||||
|
setIsVisible(false);
|
||||||
|
initTracking();
|
||||||
|
};
|
||||||
|
|
||||||
|
const declineCookies = () => {
|
||||||
|
localStorage.setItem('cookie-consent', 'declined');
|
||||||
|
setIsVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||||
|
className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6 pointer-events-none flex justify-center"
|
||||||
|
>
|
||||||
|
<div className="bg-stone-900 border border-stone-800 text-stone-300 w-full max-w-5xl rounded-3xl p-6 shadow-2xl pointer-events-auto flex flex-col md:flex-row items-center gap-6 md:gap-12 justify-between">
|
||||||
|
<div className="flex flex-col gap-2 flex-grow">
|
||||||
|
<h4 className="text-white font-medium text-lg flex items-center gap-2">
|
||||||
|
Nós valorizamos sua privacidade
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm font-light text-stone-400 leading-relaxed">
|
||||||
|
Utilizamos cookies e tecnologias semelhantes (incluindo pixels de rastreamento) para melhorar sua experiência de navegação,
|
||||||
|
analisar o tráfego do site e personalizar nosso conteúdo e anúncios. Ao clicar em "Aceitar",
|
||||||
|
você concorda com nossa <Link to="/privacidade" className="text-primary-300 hover:text-white transition-colors hover:underline">Política de Privacidade</Link>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end mt-4 md:mt-0">
|
||||||
|
<button
|
||||||
|
onClick={declineCookies}
|
||||||
|
className="px-5 py-3 text-sm font-medium text-stone-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
Recusar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={acceptCookies}
|
||||||
|
className="px-8 py-3 bg-white hover:bg-stone-200 text-stone-900 text-sm font-medium rounded-full transition-colors whitespace-nowrap active:scale-95"
|
||||||
|
>
|
||||||
|
Aceitar Cookies
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={declineCookies}
|
||||||
|
className="p-2.5 text-stone-500 hover:text-white transition-colors ml-2 hidden md:flex items-center justify-center rounded-full hover:bg-stone-800"
|
||||||
|
aria-label="Fechar"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
Template-02/src/components/footer.tsx
Normal file
44
Template-02/src/components/footer.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import { Instagram, Linkedin } from 'lucide-react';
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-stone-900 text-white pt-24 pb-12">
|
||||||
|
<div className="max-w-[1400px] mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-16 mb-24">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-serif font-bold tracking-tight text-white mb-6">ODONTO<span className="font-light text-primary-400">PREMIUM</span></h2>
|
||||||
|
<p className="text-stone-400 max-w-sm text-lg font-light">Uma nova visão para a odontologia moderna. Ciência, tecnologia e compromisso irrevogável com o que há de melhor.</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p className="text-xs uppercase tracking-widest text-stone-500 font-semibold mb-4">Acesso Rápido</p>
|
||||||
|
<NavLink to="/diferenciais" className="hover:text-primary-300 transition-colors">A Clínica</NavLink>
|
||||||
|
<NavLink to="/resultados" className="hover:text-primary-300 transition-colors">Especialidades</NavLink>
|
||||||
|
<NavLink to="/blog" className="hover:text-primary-300 transition-colors">Editorial</NavLink>
|
||||||
|
<NavLink to="/contato" className="hover:text-primary-300 transition-colors">Agendamento</NavLink>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<p className="text-xs uppercase tracking-widest text-stone-500 font-semibold mb-4">Contato</p>
|
||||||
|
<p className="text-stone-300">Av. Faria Lima, 3400 - Cj 151</p>
|
||||||
|
<p className="text-stone-300">São Paulo, SP</p>
|
||||||
|
<p className="text-stone-300 mt-4">+55 11 99999-9999</p>
|
||||||
|
<p className="text-stone-300 hover:text-primary-300 transition-colors cursor-pointer">contato@odontopremium.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-stone-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-6 text-xs tracking-wider text-stone-500">
|
||||||
|
<p className="flex flex-col md:flex-row items-center gap-2 md:gap-4 text-center md:text-left">
|
||||||
|
<span>© {new Date().getFullYear()} Odonto Premium. Direitos reservados. CRO-SP 12345</span>
|
||||||
|
<span className="hidden md:inline text-stone-700">|</span>
|
||||||
|
<NavLink to="/privacidade" className="hover:text-white transition-colors">Privacidade</NavLink>
|
||||||
|
<span className="hidden md:inline text-stone-700">|</span>
|
||||||
|
<NavLink to="/termos" className="hover:text-white transition-colors">Termos de Uso</NavLink>
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-6 items-center">
|
||||||
|
<a href="#" className="hover:text-white transition-colors aria-label='Instagram'"><Instagram size={20} strokeWidth={1.5} /></a>
|
||||||
|
<a href="#" className="hover:text-white transition-colors aria-label='LinkedIn'"><Linkedin size={20} strokeWidth={1.5} /></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
76
Template-02/src/components/image-slider.tsx
Normal file
76
Template-02/src/components/image-slider.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
const images = [
|
||||||
|
"https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=800&auto=format&fit=crop",
|
||||||
|
"https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=800&auto=format&fit=crop",
|
||||||
|
"https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?q=80&w=800&auto=format&fit=crop",
|
||||||
|
"https://images.unsplash.com/photo-1581561512086-5ce42603db02?q=80&w=800&auto=format&fit=crop"
|
||||||
|
];
|
||||||
|
|
||||||
|
export function ImageSlider() {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const prevSlide = () => {
|
||||||
|
setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto slide
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
nextSlide();
|
||||||
|
}, 5000);
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, [currentIndex]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full aspect-[4/5] rounded-[40px] overflow-hidden group bg-stone-200">
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
<motion.img
|
||||||
|
key={currentIndex}
|
||||||
|
src={images[currentIndex]}
|
||||||
|
initial={{ opacity: 0, scale: 1.05 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease: "easeInOut" }}
|
||||||
|
className="absolute inset-0 w-full h-full object-cover"
|
||||||
|
alt={`Clínica foto ${currentIndex + 1}`}
|
||||||
|
/>
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<div className="absolute inset-x-0 bottom-0 p-6 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-t from-black/50 to-transparent">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{images.map((_, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
onClick={() => setCurrentIndex(idx)}
|
||||||
|
className={`h-1.5 rounded-full cursor-pointer transition-all duration-300 ${
|
||||||
|
idx === currentIndex ? 'w-6 bg-white' : 'w-2 bg-white/50'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={prevSlide}
|
||||||
|
className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white hover:text-stone-900 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={20} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={nextSlide}
|
||||||
|
className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white hover:text-stone-900 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
141
Template-02/src/components/navbar.tsx
Normal file
141
Template-02/src/components/navbar.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { NavLink, useLocation } from 'react-router-dom';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { Menu, X, Search, ChevronRight } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
import { SearchModal } from './search-modal';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
const [searchOpen, setSearchOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Close mobile menu on route change
|
||||||
|
useEffect(() => {
|
||||||
|
setMobileMenuOpen(false);
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{ label: 'A Clínica', path: '/diferenciais' },
|
||||||
|
{ label: 'Especialidades', path: '/resultados' },
|
||||||
|
{ label: 'Editorial', path: '/blog' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header
|
||||||
|
className={cn(
|
||||||
|
'fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b',
|
||||||
|
isScrolled ? 'bg-white/95 backdrop-blur-md border-stone-200 py-4' : 'bg-white border-transparent py-6'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto px-6 flex items-center justify-between">
|
||||||
|
|
||||||
|
<NavLink to="/" className="text-2xl font-serif font-bold tracking-tight text-stone-900">
|
||||||
|
ODONTO<span className="font-light text-primary-600">PREMIUM</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<nav className="hidden lg:flex items-center gap-10">
|
||||||
|
{links.map((link) => (
|
||||||
|
<NavLink
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
cn(
|
||||||
|
'text-xs uppercase tracking-widest font-semibold transition-colors',
|
||||||
|
isActive ? 'text-primary-700' : 'text-stone-500 hover:text-stone-900'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<aside className="hidden lg:flex items-center gap-6">
|
||||||
|
<button onClick={() => setSearchOpen(true)} className="text-stone-500 hover:text-stone-900 transition-colors">
|
||||||
|
<Search size={20} strokeWidth={1.5} />
|
||||||
|
</button>
|
||||||
|
<NavLink
|
||||||
|
to="/contato"
|
||||||
|
onClick={() => trackEvent('Schedule', { source: 'Desktop Header' })}
|
||||||
|
className="bg-stone-900 text-white px-6 py-3 text-xs uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors relative group overflow-hidden"
|
||||||
|
>
|
||||||
|
<span className="relative z-10">Agendar Avaliação</span>
|
||||||
|
<div className="absolute inset-0 bg-primary-900 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-0"></div>
|
||||||
|
</NavLink>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="lg:hidden p-2 text-stone-900"
|
||||||
|
onClick={() => setMobileMenuOpen(true)}
|
||||||
|
>
|
||||||
|
<Menu size={24} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: '100%' }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: '100%' }}
|
||||||
|
transition={{ type: 'tween', duration: 0.3 }}
|
||||||
|
className="fixed inset-0 z-[100] bg-white flex flex-col pt-6 px-6 pb-12"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center mb-12">
|
||||||
|
<span className="text-xl font-serif font-bold tracking-tight text-stone-900">ODONTOPREMIUM</span>
|
||||||
|
<button className="p-2 text-stone-900" onClick={() => setMobileMenuOpen(false)}>
|
||||||
|
<X size={24} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex flex-col gap-6 mt-8 flex-grow">
|
||||||
|
{links.map(link => (
|
||||||
|
<NavLink
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="text-3xl font-serif text-stone-900 flex justify-between items-center border-b border-stone-100 pb-4"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
<ChevronRight size={24} className="text-stone-300" />
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
onClick={() => { setMobileMenuOpen(false); setSearchOpen(true); }}
|
||||||
|
className="text-3xl font-serif text-stone-900 flex justify-between items-center border-b border-stone-100 pb-4"
|
||||||
|
>
|
||||||
|
Buscar
|
||||||
|
<Search size={24} className="text-stone-300" />
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<NavLink
|
||||||
|
to="/contato"
|
||||||
|
onClick={() => { setMobileMenuOpen(false); trackEvent('Schedule', { source: 'Mobile Menu' }); }}
|
||||||
|
className="bg-stone-900 text-white w-full py-5 text-center text-xs uppercase tracking-widest font-semibold mt-auto"
|
||||||
|
>
|
||||||
|
Agendar Avaliação
|
||||||
|
</NavLink>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
122
Template-02/src/components/search-modal.tsx
Normal file
122
Template-02/src/components/search-modal.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { Search, X, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
interface SearchModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SearchModal({ isOpen, onClose }: SearchModalProps) {
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
|
||||||
|
// Prevent background scrolling when modal is open
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Handle escape key
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') onClose();
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', handleEscape);
|
||||||
|
return () => window.removeEventListener('keydown', handleEscape);
|
||||||
|
}, [onClose]);
|
||||||
|
|
||||||
|
const mockResults = query.length > 2 ? [
|
||||||
|
{ title: 'Lentes de Contato Dental', type: 'Serviço', path: '/servicos' },
|
||||||
|
{ title: 'Dr. Fernando Silva (Implantodontista)', type: 'Profissional', path: '/profissionais' },
|
||||||
|
{ title: 'Como manter o clareamento?', type: 'Artigo', path: '/blog/1' },
|
||||||
|
{ title: 'Casos Reais: Reabilitação Oral', type: 'Resultados', path: '/resultados' }
|
||||||
|
] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="fixed inset-0 z-[100] flex items-start justify-center pt-20 sm:pt-32 px-4">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute inset-0 bg-stone-900/40 backdrop-blur-sm"
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="relative w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden border border-stone-100 flex flex-col"
|
||||||
|
>
|
||||||
|
<div className="flex items-center px-6 py-4 border-b border-stone-100">
|
||||||
|
<Search size={22} className="text-stone-400 min-w-[22px]" />
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
type="text"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
placeholder="Busque por serviços, profissionais, artigos..."
|
||||||
|
className="w-full bg-transparent border-none text-lg text-stone-700 px-4 py-2 focus:ring-0 outline-none placeholder:text-stone-300 font-light"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-2 text-stone-400 hover:text-stone-800 transition-colors bg-stone-50 hover:bg-stone-100 rounded-full"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-h-[200px] max-h-[60vh] overflow-y-auto bg-stone-50 p-4">
|
||||||
|
{query.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full gap-4 text-stone-400 py-12">
|
||||||
|
<Search size={32} strokeWidth={1} />
|
||||||
|
<p className="text-sm font-light">O que você está procurando hoje?</p>
|
||||||
|
</div>
|
||||||
|
) : mockResults.length > 0 ? (
|
||||||
|
<ul className="flex flex-col gap-2">
|
||||||
|
<div className="text-xs font-medium text-stone-400 uppercase tracking-widest mb-2 px-2">Resultados</div>
|
||||||
|
{mockResults.map((result, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<Link
|
||||||
|
to={result.path}
|
||||||
|
onClick={onClose}
|
||||||
|
className="group flex items-center justify-between p-4 bg-white rounded-2xl border border-stone-100 hover:border-primary-200 transition-colors shadow-sm"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<span className="font-medium text-stone-800">{result.title}</span>
|
||||||
|
<span className="text-xs text-stone-500 font-light">{result.type}</span>
|
||||||
|
</div>
|
||||||
|
<ArrowRight size={18} className="text-stone-300 group-hover:text-primary-800 group-hover:translate-x-1 transition-all" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-stone-500 py-12">
|
||||||
|
<p className="font-medium text-stone-700">Nenhum resultado encontrado</p>
|
||||||
|
<p className="text-sm font-light mt-1">Tente buscar por termos diferentes ou mais gerais.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white border-t border-stone-100 px-6 py-4 flex gap-4 overflow-x-auto whitespace-nowrap">
|
||||||
|
<span className="text-xs font-medium text-stone-400 uppercase tracking-widest flex items-center">Sugestões:</span>
|
||||||
|
<button onClick={() => setQuery('Implantes')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Implantes</button>
|
||||||
|
<button onClick={() => setQuery('Lentes')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Lentes</button>
|
||||||
|
<button onClick={() => setQuery('Clareamento')} className="text-xs bg-stone-100 text-stone-600 px-3 py-1.5 rounded-full hover:bg-stone-200 transition-colors">Clareamento</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
38
Template-02/src/components/seo.tsx
Normal file
38
Template-02/src/components/seo.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { Helmet } from 'react-helmet-async';
|
||||||
|
|
||||||
|
interface SEOProps {
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
canonical?: string;
|
||||||
|
type?: string;
|
||||||
|
imageUrl?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SEO({
|
||||||
|
title = "Odonto Premium | Excelência em Odontologia Digital",
|
||||||
|
description = "Clínica odontológica de luxo. Especialistas em Lentes de Contato Dental, Implantes de Carga Imediata e Reabilitação Oral Premium.",
|
||||||
|
canonical,
|
||||||
|
type = "website",
|
||||||
|
imageUrl = "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=1200&auto=format&fit=crop"
|
||||||
|
}: SEOProps) {
|
||||||
|
const siteTitle = title.includes("Odonto Premium") ? title : `${title} | Odonto Premium`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Helmet>
|
||||||
|
<title>{siteTitle}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
{canonical && <link rel="canonical" href={`https://odontopremium.com.br${canonical}`} />}
|
||||||
|
|
||||||
|
<meta property="og:title" content={siteTitle} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:type" content={type} />
|
||||||
|
<meta property="og:image" content={imageUrl} />
|
||||||
|
{canonical && <meta property="og:url" content={`https://odontopremium.com.br${canonical}`} />}
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={siteTitle} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
<meta name="twitter:image" content={imageUrl} />
|
||||||
|
</Helmet>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
Template-02/src/components/whatsapp-button.tsx
Normal file
24
Template-02/src/components/whatsapp-button.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
|
||||||
|
export function WhatsAppButton() {
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
<motion.a
|
||||||
|
initial={{ scale: 0, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 260, damping: 20, delay: 1 }}
|
||||||
|
href="https://wa.me/5511999999999?text=Olá!%20Gostaria%20de%20agendar%20uma%20avaliação%20na%20Odonto%20Premium."
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
onClick={() => trackEvent('Contact', { source: 'WhatsApp Floating Button' })}
|
||||||
|
className="fixed bottom-6 right-6 z-40 bg-[#25D366] text-white p-4 rounded-full shadow-[0_8px_30px_rgb(0,0,0,0.12)] hover:scale-110 hover:shadow-[0_8px_30px_rgb(37,211,102,0.3)] transition-all duration-300"
|
||||||
|
aria-label="Falar conosco no WhatsApp"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
379
Template-02/src/data/posts.ts
Normal file
379
Template-02/src/data/posts.ts
Normal file
|
|
@ -0,0 +1,379 @@
|
||||||
|
export interface BlogPost {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
category: string;
|
||||||
|
date: string;
|
||||||
|
minRead: string;
|
||||||
|
image: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const posts: BlogPost[] = [
|
||||||
|
{
|
||||||
|
id: "1", title: "Lentes de Contato Dental: O Guia Definitivo", category: "Estética", date: "24 Nov 2023", minRead: "5 min", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Revolução do Sorriso na Odontologia Moderna
|
||||||
|
|
||||||
|
As lentes de contato dental transformaram a odontologia estética, permitindo correções profundas de forma minimamente invasiva. Feitas de cerâmicas ultrafinas — muitas vezes com a espessura de uma lente de contato ocular —, elas são capazes de reescrever a arquitetura do seu sorriso com quase nenhum desgaste da estrutura dentária original.
|
||||||
|
|
||||||
|
> "O sorriso ideal une beleza deslumbrante à saúde absoluta e função perfeita. Não criamos apenas dentes brancos, criamos harmonia facial."
|
||||||
|
|
||||||
|
### Indicações e Benefícios Principais
|
||||||
|
|
||||||
|
As lentes são indicadas para pacientes que buscam reabilitação estética para:
|
||||||
|
* Dentes escurecidos ou manchados que não respondem ao clareamento convencional.
|
||||||
|
* Fechamento de diastemas (espaços indesejados entre os dentes).
|
||||||
|
* Correção de pequenas assimetrias, alterações de formato ou dentes desgastados pelo tempo.
|
||||||
|
|
||||||
|
O material cerâmico premium utilizado (como o dissilicato de lítio) possui características ópticas que simulam com perfeição o esmalte natural dos dentes, refletindo a luz de maneira orgânica e oferecendo extrema resistência a manchas.
|
||||||
|
|
||||||
|
### Como funciona o processo na Premium?
|
||||||
|
|
||||||
|
O fluxo de trabalho em nossa clínica é 100% digital, eliminando surpresas e proporcionando previsibilidade total:
|
||||||
|
|
||||||
|
1. **Escaneamento 3D e Diagnóstico:** Capturamos cada detalhe da sua arcada com precisão micrométrica usando scanners intraorais ultrarrápidos. Nenhuma massa de moldagem é utilizada.
|
||||||
|
2. **Design Digital do Sorriso (DSD):** Através de softwares avançados, desenhamos o formato, o alinhamento e a proporção áurea do novo sorriso, sempre respeitando a biometria do seu rosto.
|
||||||
|
3. **Mockup (Test-Drive do Sorriso):** Você prova uma maquete em resina bisacrílica diretamente na sua boca. Você vê o resultado final de forma tangível antes de qualquer intervenção definitiva no esmalte.
|
||||||
|
4. **Instalação e Adesão:** Após aprovação do paciente e fresagem robótica no laboratório, realizamos a fixação segura e definitiva das lâminas de cerâmica pura com cimentos resinosos de última geração.
|
||||||
|
|
||||||
|
### Manutenção e Durabilidade
|
||||||
|
|
||||||
|
A longevidade das lentes de porcelana é notável. Com higienização adequada, uso de fio dental diário e visitas semestrais à clínica para profilaxia profissional (Check-up Prime), suas lentes podem durar mais de 15 a 20 anos, mantendo o mesmo brilho e coloração do dia da instalação.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", title: "Implantes & Carga Imediata: Retome Seu Sorriso Hoje", category: "Reabilitação", date: "28 Nov 2023", minRead: "8 min", image: "https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Revolução da Carga Imediata
|
||||||
|
|
||||||
|
A perda de um ou mais dentes afeta profundamente a autoestima, a digestão e a mastigação. Historicamente, os tratamentos de implantes exigiam meses de espera entre a cirurgia e a instalação da coroa. Hoje, a tecnologia de **carga imediata** mudou esse paradigma, colocando o tempo a seu favor.
|
||||||
|
|
||||||
|
Esse protocolo avançado permite que o pino de titânio (implante) e a coroa provisória fixa sejam instalados no mesmo dia.
|
||||||
|
|
||||||
|
> "A carga imediata devolve a sociabilidade e a autoconfiança do paciente instantaneamente, eliminando o estigma do dente ausente e o desconforto de próteses móveis provisórias."
|
||||||
|
|
||||||
|
### Como é Possível Fazer no Mesmo Dia?
|
||||||
|
|
||||||
|
A carga imediata depende de três pilares fundamentais da odontologia de alta performance:
|
||||||
|
|
||||||
|
1. **Implantes de Alta Estabilidade Primária:** Utiliza-se pinos de titânio com design de roscas duplas e superfícies tratadas hidrofilicamente que "travam" no tecido ósseo com extrema firmeza no momento da cirurgia.
|
||||||
|
2. **Tomografia Computadorizada (Cone Beam):** Avaliamos a densidade óssea tridimensionalmente para atestar se o leito ósseo suporta o torque imediato exigido.
|
||||||
|
3. **Cirurgia Guiada por Computador:** Através de um guia impresso em 3D, o implante é posicionado exatamente onde foi planejado no software, dispensando grandes cortes na gengiva.
|
||||||
|
|
||||||
|
### Indicações para o Tratamento
|
||||||
|
|
||||||
|
A técnica é ideal para pacientes engajados socialmente e executivos que não podem paralisar suas agendas. É indicada para:
|
||||||
|
* Extrações de dentes fraturados na "zona estética" (dentes da frente).
|
||||||
|
* Reabilitação total rápida em desdentados totais (Protocolo All-on-4 ou All-on-6).
|
||||||
|
* Substituição de dentes condenados por periodontite severa (mediante análise do osso remanescente).
|
||||||
|
|
||||||
|
### Pós-Operatório e Cuidados
|
||||||
|
|
||||||
|
Como a cirurgia guiada muitas vezes ocorre sem incisões longas (cirurgia *flapless*), o inchaço e a dor são mínimos. No entanto, a coroa instalada no dia é provisória e feita para estética, não para estresse mecânico pesado. É crucial adotar uma dieta macia nos primeiros 45 a 60 dias para permitir aosseointegração vital do titânio. Após este período, a coroa definitiva de zircônia ou porcelana é confeccionada e instalada.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", title: "Ortodontia Invisível: Discreta e Altamente Previsível", category: "Ortodontia", date: "02 Dez 2023", minRead: "6 min", image: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Conforto Máximo e Estética Impecável
|
||||||
|
|
||||||
|
Os tratamentos ortodônticos não são mais sinônimos de dor, fios metálicos e um visual adolescente. A tecnologia dos **alinhadores invisíveis** trouxe a ortodontia para o século XXI, unindo engenharia de materiais, inteligência artificial e estética refinada.
|
||||||
|
|
||||||
|
Diga adeus aos braquetes metálicos, às resinas soltas e aos fios que machucam as mucosas. Os alinhadores transparentes utilizam placas de poliuretano termoplástico de ponta para guiar os dentes milimetricamente até a posição ideal.
|
||||||
|
|
||||||
|
> "A ortodontia invisível é o ápice do conforto. O alinhamento dos dentes acontece em segundo plano, sem interrupções bruscas no seu estilo de vida."
|
||||||
|
|
||||||
|
### Vantagens do Alinhador Invisível
|
||||||
|
|
||||||
|
1. **Previsibilidade com Software 3D:** Com plataformas como o ClinCheck (Invisalign), você vê o resultado final na tela — o sorriso perfeitamente alinhado — antes mesmo de iniciar o tratamento.
|
||||||
|
2. **Higiene Perfeita e Sem Restrições:** Para higienizar os dentes ou almoçar, basta remover a placa. Você pode comer pipoca, maçãs ou nozes sem o terror de quebrar peças coladas. O uso do fio dental ocorre naturalmente.
|
||||||
|
3. **Estética Social Intacta:** Totalmente translúcido, o alinhador passa despercebido em reuniões de trabalho, jantares e fotografias sociais.
|
||||||
|
4. **Consultas Rápidas e Espaçadas:** As trocas das placas muitas vezes podem ser gerenciadas em casa semanalmente, diminuindo as frequentes e dolorosas idas de manutenção mensal tradicional.
|
||||||
|
|
||||||
|
### O Tratamento é Mais Lento?
|
||||||
|
|
||||||
|
Mito. Na maioria das correções (apinhamentos leves a moderados, diastemas, sobremordidas), os alinhadores transparentes finalizam o caso de forma mais veloz ou em tempo idêntico aos aparelhos fixos. A inteligência do software distribui forças simultâneas em múltiplos dentes ao invés de atuar em "um por um", acelerando o movimento em bloco.
|
||||||
|
|
||||||
|
Investir na ortodontia digital é optar por um processo suave e eficiente em direção a um sorriso harmonicamente perfeito.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", title: "A Conexão Oculta: Saúde Bucal vs. Saúde do Coração", category: "Saúde", date: "10 Dez 2023", minRead: "7 min", image: "https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## O Seu Sorriso Pulsa com o Seu Coração
|
||||||
|
|
||||||
|
Comumente isolamos a odontologia do restante da medicina, mas o corpo humano é um sistema vascular contínuo e intimamente conectado. A boca é a principal porta de entrada do organismo e abriga naturalmente bilhões de bactérias. Sob as circunstâncias erradas, esses micro-organismos tornam-se agressivos e podem afetar gravemente o sistema cardiovascular.
|
||||||
|
|
||||||
|
Pesquisas globais de cardiologia reafirmam anualmente o elo indiscutível entre a **doença periodontal** (inflamação e infecção prolongada das gengivas) e moléstias do coração.
|
||||||
|
|
||||||
|
> "Investir na saúde da gengiva é uma atitude direta e ativa de prevenção cardiológica. A verdadeira longevidade começa na higienização detalhada da boca."
|
||||||
|
|
||||||
|
### O Caminho do Perigo: Bacteriemia
|
||||||
|
|
||||||
|
Pessoas com gengivas inflamadas, com tártaro profundo e sangramento ativo ("a gengiva afasta do dente"), possuem pequenos vasos rompidos na boca. A mastigação ou a simples escovação joga bactérias nocivas (como *Porphyromonas gingivalis*) diretamente na corrente sanguínea — um evento chamado bacteriemia.
|
||||||
|
|
||||||
|
* **Endocardite Bacteriana:** As bactérias viajantes podem aderir ao revestimento interno do coração ou em válvulas defeituosas, causando inflamações agudas gravíssimas que requerem profilaxias antibióticas fortíssimas.
|
||||||
|
* **Aterosclerose (Placas de Gordura):** Estudos apontam que bactérias orais aumentam a inflamação vascular no corpo todo. Esse processo inflamatório facilita o acúmulo de gorduras nas artérias coronárias, aumentando drasticamente os riscos de infartos e derrames (AVC).
|
||||||
|
|
||||||
|
### Prevenção Ativa na Clínica
|
||||||
|
|
||||||
|
O sangramento gengival nunca deve ser normalizado. Ele é o alarme de incêndio do corpo. Para manter o coração protegido, adotamos os seguintes protocolos:
|
||||||
|
|
||||||
|
1. **Check-Ups Semestrais Aprofundados:** Limpezas que não só lustram os dentes, mas que utilizam ultrassom para desbridar o tártaro escondido sob as gengivas (área subgengival).
|
||||||
|
2. **Raspagem e Alisamento Radicular:** Se a periodontite estiver instalada, promovemos terapias curativas especializadas para cessar a progressão e zerar o edema.
|
||||||
|
3. **Laserterapia de Baixa Potência:** Na nossa clínica, associamos laseres antimicrobianos à limpeza mecânica, garantindo descontaminação total.
|
||||||
|
|
||||||
|
A verdadeira saúde exige um corpo afinado. Cuidar do sorriso é selar as portas para a preservação do seu coração.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5", title: "Odontologia Sem Medo: O Poder da Sedação Consciente", category: "Conforto", date: "15 Dez 2023", minRead: "6 min", image: "https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## O Fim Definitivo do Estresse Odontológico
|
||||||
|
|
||||||
|
O medo e a ansiedade associados à cadeira do dentista afetam milhares de pacientes globalmente. Experiências infantis traumáticas, aversão pelo som dos motores elétricos ou mero horror a agulhas impedem pessoas de buscar tratamentos curativos vitais ou transformações estéticas que desejam ardentemente.
|
||||||
|
|
||||||
|
Na nossa clínica, abolimos o sofrimento da equação. Com a **sedação consciente com óxido nitroso** conjugada a um ambiente acolhedor, removemos completamente as barreiras emocionais.
|
||||||
|
|
||||||
|
> "A grande magia está no momento em que o paciente percebe que duas horas de cirurgia complexa passaram como se fossem apenas cinco minutos de relaxamento tranquilo."
|
||||||
|
|
||||||
|
### O Que É Sedação Consciente?
|
||||||
|
|
||||||
|
A sedação inalatória consiste em respirar uma mistura extremamente segura de oxigênio (O₂) e Óxido Nitroso (N₂O) através de uma pequena máscara nasal perfumada. A técnica tem ação ansiolítica fortíssima.
|
||||||
|
|
||||||
|
1. **Plena Consciência:** Você não "apaga" nem fica inconsciente como na anestesia geral de um hospital. Você continua perfeitamente apto para conversar e obedecer a comandos do cirurgião, mas num estado letárgico e altamente pacífico.
|
||||||
|
2. **Isolamento de Gatilhos:** O som do ambiente parece distanciar-se. O tempo perde o peso exato e o formigamento leve no corpo transporta a mente para um estado anestesiado do ponto de vista do "pânico".
|
||||||
|
3. **Segurança Premium:** O fluxo das vias aéreas do paciente permanece desimpedido. O oxigênio inalado reverte o efeito do óxido nitroso em menos de três minutos após o término do tratamento — permitindo que o paciente vá dirigindo para casa normalmente.
|
||||||
|
|
||||||
|
### Indicações de Uso
|
||||||
|
|
||||||
|
Aplicamos a sedação em qualquer cenário onde haja angústia. É imensamente indicada para:
|
||||||
|
* Cirurgias de implantes múltiplos (Protocolos de carga imediata).
|
||||||
|
* Extrações simultâneas de quatro Dentes do Siso retidos.
|
||||||
|
* Tratamentos profiláticos de longas horas em pacientes fóbicos severos.
|
||||||
|
* Crianças ou adultos com hiper-reflexos de ânsia e engasgo.
|
||||||
|
|
||||||
|
Se o medo é o que afasta você do sorriso dos sonhos, descubra a leveza da sedação. É hora de adormecer o medo e focar puramente nos excelentes resultados.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6", title: "Escaneamento Intraoral 3D: A Substituição das Moldagens", category: "Tecnologia", date: "20 Dez 2023", minRead: "5 min", image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Moldagem Confortável Sem Aquela "Massa"
|
||||||
|
|
||||||
|
Lembra-se daquele gosto plastificado e da sensação profunda de asfixia, quando a clínica dentária precisava colocar uma enorme moldeira cheia de alginato (ou silicone) pegajoso no céu da sua boca? Nós resolvemos esse incômodo.
|
||||||
|
|
||||||
|
O **Escaneamento Intraoral 3D** é o marco zero da odontologia digital, substituindo moldagens análogas em 100% dos nossos procedimentos. Através de câmeras de alta definição e sensores ultrarrápidos, recriamos seu sorriso no computador em poucos segundos.
|
||||||
|
|
||||||
|
> "O escaneamento não apenas traz um conforto absoluto e fim da ânsia e babadores sujos – ele garante uma precisão dezenas de vezes superior à moldagem convencional."
|
||||||
|
|
||||||
|
### Como a Captura é Feita?
|
||||||
|
|
||||||
|
O dentista desliza suavemente uma haste digital (parecida com uma caneta grossa) pelos seus dentes. Essa "caneta" emite feixes ópticos que tiram dezenas de milhares de fotos estéreo e processam a topografia do dente ao vivo na tela.
|
||||||
|
|
||||||
|
1. **Agilidade:** Em 90 segundos, as arcadas inteiras estão vetorizadas, coloridas e em altíssima resolução no nosso software.
|
||||||
|
2. **Qualidade Absoluta das Peças:** Modelos de gesso analógicos expandem e distorcem, os escaneamentos não. Os bits do computador formam bases exatas para as coroas e lentes de contato assentarem numa fixação impermeável.
|
||||||
|
3. **Ecossistema Automatizado:** Esse arquivo digital ('.STL' ou '.PLY') voa pela nuvem para a fresadora robótica. Máquinas de CAD/CAM irão, em questão de minutos, esculpir um bloco de cerâmica bruto na forma matemática exata dos seus futuros dentes, garantindo um tratamento imediato na mesma sessão (*Chairside*).
|
||||||
|
|
||||||
|
### Um Arquivo Vitalício
|
||||||
|
|
||||||
|
Outro benefício oculto? Você ganha um **backup** da sua boca. Se um incidente fraturar um dente, não teremos que adivinhar seu formato original, acessamos o seu escaneamento 3D no servidor corporativo e reproduzimos exatamente o dente original.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "7", title: "Harmonização Orofacial (HOF): A Moldura Perfeita para o Sorriso", category: "Estética", date: "05 Jan 2024", minRead: "7 min", image: "https://images.unsplash.com/photo-1527613426441-4da17471b66d?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Integração Harmoniosa da Estética Facial
|
||||||
|
|
||||||
|
Um tratamento com as mais finas cerâmicas dentárias não pode atingir seu pleno impacto se as proporções faciais do terço inferior do rosto estiverem desequilibradas. A odontologia moderna evoluiu para abraçar o rosto inteiro: as proporções labiais, do queixo e da face compõem os elementos vitais daquilo que chamamos de **Harmonização Orofacial (HOF)**.
|
||||||
|
|
||||||
|
Não adianta iluminar um palco espetacular e luxuoso se as cortinas que o moldam ou a arquitetura em torno não condizem. Harmonização é restaurar simetrias.
|
||||||
|
|
||||||
|
> "A face é o cenário; o sorriso, o evento principal. Trabalhá-los separadamente rompe a naturalidade da beleza."
|
||||||
|
|
||||||
|
### Arsenal Terapêutico Premium
|
||||||
|
|
||||||
|
Na odontologia facial contemporânea, nossos cirurgiões aplicam técnicas de anatomia injetável visando o **equilíbrio e rejuvenescimento estrutural**, fugindo completamente dos infames exageros ("rosto de travesseiro") e lábios hipertróficos. Nós amamos a estética sutil e natural.
|
||||||
|
|
||||||
|
* **Toxina Botulínica Terapêutica:** Além de suavizar vincos dinâmicos como sulcos frontais (testa) e periorbitais (pés-de-galinha), é vastamente aplicada por dentistas para aliviar as severas tensões celulares causadas pelos músculos mastigatórios (Master e Temporal) de hipertrofiados devido ao Bruxismo, aliviando disfunções da ATM. É um tratamento preventivo fundamental que protege dentes e enxaquecas.
|
||||||
|
* **Preenchedores de Ácido Hialurônico:** Substância que ocorre naturalmente na pele, serve para hidratar intensamente e suportar estruturas colapsadas com o envelhecimento (como um pilar do bigode chinês caído ou mento encurtado). O refinamento é estético e visa acoplar beleza aos lábios, equilibrando com os novos dentes estéticos adquiridos.
|
||||||
|
|
||||||
|
### A Delicadeza de Cuidar Integramente
|
||||||
|
|
||||||
|
Realizar HOF com cirurgiões dentistas é uma das ações mais seguras viáveis. O dentista possui exaustivo treinamento em anatomia de pescoço e face desde os anos iniciais de formação universitária. Temos o manejo magistral perante vasos, troncos nervosos e inserções musculares ósseas – nossa premissa é sempre a segurança clínica máxima.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "8", title: "Periodontia Premium: A Fundação Saudável do Seu Sorriso", category: "Saúde", date: "10 Jan 2024", minRead: "6 min", image: "https://images.unsplash.com/photo-1584515933487-779824d29309?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Cuidando do Solo Antes de Construir o Castelo
|
||||||
|
|
||||||
|
A odontologia estética avança rapidamente com as demandas sociais, mas a natureza anatômica não negocia atalhos: focar em coroas brancas ultra reais ignorando os tecidos moles subjacentes é construir castelos magníficos na areia escorregadia da praia.
|
||||||
|
|
||||||
|
A **Periodontia** atua diretamente em prevenir e tratar a gengiva incrustada com bactérias biológicas, ligamentos frágeis ao redor e tecidos ósseos inflamados pela resposta natural.
|
||||||
|
|
||||||
|
> "As molduras dos dentes importam tanto quanto eles próprios. Gengivas cor-de-rosa pálido, com aspecto opaco texturizado pontilhado denotam integridade, devolução juvenil e proteção de base."
|
||||||
|
|
||||||
|
### Fases do Descuido Oculto:
|
||||||
|
|
||||||
|
O biofilme dental enrijece, compondo a matriz de tártaro maciço e cortante em zonas que o fio ou sua escova matinal não tocam nem atingiriam sozinhos. Esse ataque evolui de duas vias clínicas:
|
||||||
|
|
||||||
|
1. **Gengivite:** Processo precoce marcado por inchaço dolorido, coloração vermelho vinho arroxeada nas pontas interdentais lisas e espelhadas pela hiper inflamação e um inaceitável traço corriqueiro pela grande maioria dos indivíduos do globo: o sangramento diário provocado ao usar fio limpo ou triturar maçãs na mordida pesada. Apesar do barulho é tratável com reversibilidade estrita caso o paciente aceite nossa profilaxia clínica urgente intensiva.
|
||||||
|
2. **Periodontite Profunda Exacerbada:** A Gengivite subestimada sem tratos. A cascata química da inflamatória age absorvendo internamente minerais das bordas osso maxilar – afinal ele recua fugindo das colônias sépticas – o que traduz as temidas "Raízes dos Dentes à Vista do Paciente", extrema sensibilidade incômoda gelada recorrente contínua e frouxidão total seguida muitas avulsões espontâneas dentais infelizmente sem qualquer reversão viável exceto os terríveis implantes unitários substitutórios.
|
||||||
|
|
||||||
|
Por isso preconizamos firmemente o retorno garantido em 5-6 meses da cartela agendados para a Terapia de Suporte Periodontal. Retiramos todo o sarro com lâminas sônicas afiadas curtas sem danos ao seu tecido adjacente promovendo irrigação contínua da saúde local.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "9", title: "Resina vs Lentes de Porcelana: A Escolha Definitiva", category: "Estética", date: "15 Jan 2024", minRead: "8 min", image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## O Grande Duelo de Materiais Premium
|
||||||
|
|
||||||
|
Na jornada em busca da perfeição visual dentária alinhada com proporções labiais sedutoras, os pacientes naturalmente esbarram na dúvida central da clínica moderna das cosméticas orais: "Devo esculpir em resina aplicada sobre o dente hoje mesmo ou espero os laboratórios confeccionarem capas da cerâmica cristalizada dura?"
|
||||||
|
|
||||||
|
A resposta absoluta jamais será genérica – tratamos individualmente tempo, texturas vitais mastigatórias ou a profundidade dos bolsos e ambições a longo de uma existência inteira.
|
||||||
|
|
||||||
|
> "A cerâmica pura fundida a mil graus refrata luz opalescente exata ao esmalte vivo de um adolescente. A resina, todavia, ganha na engenharia ágil restauradora do artesão ao molde da face instantâneo."
|
||||||
|
|
||||||
|
### Facetas Em Resinas Esculpidas: A Arte Viva
|
||||||
|
São maciços acrílicos preenchidos nanométricas aplicados diretamente gota-a-gota no esmalte original desengordurado.
|
||||||
|
|
||||||
|
**Vantagens Notáveis:**
|
||||||
|
* Podem ser fabricadas todas "Chairside", numa manhã ou tarde inteira extensa sem necessidade do envio a laboratórios robôs terceiros.
|
||||||
|
* Custo total agregado do serviço cai bastante proporcionando excelentes entradas monetárias viabilizadoras de acesso.
|
||||||
|
* Lascou na taça de vidro ou osso da carne dura bovina? Reconstruímos o bisel ali mesmo aos domingos sob iluminação se necessário de modo fácil interligativo matrizado.
|
||||||
|
|
||||||
|
**Desvantagens Estruturais Diárias:** O brilho apaga mais depressa. Café da manhã preto encorpado, especiarias orientais diárias e vinhos pigmentados aderem e turvam as superfícies ano após ano (manutenção rigorosa ou opacidade). Necessário polimento frequente obrigatório agendado sem desculpas a cada semestre contínuo prolongado!
|
||||||
|
|
||||||
|
### Lentes (Cerâmicas de Silicato de Lítio)
|
||||||
|
As capas cerâmicas milimétricas construídas e assadas sob moldes usinados digitais de precisão industrial insuperáveis.
|
||||||
|
|
||||||
|
**A Supremacia Vítrea:**
|
||||||
|
A superfície destas cerâmicas nobres são seladas. Não acumulam manchas – nunca! Vinho, colorau diário alimentar do interior sulista não degradam as cores escolhidas em uma prova estética digital. Elas mantêm brilho vivo por duas ou três décadas desde bem equilibradas articulações noturnas com suas mordidas perfeitamente distribuídas (a mastigação tritura tudo exceto os prismas cimentados).
|
||||||
|
A união micro-química do cimento atinge forcas mecânicas tão monstruosas frente ao tecido esmaltado úmido poroso subproduto de que a placa jamais delamina ou caia acidentalmente – algo quase improvável com técnica cimentosa padrão diamante. A desvantagem franca recai ao maior desembolso de ingresso do valor estético protético elevado pelas complexidades laborais longas.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "10", title: "Proteção Imediata: Os Danos Silenciosos do Bruxismo", category: "Prevenção", date: "18 Jan 2024", minRead: "6 min", image: "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Um Inimigo Crônico, Habitual e Noturno
|
||||||
|
|
||||||
|
Acorda todos os dias com uma opressão ao longo de suas abas bucais (têmporas doloridas latejantes perante a testa irradiante dolorosa matutina) em conjunção àquele incômodo rangimento travado na nuca e ombros travados de stress cervical contínuo desastroso e infeliz? Bem vindo ao mal do novo século, subproduto claro neuro central estimulado das sobrecargas do emprego contemporâneo digital acelerado: O aperto excêntrico e triturador lateral mastigatório involuntário crônico noturno – Bruxismo.
|
||||||
|
|
||||||
|
A potência exercida pela nossa carga mordedora involuntária enquanto sob sono R.E.M. passa e transcende até os absurdos da alavanca estática – chegando fáceis aos 150 a até trezentos quilos compressivos ininterruptos diários sem percepção autoral imediata diária na cama.
|
||||||
|
|
||||||
|
> "Agir preventivamente antes trincar fissuras destrutivas microscópicas ao centro dos grandes molares evita colapsos do sistema elástico dentário envelhecedor e salva de intervenções por Implantes a Longo Prazo."
|
||||||
|
|
||||||
|
### Táticas De Blindagem Dupla Eficazes e Corretoras
|
||||||
|
|
||||||
|
Proteger seu valioso acervo patrimonial cerâmico (se existirem nos estéticos) e também os sensíveis esmaltes porosos vitais contra fraturas irreversíveis e polpas nervosas radiculares rompidas exige abordagens assertivas e duplas simultâneas preventivas conjugadas imperantes nas madrugadas noturnas prolongadas doravante infinitamente contínuas enquanto durar stress mental psicológico atual dos fatores ambientes.
|
||||||
|
|
||||||
|
1. **A Placas Oclusais Rígidas Miorrelaxantes Acústicas:** Uma armadura essencial perene confeccionada com precisão no acrílico transparente desprogramador, ela não apenas barra que as arestas se dilacerem no ranger infernal – ela "Engana o comando neuromuscular mandando relaxar os nervos condilares estiradores!" Deslize desimpedido lateral escorregadio total curativo!
|
||||||
|
2. **A "Toxina Relaxadora Botulínica Terapêutica Tensa":** Dentistas usam agulhas absurdamente milimétricas para imobilizar e estagnar apenas a parte dos potenciais contráteis estressados localizados do hipertrofiado músculo master que inchou de inflamação. A força bruta recai assustadoramente pela inibição colinérgica impedindo de trincar as pontas do dente original pela manhã.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "11", title: "Reabilitação Oral Completa: A Engenharia Fisiológica Aplicada", category: "Reabilitação", date: "25 Jan 2024", minRead: "8 min", image: "https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Redesenhando as Estruturas em Colapso Dinâmico
|
||||||
|
|
||||||
|
Reabilitar oralmente os arcos vai muito além do simples e pontual clareamento branco puro em lentes finas artísticas localizadas frontalmente ao sorriso ou resinas locais para as selfies das famosas mídias digitais mundiais atuais. A clínica restauradora pesada compreende todo os tecidos duros triturantes fundamentais perdidas com a negligência ao avanço da idade degenerativa da saúde populacional daquela classe que ignorava prevenções há anos.
|
||||||
|
|
||||||
|
Quando múltiplas ausências pontuais e severas unitárias começam um efeito trágico "dominó estrutural", a mordida desmorona. Dentes começam "caminhar e inclinar ao buraco solto lateral remanescente". Com a dimensão vertical posterior frouxa caída, os grandes lábios e mentos da faceta frontais perdem brutalmente a moldura esquelética – O Rosto todo Envelhece velozmente (aspecto idoso severo profundo retraído em boca afundada tristonha perniciosa do tempo biológico impune veloz agressivamente irreversível sem titânios aplicados cirúrgicos integrados artificiais mecânicos vitais e necessários urgentes de intervenção total ao planejamento imediato multidisciplinar unificado da face viva pulsante dos pacientes acometidos perante esses infortúnios trágicos estruturantes do esqueleto estomatognato funcional.)
|
||||||
|
|
||||||
|
> "A reabilitações completas estruturantes restabelecem as colunas oclusais de sustentação da jovialidade."
|
||||||
|
|
||||||
|
### Passos Milimétricos no Sucesso
|
||||||
|
|
||||||
|
1. Erguemos modelos articulares robóticos.
|
||||||
|
2. Identificação da altura exata de perda condilar e maxilar de desgaste pela abrasão extensa erosiva das refeições alimentícias comendo sobre pedaços ou gomas expostas periodontais com muita força indevida.
|
||||||
|
3. Reposição simultânea provisória. Instalamos acrílicos aumentando a DVO (dimensão).
|
||||||
|
4. Inserção cimentícia e pinos centrais protéticos na fase três final. A reconstruções dos titânios guiados trazem volta ao sorrisos e sorridentes confortáveis aptos a roer ossos! Mastigar amendoins é voltar aos vinte anos plenos do corpo.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "12", title: "O Poder Absoluto do Clareamento a Laser de Alta Potência", category: "Estética", date: "28 Jan 2024", minRead: "5 min", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Removendo as Opacidades do Tempo - Dentes Plenamente Claros e Luminosos Sem Angústias da Dor Intensa Congelante Passada
|
||||||
|
|
||||||
|
As queixas cruciais dos anos dois mil com o boom estético dos realitys televisivos da TV mundial baseava-se: Era torturante fazer branqueamento em poltronas odontológicas longas de cadeiras empoeiradas e demoradas tortuosas e infinitas do mundo sem preparações prévias, por as aplicações dos ativos peróxidos quentes explodiam picos pontuais cortantes elétricos agudos pulpares terríveis dentro e no fundo vivo visceral do centro nervoso orgânico humano interno de suas câmara incisivas dentárias centrais causando pausas traumáticas dolorosas.
|
||||||
|
|
||||||
|
A evolução farmacológica laboratorial química contemporânea dos gigantes mundiais encerrou categoricamente as dores dos calafrios estéticos. Hoje, os peróxidos balanceados químicos neutralizantes atuam como maravilhas dessensibilizantes de ação rápida neutralizadora na polpa terminal do incisivo central.
|
||||||
|
|
||||||
|
### Técnicas Híbridas Estáveis Livres Para Sua Liberdade Estelar Luminosa Imbatível Duradoura
|
||||||
|
Não se priva mais de cafés expressos absolutos na manhã se o protocolo foi selado a frio com as ampolas do flúor protetor neutralizante dos íons finais de porosidades microscópicas da parede dental cristalina remanescentes abertas durante as 3 ou duas consultas da clínica ativa aceleradora a Led Ultravioleta combinadas e somadas pela ponteira potente curativa em conjunto de seringas mantenedoras caseiras em repouso diurno ou uso de placas matrizes termoplásticas sob dormir acompanhado da tranquilidade contínua nos 15 dias posteriores do estagio total da clareação estelar contínua durável ao brilho radiante refrator jovializado dos prismas claros ressuscitados nas sombras em sua boca central ao falar ou acenar nos convívios diários comuns sociais e abertos ao mundo afora expansivo de amizade contagiante!`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "13", title: "Manejo e Tratamento da Halitose Crônica", category: "Saúde", date: "05 Fev 2024", minRead: "5 min", image: "https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Desmitificando O Mau Hálito e Recuperando Vínculos
|
||||||
|
|
||||||
|
O constrangimento do odor forte expelido a cada palavra no trabalho corrói as confianças em silêncio. Um dos mitos maiores enraizados culturalmente nos interiores de gerações recai sempre pela alegação gástrica – "Vem dos estômagos adoecidos". De fato um equívoco fatal crasso! O Halitose (mau hálito fétido constante intenso sulfuroso diário) responde por impressionantes quase 95% ou 90% em totalidade esmagadora da sua formação advinda interna em espaços e acúmulos bucais anaeróbicos não explorados pelas higienizações corretas domiciliares rotineiras e simplistas.
|
||||||
|
|
||||||
|
O que ocasiona isso são as placas estagnadas sob os colos e, primariamente como rei das origens gasosas repugnantes dos enxofres voláteis, a grande malha aveludada do dorso ranhoso lá do fundo extenso base posterior escondida das línguas mucosas — A dita e densa grossa Saburra Branca Lingual Estagnada Podre de células e compostos mortificados putrefatos decompostos pela malha colonizadora orgânica.
|
||||||
|
|
||||||
|
### Terapêutica Objetiva Desagradável Devolvendo Ar Primaveril
|
||||||
|
|
||||||
|
* Identificação das fontes de secura – Uso de anti-hipertensivos pesados diminuem as cuspidas da saliva hídrica fluída necessária fundamental para lavar essas colônias. Aconselhamos os estimulantes sistêmicos salivação hidratosa fluida constante e contínua artificial sem ácidos ou com base protetivas estimuladoras glandulares (sialagogas sistêmicas modernas ou chicletes limpos protetores contínuos doces estimulantes funcionais).
|
||||||
|
* Abordamos raspadores metálicos contínuos de arco U ao invés de usar cordas abrasivas frouxas de escovas grossas – o raspador arrasta de modo raso eficaz preciso em uma só passada os compostos putrefatos mortíferos bacterianos acumulados estagnados longe dos colos internos base na faringe do assoalho interno bucal invisível!
|
||||||
|
* Curamos cáries ocultas ou cálculos sangrantes retentores fétidos na bolsa periodontal interproximal limpa pelo raspador de laser das consultas clínicas bimestrais continuadas. Adeus timidez e conversas cabisbaixas de desvios! Enfrente com sorrisos longos e palavras vibrantes e puras ao ar pleno oxigenado respirativo exalado puro contínuo de vida pulsante agradável ao social!`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "14", title: "Extração de Siso Maxilar: Cirurgia Piezosônica Suave", category: "Cirurgia", date: "10 Fev 2024", minRead: "6 min", image: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Era Sem Choques Nas Mãos Trêmulas
|
||||||
|
|
||||||
|
A dor do alvejamento e batidas pesadas com maracás cirúrgicos maciços de aço tentando expelir o indesejado e trancafiado dente teimoso molar tardio adolescente, recluso as profundezas deitando raízes gigantes tortas para todos deuses num osso compacto como pedra. O pesadelo do Siso inchado doloroso das extrações de décadas nos subúrbios antigos que inchavam o rosto deixando colorações da bochecha em colorações mortas do hematoma e a incapacidade prolongada traumática por uma semanas ou duas em caldos grossos fedorentos acabou radical e definitivamente nas grandes cadeiras premium cirúrgicas atuais de nosso consultório especializado 3D Tomográfico Digital de Máxima precisão e conforto milimétricos dos especialistas nobres dentários mundiais atual e constante da Odontologia Maxilo Cirúrgicas Racional Suavizadas.
|
||||||
|
|
||||||
|
> "Instrumentações Sônicas finas substituem alavancas tortuosas, vibrando suave nas rochas biológicas sadias intactas. Uma remoção de classe fina contínua suave serena!"
|
||||||
|
|
||||||
|
## Piezocirurgia (A Vanguarda Tecnológica Limpa do Corte)
|
||||||
|
Ao desviar cortes do motor que girava forte rasgando capilares vizinhos sangrantes inflamatórios destrutivos colaterais de antes desnecessários dolorosíssimos severos difíceis de controlar clinicamente, utilizamos máquinas que pulsam micro vibrações sônicas limpas inofensivas às as carnes gengivais rosadas ao contorno ósseo lateral denso envolto. Somente a base e estrutura cristalina da apatita do osso que emparedava a liberação solta dele são tocadas por esse feixe sonoro da ponta diamantada afiada friamente controladíssimo minucioso ultrassônico suíço exato preciso perfeito e leve suave agradabilíssimo! Evitamos coágulos instáveis em inchaços imensamente deformadores crônicos de ontem e recuperações mágicas pós sessões relaxadas da sedação nitroso amigável confortável do fim da manhã sem pressas em plena sintonia vital orgânica viva orgânica!`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "15", title: "Sensibilidade Profunda Gelada Tem Cura Absoluta?", category: "Saúde", date: "12 Fev 2024", minRead: "5 min", image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Quando O Sorvete Gelado Torna-se Arma de Tortura Viva
|
||||||
|
|
||||||
|
Tomar o líquido de suco laranja ácido trincado gelo em plenas praias de domingos calorosos em frentes aos filhos felizes nas alegrias – e recuar agoniado choroso dolorido em saltos finos cortantes agudíssimos longos elétricos do pânico profundo visceral pulpar cerebral contínuo incômodo intenso persistente triste angustiante que interrompe a diversão vital simples instintiva de ser humano social? É lamentável a condição rotineira conhecida popular da Hiperestesia Sensitiva Extrema por Exposição Radicular Cervical Fina (Hipersensibilidade) no longo de bilhões em sofrentes em todas terras mundiais com sorrisos normais intactos de escovas erradas e abrasões inoportunas mecânicas ácidas.
|
||||||
|
|
||||||
|
### Reparos Terapêuticos Selantes Reversivos Sem Próteses Brutas Evasivas
|
||||||
|
|
||||||
|
Seus canalículos de minúsculos túbulos foram descapados pelo bruxismo fletido noturno ou creme agressivo clareador ou as abfrações desgastadas e esvaziou a rolha de colágeno biológico orgânico natural na base de colo cervical na gengiva!
|
||||||
|
* **Feixe Vermelho Anti-Inflamatório de Laser Frio Terapêutico Irradiante:** Age de baixo ao centro, a energia das luzes fotoativa as células dos nervos para acalmar a tempestades íonicas excitatórias nociceptivas paralisando as aflições sensitivas finas e latejadoras que torturavam no sono fundo escuro triste.
|
||||||
|
* **Escudos Nano Fluidos Vitrificados In-Loco:** Vernizes altamente mineralizadores sintéticos (com altas taxas puras cristalizantes em CPP-ACP flúor puro concentrado 5%) isolantes obliteram firmemente a tampa dos microscópios canais dos nervos, tampando a tampa do choque poroso frio dores exposto perante o gelado externo ou vento da tarde das nevascas extremas durantes as passeios internacionais de viagens tranquilas longínquas.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "16", title: "Odontopediatria Essencial: Cuidado Precoce Pediátrico Divertido", category: "Prevenção", date: "16 Fev 2024", minRead: "5 min", image: "https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Cuidando do Início Magico da Oclusão Lúdica Inicial Saudável de Raízes Firmes Naturais
|
||||||
|
|
||||||
|
Crianças necessitam não apenas de jalecos pálidos médicos longos em tons azuis ou verdes hospitalares com odores eugenólicos agoniados na percepção infantil assustadora inibitória – eles demandam ludicidade no cuidado!
|
||||||
|
Entendemos a primeira etapa e anos fundamentais iniciais das respirações abertas pelo respirador oral nas faces estreitas caídas minguadas com assimetrias mastigatórias desfavoráveis ou posturas caídas crônicas que levam cirurgias brutais pesadas na fase adulta do avanço maxilomandibular cirúrgicos hospitalares cruentos pesadíssimos.
|
||||||
|
|
||||||
|
> "A grande mágica odontopediátrica na verdade não seria extrair de modo pacífico dentinhos móveis – Mas não perder um milímetro precioso dos espaços fundamentais ortodônticos que formarão todo o equilíbrio triturante orgânico de dentes colossais do homem formado vinte vindouro futuro próximo."
|
||||||
|
|
||||||
|
Na fase caduca infantil, nós implementamos guias resinosos ortopédicas de bases dinâmicas funcionais elásticas mastigatórias sem ganchos ou peças feias machucantes frouxas e mal desenhadas metálicas ortodônticas medonhas durou antigamente do terror – usando o lúdico amigável atrativo colorido do sistema contínuo Myobrace nos lábios leves livres desengenhados, ou de sistemas invisalign finos precoces moldantes expandidores transparentes contínuos em polímeros. Tratamentos alegres evitam pânicos de décadas à frente em longos tratamentos sofridos duradouros. Prevenir aos sorrisos brincantes infantes hoje alegra todo núcleo coeso saudável do futuro promissor confiante de liderança nas faculdades do jovem sadio do dia amanhã vibrante da sociedade.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "17", title: "A Estética Orgânica Pós-Ortodontia de Contenção Base Fina Contínua Segura Retentiva", category: "Saúde", date: "20 Fev 2024", minRead: "4 min", image: "https://images.unsplash.com/photo-1527613426441-4da17471b66d?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Porque Seu Dente Volta e "Entorta" Ao Terminar Seu Belo Invisalign Transparente Lindo Reto Arrumado Desalinhado de Novo? A Memória Triste Elástica Dos Anos Velozes
|
||||||
|
|
||||||
|
Comemorações extensas no final de uma remoção metálica fixa ou o fim em caixa guardativa final de seus amados caros alinhadores estéticos finos da Invisalign são dignos de muita foto instagramável! Tudo espetacular liso radiante limpo curvo contíguo plano branco correto estético maravilhas divinas e sensações dos paraíso em belezas contínuas! No entanto o engano aterrorizador, traidor oculto da memória do ligamento dental colágeno – o efeito indesejado "Recidiva Maliciosa Retrativa de Colapso Anteroinferior" entra lento gradual arrastando pontas num empurrão amontoado do terror aos três aninhos! E destrói trabalhos exímios longínquos amargos.
|
||||||
|
|
||||||
|
As contenções linguais passivas trançadas invisíveis (os fiozinhos ocultos na língua traseira escondida secreta) constituem essenciais salvaguardas fixas contra inclinações trágicas por trás do palco oculto labial escuro secreto onde sorrisos branquinhos contínuos nunca se expõe frontalmente. É uma muralha estabilizante mecânica irrefutável e indiscutível de manutenção passiva imbatível da sua obra final conquistadas a suores finos na face das clinicas odontológicas puras do saber mestre ortodoxo biológico ortodôntico estabilizante! Higiene fina em "passa-fios de esponja", mais limpeza guiada nas seis meses mantém isso limpo inodoro saudável branco limpo imutável cristalinho perfeito reto sem voltar ao apinhamento feio entortado vergonhoso dos sorrisos perdidos! Nunca despreze a placa noturna móvel protetiva rígida oclusal contenção vital essencial.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "18", title: "Tecnologias Avançadas do DSD Premium Mapeamento do Design Virtual Emocional do Terço Superior", category: "Tecnologia", date: "23 Fev 2024", minRead: "6 min", image: "https://images.unsplash.com/photo-1584515933487-779824d29309?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Cativando Seu Perfil Simétrico Matemático Nas Proporções Faciais Orgânicas Vivas Lúdicas e Exuberantes Vitais Vibrantes
|
||||||
|
|
||||||
|
Moldes estáticos gessados brancos secos duros são coisas dos anos de 90s do laboratório velho arcaico sujo e manual. Compreender como os lábios da sua maçã facial das curvaturas, como o sorriso dinâmico labial se levanta no canto das pálpebras, como o zigomático traciona o feixe tendíneo superior dos dentes para exibir as gengivas altas não podem mais ficar num achismo de olhar por cima. O software atual de "Digital Smile Design Computação Visceral Fotográfica em Movimento de Video Frames" eleva absolutamente os projetos para simetrizações plenas contínuas finas e requintadas da mais alta maestria das ciências reabilitadoras.
|
||||||
|
|
||||||
|
> "Nosso algoritmo não procura calcular quadradinhos estéticos falsos plastificados opacos – ela espelha emoção biológica contida dos cantógrafos orbitais faciais do paciente nos formatos e luzes curvas da sua coroa, trazendo de volta um sorriso individual unicamente seu intocável orgânico livre maravilhoso inesquecível ao vivo do plano real respiratório orgânico de viver nas felicidades vitais extremas vibrantes do cotidiano!"
|
||||||
|
|
||||||
|
Testamos a "Maquete Virtual Resina" na sua fala normal. Isso evita lisp e bicos do "patinho chicleteiro de estética falsa espalhafatosa plastificada brega noticiária trágica".`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "19", title: "A Importância Suprema da Tomografia Cone Beam de Baixa Radiação em Diagnóstico Cirúrgico Fidedigno Digital Absoluto Fiel Robusto", category: "Tecnologia", date: "28 Fev 2024", minRead: "4 min", image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Realidade Volumétrica Multidimensional 3D Fatiada Fina
|
||||||
|
|
||||||
|
Raios-x comuns tradicionais oclusais ou panorâmicos grandes amplos e chatos são de formatos planos rasos vazios chapados de papel chumbado sobreposto escuro enganador, mascarando estruturas vitais laterais profundas essenciais do arco alveolar, das ramificações nervosas inferiores tortas ou da finura estreitíssima fina pálpebra do osso cortical labial anterior em desordens densas mascaradas em borrão opaco chato de 2 dimensões.
|
||||||
|
|
||||||
|
A Tomografia Computadorizada Volumétrica Focada FOV da Face (Cone Beam de giro único digital com milissegundos pulsares radiativos finos controlados ínfimos biológicos saudáveis irrisórios no contrapeso da exposição hospitalar pesada gigantesca corporal pesada) ao fatiar o crânio lateral milímetro a milímetro (fatias ínfimas e voxels digitais precisos HD isométricos absolutos reais puros sem sobreposição enganosa sombria de enganos de visualização médica da saúde).
|
||||||
|
|
||||||
|
Isto elimina categoricamente com a máxima veemência e certeza indubitável as tragédias inumanas gravosas doloridas de proximidade perigosa, parestesias, nervosa dor fatal infeliz para os posicionamento dos macro implantes curtos espessos profundos fixos do osso vivo orgânico de alta densidade firme! Tudo vira uma certeza em computadores na visualização profunda na segurança absoluta dos cirurgiões dos guias transparentes.`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "20", title: "O Controle Estrutural Bioestimulador De Retração Colagênica Firme", category: "Harmonização", date: "02 Mar 2024", minRead: "5 min", image: "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## A Estrutura Fina Dermo-Cutânea Suave Sem Os Inchaços Plásticos Artificiais Dos Excessos Do Passado Escuro Das Câmeras Fotográficas Frontais
|
||||||
|
|
||||||
|
Terminou aquele glorioso fino alinhamento demorado com seu Invisalign invisível elástico e reconstruiu no estúdio robótico as facetas incisais laterais perdidas na mastigação enigmática juvenil brusca do trauma antigo amargoso dos tristes passado escuro do basquete colégio da trauma esportivo abrupto sem socorrer? Fantástico as cerâmicas finíssimas perfeitas intocadas vitrificadas contínuas do refrigério! Mas as bochechas nasais labiais pendes colapsadas que acompanharam simultâneos despencados pelo esqueleto envelhecido osso atrófico dos trinta quarenta anos contínuas? O estigma do vinco do choro canino marcou.
|
||||||
|
|
||||||
|
> "A arte sútil imperceptível genial fina orgânica pura recai agora por estimular de modo imperativo reativo de modo não falso do seu banco natural colágeno orgânico humano autólogo regenerador interno biológico imunitário produtivo de modo forte, vivo biológico produtivo denso da trama celular jovem reticular estrutural fibroso imenso em volumes sutis de longas manutenções finas firmes sem inchaços deformadores plásticos bregas artificiais da estética feia superficial falsa vulgar volumosa pesada artificial pavorosa do pavor estético superficial das revistas populares sem elegância natural pura limpa!"
|
||||||
|
|
||||||
|
Os Ácidos (L-Poliláticos injetáveis ou as esferas biológicas absorvíveis nano suspensas densas das puras moléculas cálcicas minerais em Hidroxiapatita natural biológica da face âncora celular regeneradora tecidual fina derme profunda profunda do rejuvenescimento) repõem a face de volta a arquitetura oval juvenil com longas respostas no relógio longo lento orgânico contínuo dos meses florais da juventude firme brilhante lisa tensa iluminada em alegria exalante brilhosa da epiderme!`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "21", title: "A Lapidação Final do Check-Up Anual Profilático Master Prime Longevo Inoxidável Perene", category: "Prevenção", date: "05 Mar 2024", minRead: "6 min", image: "https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=800&auto=format&fit=crop",
|
||||||
|
content: `## Implantes Caríssimos, Lentes Inoxidáveis Eternas Intocadas Brilhantes Finas Requerem Manutenções Atentas Biológicas Mecânicas Profundas de Laserterapias de Retorno
|
||||||
|
|
||||||
|
Você, em devota convicção estanque estática falsa em tranquilidade perigosa do lar da cama deitante confortável serena confiante que a reabilitação biônica inteira dentária nas pontes brilhantes resinosas ou facetas cerâmicas intocáveis puras brancas maravilhosas, acreditou veementemente ilusoriamente em mentiras enganosas perante os lares sociais limpos higienizados dos anúncios utópicos do futuro inorgânico fixo limpo inquebrantável eterno vitalício perene do nada sem manobras purificantes ativas preventivas rotineiras exaustivas nas superfícies sujas biológicas do tártaro colonizados ao comer dos domingos fritos e das jantares temperadas doces massas de bolos densas recheadas pastosos fétidas aglutinares e dos grânulos bacterianos escuros no cantinho negro interproximal que fio não roçou rasgou com atrito tenso grosso espesso firme de teflon das resinas da manutenção da farmácia simples com escovas velhas macias inúteis ineficazes moles rasas finas rasantes amolecidas no meses gastos?
|
||||||
|
|
||||||
|
As suas pontes titânicas vitrificadas coladas ou parafusadas não doem sem cáries em cáries na cerâmica das porcelanas. Não! Mas as mucosas da sua coroa empiemam. O seu tecido nobre alveolar vivo osso duro reabsorve perante gengivas inflamadas soltas, rejeitando as conexões cilíndricas do metal cinza forte resistente bruto. Se não cuidar preventivamente a perda será biológica humana peri-implantite crônica irreversível perda óssea destrutiva frouxa e triste solta mobilidade final do infortúnio pesado de voltar estaca zero zero e a extrações com sangramentos frouxos sem bases para rosquear parafusar para implantes limpos higiênicos refeitos com dolorosos re-enxertos artificiais de ossos importados caríssimos purificados demorados infelizes pesados amargosos.
|
||||||
|
|
||||||
|
O protocolo suíço de manutenção biológico periodontal das jatos espirrais sônicos limpos suaves de glicina adoçada não letal aos sorrisos caros mantem polimentos polidos sem ranhuras agressivas, removendo pó espesso sujo de malha bacteriana em sessões deslumbrantemente massagistas hídricas mornas refrescantes suaves higiênicas luxuosas limpas perfeitas do SPA bucal clínico na profilaxia preventiva perene eterna e firme blindada a anos de rezas abençoadas ao futuro radiantes dos sorrisos perfeitos imutáveis em jantares fartantes plenos luxemburgueses de texturas crocantes e nozes duras rígidas das mastigações potentes da saúde total plenas robustas da odontologia contemporânea digital!`
|
||||||
|
}
|
||||||
|
];
|
||||||
62
Template-02/src/index.css
Normal file
62
Template-02/src/index.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "@tailwindcss/typography";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||||
|
--font-serif: "Outfit", ui-serif, Georgia, serif;
|
||||||
|
|
||||||
|
/* Clinical Ocean Blue / Cyan */
|
||||||
|
--color-primary-50: #f0fdfd;
|
||||||
|
--color-primary-100: #cffafe;
|
||||||
|
--color-primary-200: #a5f3fc;
|
||||||
|
--color-primary-300: #67e8f9;
|
||||||
|
--color-primary-400: #22d3ee;
|
||||||
|
--color-primary-500: #06b6d4;
|
||||||
|
--color-primary-600: #0891b2;
|
||||||
|
--color-primary-700: #0e7490;
|
||||||
|
--color-primary-800: #155e75;
|
||||||
|
--color-primary-900: #164e63;
|
||||||
|
--color-primary-950: #083344;
|
||||||
|
|
||||||
|
/* Clean minimal grays replacing warm sand */
|
||||||
|
--color-sand-50: #ffffff;
|
||||||
|
--color-sand-100: #f8fafc;
|
||||||
|
--color-sand-200: #f1f5f9;
|
||||||
|
--color-sand-300: #e2e8f0;
|
||||||
|
--color-sand-400: #cbd5e1;
|
||||||
|
--color-sand-500: #94a3b8;
|
||||||
|
|
||||||
|
--color-stone-900: #0f172a;
|
||||||
|
--color-stone-800: #1e293b;
|
||||||
|
--color-stone-50: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
body {
|
||||||
|
@apply font-sans bg-stone-50 text-stone-900 antialiased selection:bg-primary-200 selection:text-primary-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@apply font-serif tracking-tight text-stone-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
@apply bg-white/70 backdrop-blur-md border border-white/20 shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.blog-content p {
|
||||||
|
@apply text-lg text-stone-600 font-light leading-relaxed mb-6;
|
||||||
|
}
|
||||||
|
.blog-content h2 {
|
||||||
|
@apply text-3xl font-serif text-stone-900 mt-12 mb-6;
|
||||||
|
}
|
||||||
|
.blog-content h3 {
|
||||||
|
@apply text-2xl font-serif text-stone-900 mt-8 mb-4;
|
||||||
|
}
|
||||||
|
.blog-content blockquote {
|
||||||
|
@apply border-l-4 border-primary-500 bg-sand-200/50 px-8 py-6 rounded-r-2xl italic font-serif text-xl text-stone-800 my-10 shadow-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
49
Template-02/src/lib/analytics.ts
Normal file
49
Template-02/src/lib/analytics.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* Utilitário de rastreamento de eventos
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { trackConversion } from './tracking';
|
||||||
|
|
||||||
|
export const trackEvent = (eventName: string, params?: Record<string, any>) => {
|
||||||
|
// Respeitar as decisões da LGPD e a escolha de cookies do usuário
|
||||||
|
const consent = localStorage.getItem('cookie-consent');
|
||||||
|
if (consent !== 'accepted') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Meta Pixel (fbq) tracking ---
|
||||||
|
if (typeof window !== 'undefined' && window.fbq) {
|
||||||
|
// Determine if it's a standard event or custom
|
||||||
|
const standardEvents = ['AddPaymentInfo', 'AddToCart', 'AddToWishlist', 'CompleteRegistration', 'Contact', 'CustomizeProduct', 'Donate', 'FindLocation', 'InitiateCheckout', 'Lead', 'Purchase', 'Schedule', 'Search', 'StartTrial', 'SubmitApplication', 'Subscribe', 'ViewContent'];
|
||||||
|
if (standardEvents.includes(eventName)) {
|
||||||
|
window.fbq('track', eventName, params);
|
||||||
|
} else {
|
||||||
|
window.fbq('trackCustom', eventName, params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Google Ads/Analytics (gtag) tracking ---
|
||||||
|
const gaEventName = mapEventNameToGoogle(eventName);
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined' && window.gtag) {
|
||||||
|
if (eventName === 'Schedule') {
|
||||||
|
// Also track conversion directly to GA
|
||||||
|
trackConversion('Agendar Consulta');
|
||||||
|
}
|
||||||
|
window.gtag('event', gaEventName, params);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Conversão básica de eventos customizados para nomes padrão do Google (opcional)
|
||||||
|
const mapEventNameToGoogle = (eventName: string): string => {
|
||||||
|
switch (eventName) {
|
||||||
|
case 'Lead':
|
||||||
|
return 'generate_lead';
|
||||||
|
case 'Schedule':
|
||||||
|
return 'book_appointment';
|
||||||
|
case 'Contact':
|
||||||
|
return 'contact';
|
||||||
|
default:
|
||||||
|
return eventName;
|
||||||
|
}
|
||||||
|
};
|
||||||
80
Template-02/src/lib/tracking.ts
Normal file
80
Template-02/src/lib/tracking.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
export const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
|
||||||
|
export const META_PIXEL_ID = import.meta.env.VITE_META_PIXEL_ID;
|
||||||
|
|
||||||
|
// Declare global window properties for TS
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
dataLayer: any[];
|
||||||
|
gtag: (...args: any[]) => void;
|
||||||
|
fbq: (...args: any[]) => void;
|
||||||
|
_fbq: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const initTracking = () => {
|
||||||
|
const isConsented = localStorage.getItem('cookie-consent') === 'accepted';
|
||||||
|
if (!isConsented) return;
|
||||||
|
|
||||||
|
// Initialize GA
|
||||||
|
if (GA_TRACKING_ID && typeof window !== 'undefined') {
|
||||||
|
const defaultDataLayer = window.dataLayer || [];
|
||||||
|
window.dataLayer = defaultDataLayer;
|
||||||
|
if (!document.getElementById('ga-script')) {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.id = 'ga-script';
|
||||||
|
script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`;
|
||||||
|
script.async = true;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
|
||||||
|
window.gtag = function gtag() {
|
||||||
|
window.dataLayer.push(arguments);
|
||||||
|
};
|
||||||
|
window.gtag('js', new Date());
|
||||||
|
window.gtag('config', GA_TRACKING_ID);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize Meta Pixel
|
||||||
|
if (META_PIXEL_ID && typeof window !== 'undefined') {
|
||||||
|
!function(f:any,b:any,e:any,v:any,n:any,t:any,s:any)
|
||||||
|
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
||||||
|
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
||||||
|
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
||||||
|
n.queue=[];t=b.createElement(e);t.async=!0;
|
||||||
|
t.src=v;s=b.getElementsByTagName(e)[0];
|
||||||
|
if(s.parentNode) s.parentNode.insertBefore(t,s)}(window, document,'script',
|
||||||
|
'https://connect.facebook.net/en_US/fbevents.js');
|
||||||
|
window.fbq('init', META_PIXEL_ID);
|
||||||
|
window.fbq('track', 'PageView');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const trackPageView = (url: string) => {
|
||||||
|
const isConsented = localStorage.getItem('cookie-consent') === 'accepted';
|
||||||
|
if (!isConsented) return;
|
||||||
|
|
||||||
|
if (GA_TRACKING_ID && window.gtag) {
|
||||||
|
window.gtag('config', GA_TRACKING_ID, {
|
||||||
|
page_path: url,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (META_PIXEL_ID && window.fbq) {
|
||||||
|
window.fbq('track', 'PageView');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const trackConversion = (event_name: string) => {
|
||||||
|
const isConsented = localStorage.getItem('cookie-consent') === 'accepted';
|
||||||
|
if (!isConsented) return;
|
||||||
|
|
||||||
|
if (GA_TRACKING_ID && window.gtag) {
|
||||||
|
window.gtag('event', 'conversion', {
|
||||||
|
send_to: `${GA_TRACKING_ID}/${event_name}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (META_PIXEL_ID && window.fbq) {
|
||||||
|
window.fbq('trackCustom', event_name);
|
||||||
|
}
|
||||||
|
};
|
||||||
6
Template-02/src/lib/utils.ts
Normal file
6
Template-02/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
10
Template-02/src/main.tsx
Normal file
10
Template-02/src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {StrictMode} from 'react';
|
||||||
|
import {createRoot} from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
58
Template-02/src/pages/about.tsx
Normal file
58
Template-02/src/pages/about.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
import { ImageSlider } from '../components/image-slider';
|
||||||
|
|
||||||
|
export function About() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 flex flex-col gap-32">
|
||||||
|
<SEO
|
||||||
|
title="A Clínica | Odonto Premium"
|
||||||
|
description="Conheça a história e o ecossistema da Odonto Premium. A união perfeita entre a mais avançada tecnologia odontológica e um atendimento humano acolhedor."
|
||||||
|
canonical="/diferenciais"
|
||||||
|
/>
|
||||||
|
<section className="px-6 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="flex flex-col gap-8 pr-0 md:pr-12">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossa História</span>
|
||||||
|
<h1 className="text-5xl lg:text-7xl font-serif text-stone-900 leading-[1.1]">
|
||||||
|
A arte de cuidar da <span className="italic text-primary-800">essência.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light leading-relaxed">
|
||||||
|
Fundada com o propósito de redefinir o mercado de saúde e estética, a Health Premium não é apenas uma clínica, é um ecossistema de bem-estar.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-stone-500 font-light leading-relaxed">
|
||||||
|
Nossa jornada começou pela paixão em unir a tecnologia médica mais avançada do mundo ao calor do atendimento humano, criando uma experiência verdadeiramente memorável e transformadora para cada paciente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 w-full">
|
||||||
|
<ImageSlider />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="bg-primary-950 py-32 px-6 rounded-[80px] mx-2 md:mx-6 text-center text-white flex flex-col items-center gap-12">
|
||||||
|
<h2 className="text-4xl md:text-6xl font-serif max-w-4xl leading-tight font-light">
|
||||||
|
"Tratar o paciente de ponta a ponta, olhando para a sua saúde, autoestima e felicidade como pilares inseparáveis."
|
||||||
|
</h2>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<p className="font-medium text-xl">Dr. Arthur Vilela</p>
|
||||||
|
<p className="text-primary-400 font-light tracking-wide text-sm uppercase">Fundador & Diretor Clínico</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="px-6 max-w-7xl mx-auto w-full">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{[
|
||||||
|
{ year: '2015', title: 'A Fundação', desc: 'Inauguração do primeiro espaço no Itaim Bibi, focado em Odontologia.' },
|
||||||
|
{ year: '2018', title: 'Expansão Estética', desc: 'Introdução do departamento de dermatologia e tecnologias a laser.' },
|
||||||
|
{ year: '2023', title: 'Ecossistema Health', desc: 'Abertura da nova sede integrada: wellness, medicina e estética em 1000m².' }
|
||||||
|
].map((item, i) => (
|
||||||
|
<div key={i} className="flex flex-col gap-4 border-t border-stone-200 pt-8 mt-8 md:mt-0">
|
||||||
|
<span className="text-4xl font-serif text-primary-300 italic">{item.year}</span>
|
||||||
|
<h4 className="text-xl font-medium text-stone-900">{item.title}</h4>
|
||||||
|
<p className="text-stone-500 font-light">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
Template-02/src/pages/blog-post.tsx
Normal file
67
Template-02/src/pages/blog-post.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { Link, useParams, Navigate } from 'react-router-dom';
|
||||||
|
import { ArrowLeft } from 'lucide-react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import Markdown from 'react-markdown';
|
||||||
|
import { posts } from '../data/posts';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function BlogPost() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const post = posts.find((p) => p.id === id);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return <Navigate to="/blog" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a plain text description from content for SEO
|
||||||
|
const excerpt = post.content.replace(/[#*`_]/g, '').slice(0, 150) + '...';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-stone-50 pt-24">
|
||||||
|
<SEO
|
||||||
|
title={post.title}
|
||||||
|
description={excerpt}
|
||||||
|
canonical={`/blog/${post.id}`}
|
||||||
|
imageUrl={post.image}
|
||||||
|
type="article"
|
||||||
|
/>
|
||||||
|
<motion.article
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="max-w-4xl mx-auto px-6 py-12 md:py-20 lg:border-l lg:border-r border-stone-200 bg-white min-h-[80vh] drop-shadow-sm"
|
||||||
|
>
|
||||||
|
|
||||||
|
<Link to="/blog" className="inline-flex items-center gap-3 text-xs uppercase tracking-widest font-semibold text-stone-500 hover:text-stone-900 transition-colors mb-12">
|
||||||
|
<ArrowLeft size={16} /> Voltar para Editorial
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-center mb-6">
|
||||||
|
<span className="bg-stone-100 text-stone-600 px-3 py-1 text-xs uppercase tracking-widest font-semibold">{post.category}</span>
|
||||||
|
<span className="text-xs uppercase tracking-widest text-stone-400 font-semibold">{post.date}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-stone-900 leading-tight mb-8">
|
||||||
|
{post.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="w-full aspect-[21/9] bg-stone-100 mt-12 mb-16 overflow-hidden rounded-md shadow-sm">
|
||||||
|
<img src={post.image} alt={post.title} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="prose prose-stone prose-lg max-w-none text-stone-600 font-light
|
||||||
|
prose-headings:font-serif prose-headings:font-normal prose-headings:text-stone-900
|
||||||
|
prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
|
||||||
|
prose-p:leading-relaxed prose-p:mb-6
|
||||||
|
prose-strong:font-semibold prose-strong:text-stone-800
|
||||||
|
prose-blockquote:border-l-4 prose-blockquote:border-primary-500 prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:text-stone-700 prose-blockquote:my-10
|
||||||
|
prose-li:my-2
|
||||||
|
prose-ol:mt-4 prose-ol:mb-8"
|
||||||
|
>
|
||||||
|
<Markdown>{post.content}</Markdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</motion.article>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
Template-02/src/pages/blog.tsx
Normal file
57
Template-02/src/pages/blog.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { posts } from '../data/posts';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Blog() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-screen bg-stone-50">
|
||||||
|
<SEO
|
||||||
|
title="Editorial & Blog | Odonto Premium"
|
||||||
|
description="Artigos, dicas valiosas e as últimas novidades sobre odontologia de alta performance, estética avançada e longevidade."
|
||||||
|
canonical="/blog"
|
||||||
|
/>
|
||||||
|
<div className="max-w-[1400px] mx-auto">
|
||||||
|
|
||||||
|
<div className="mb-20">
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-4 block">Editorial</span>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Insight Premium
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-stone-500 font-light mt-6 max-w-xl leading-relaxed">
|
||||||
|
Artigos, dicas valiosas e as últimas novidades sobre odontologia de alta performance, redigidos por nossos especialistas.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{posts.map((post, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={post.id}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
transition={{ delay: (idx % 3) * 0.1, duration: 0.6 }}
|
||||||
|
className="group cursor-pointer border border-stone-200 hover:border-primary-500 transition-colors bg-white flex flex-col"
|
||||||
|
>
|
||||||
|
<Link to={`/blog/${post.id}`} className="aspect-[4/3] overflow-hidden relative border-b border-stone-200">
|
||||||
|
<img src={post.image} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[10s]" />
|
||||||
|
<div className="absolute top-4 left-4 bg-white/95 px-4 py-2 text-xs font-semibold tracking-widest uppercase text-stone-900 drop-shadow-sm">
|
||||||
|
{post.category}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<Link to={`/blog/${post.id}`} className="p-8 flex flex-col gap-6 flex-grow">
|
||||||
|
<h3 className="text-2xl font-serif text-stone-900 leading-tight group-hover:text-primary-700 transition-colors uppercase font-medium">{post.title}</h3>
|
||||||
|
<div className="flex items-center justify-between text-xs text-stone-400 font-semibold uppercase tracking-widest mt-auto">
|
||||||
|
<span>{post.minRead} de leitura</span>
|
||||||
|
<ArrowRight size={18} className="transform group-hover:translate-x-1 group-hover:text-primary-600 transition-all" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
93
Template-02/src/pages/contact.tsx
Normal file
93
Template-02/src/pages/contact.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Contact() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-0 px-0 min-h-screen flex flex-col lg:flex-row bg-white">
|
||||||
|
<SEO
|
||||||
|
title="Contato & Agendamento | Odonto Premium"
|
||||||
|
description="Agende sua avaliação na Odonto Premium. Localizada no coração do Itaim Bibi em São Paulo. Dê o primeiro passo para o seu novo sorriso."
|
||||||
|
canonical="/contato"
|
||||||
|
/>
|
||||||
|
{/* Visual Side */}
|
||||||
|
<div className="w-full lg:w-1/2 bg-stone-50 h-[50vh] lg:h-auto relative lg:sticky lg:top-0 order-2 lg:order-1 flex items-center justify-center p-6 border-r border-stone-200">
|
||||||
|
<div className="w-full max-w-lg flex flex-col mt-12 lg:mt-0">
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-4 block">Central de Atendimento</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif text-stone-900 leading-tight mb-8">
|
||||||
|
Dê o primeiro passo para o seu novo sorriso.
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-stone-600 font-light mb-16 leading-relaxed">
|
||||||
|
Deixe as dúvidas de lado. Nossa equipe técnica de concierges entrará em contato para entender suas necessidades e agendar o melhor horário para sua visita à clínica.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 text-sm">
|
||||||
|
<div className="flex flex-col border-t border-stone-300 pt-4">
|
||||||
|
<span className="uppercase tracking-widest text-xs text-stone-400 font-semibold mb-2">Localização</span>
|
||||||
|
<span className="text-stone-900 font-medium">Av. Faria Lima, 3400<br/>Cj 151 - Itaim Bibi, SP</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col border-t border-stone-300 pt-4">
|
||||||
|
<span className="uppercase tracking-widest text-xs text-stone-400 font-semibold mb-2">Funcionamento</span>
|
||||||
|
<span className="text-stone-900 font-medium">Seg a Sex<br/>09h às 19h</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-48 sm:h-64 mt-12 rounded-xl overflow-hidden bg-stone-200">
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.7024467022883!2d-46.685368424669816!3d-23.579222662243574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce57425f1c9d87%3A0xe67db50cd2dd2a22!2sAv.%20Brg.%20Faria%20Lima%2C%203400%20-%20Itaim%20Bibi%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%2004538-132!5e0!3m2!1spt-BR!2sbr!4v1717621213032!5m2!1spt-BR!2sbr"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
style={{ border: 0 }}
|
||||||
|
allowFullScreen={false}
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
title="Localização da Clínica no Mapa"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Side */}
|
||||||
|
<div className="w-full lg:w-1/2 bg-white flex items-center justify-center p-6 py-20 lg:py-32 order-1 lg:order-2">
|
||||||
|
<div className="w-full max-w-lg">
|
||||||
|
<h3 className="text-3xl font-serif text-stone-900 mb-10">Solicitação de Agendamento</h3>
|
||||||
|
|
||||||
|
<form className="flex flex-col gap-8" onSubmit={(e) => { e.preventDefault(); trackEvent('Lead', { source: 'Contact Form' }); }}>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-xs uppercase tracking-widest font-semibold text-stone-500">Nome Completo</label>
|
||||||
|
<input type="text" className="border-b border-stone-200 py-3 px-0 focus:border-stone-900 outline-none transition-colors bg-transparent text-stone-900 text-lg w-full" placeholder="Como deseja ser chamado?" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-xs uppercase tracking-widest font-semibold text-stone-500">Telefone / WhatsApp</label>
|
||||||
|
<input type="tel" className="border-b border-stone-200 py-3 px-0 focus:border-stone-900 outline-none transition-colors bg-transparent text-stone-900 text-lg w-full" placeholder="(11) 90000-0000" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="text-xs uppercase tracking-widest font-semibold text-stone-500">E-mail</label>
|
||||||
|
<input type="email" className="border-b border-stone-200 py-3 px-0 focus:border-stone-900 outline-none transition-colors bg-transparent text-stone-900 text-lg w-full" placeholder="seu@email.com" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2 mt-4">
|
||||||
|
<label className="text-xs uppercase tracking-widest font-semibold text-stone-500">Interesse Principal</label>
|
||||||
|
<select className="border-b border-stone-200 py-3 px-0 focus:border-stone-900 outline-none transition-colors bg-transparent text-stone-900 text-lg w-full appearance-none cursor-pointer">
|
||||||
|
<option>Lentes de Contato Dental</option>
|
||||||
|
<option>Implantes e Reabilitação</option>
|
||||||
|
<option>Ortodontia (Alinhadores)</option>
|
||||||
|
<option>Check-up / Limpeza Profissional</option>
|
||||||
|
<option>Outro</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="mt-8 bg-stone-900 text-white font-semibold text-xs py-6 uppercase tracking-widest hover:bg-primary-900 transition-colors w-full">
|
||||||
|
Enviar Solicitação
|
||||||
|
</button>
|
||||||
|
<p className="text-xs text-stone-400 font-light text-center mt-2">Nós respeitamos sua privacidade. Seus dados estão seguros.</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
Template-02/src/pages/features.tsx
Normal file
67
Template-02/src/pages/features.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
|
||||||
|
export function Features() {
|
||||||
|
const features = [
|
||||||
|
{ title: 'Excelência Técnica', desc: 'Profissionais altamente qualificados, especialistas, mestres e doutores com constante atualização nos melhores centros de odontologia do mundo.' },
|
||||||
|
{ title: 'Fluxo 100% Digital', desc: 'Do diagnóstico ao resultado final, tudo é desenhado por software. Garantia de adaptação marginal perfeita e estética impecável.' },
|
||||||
|
{ title: 'Sem Dor. Sem Ansiedade.', desc: 'Utilizamos anestesia computadorizada sem agulhas convencionais e protocolos de sedação consciente para garantir um tratamento absolutamente indolor e relaxante.' },
|
||||||
|
{ title: 'Atendimento Exclusivo', desc: 'Você não espera. O horário é reservado com exclusividade para você, com tranquilidade, privacidade e pontualidade britânica.' },
|
||||||
|
{ title: 'Materiais Premium', desc: 'Trabalhamos exclusivamente com as melhores cerâmicas suíças, alemãs e alinhadores Invisalign originais para garantir durabilidade ímpar.' },
|
||||||
|
{ title: 'Clínica Multidisciplinar', desc: 'Reunimos os maiores especialistas de cada área da odontologia no mesmo local, trabalhando em equipe para resolver os casos mais complexos.' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-screen bg-white">
|
||||||
|
<div className="max-w-[1400px] mx-auto">
|
||||||
|
|
||||||
|
<div className="mb-24 mt-12 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-end">
|
||||||
|
<div>
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-6 block">O Método Premium</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Engenharia <br/> do Sorriso
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-xl md:text-2xl text-stone-500 font-light max-w-lg mb-2 leading-relaxed">
|
||||||
|
Construímos nossa reputação baseados na recusa absoluta em aceitar atalhos. Cada micro-detalhe é pensado para entregar a perfeição.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0 border border-stone-200">
|
||||||
|
{features.map((item, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={item.title}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: idx * 0.1 }}
|
||||||
|
className={`p-10 lg:p-14 flex flex-col gap-8 ${
|
||||||
|
// complex border logic to recreate a clean grid
|
||||||
|
idx === 0 ? '' :
|
||||||
|
idx === 1 ? 'border-t md:border-t-0 md:border-l border-stone-200' :
|
||||||
|
idx === 2 ? 'border-t lg:border-t-0 md:border-l lg:border-l-0 lg:border-l-0 lg:border-l border-stone-200' :
|
||||||
|
idx === 3 ? 'border-t border-stone-200' :
|
||||||
|
idx === 4 ? 'border-t md:border-l border-stone-200' :
|
||||||
|
'border-t md:border-t-0 md:border-l lg:border-t lg:border-l-0 lg:border-l border-stone-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="text-5xl font-serif text-stone-200">0{idx + 1}</div>
|
||||||
|
<div className="flex flex-col gap-4 mt-auto">
|
||||||
|
<h3 className="text-2xl font-serif text-stone-900">{item.title}</h3>
|
||||||
|
<p className="text-base text-stone-500 leading-relaxed font-light">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-24 w-full h-[60vh] bg-stone-100 relative overflow-hidden group">
|
||||||
|
<img src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=2000&auto=format&fit=crop" alt="Premium dental environment" className="w-full h-full object-cover scale-100 group-hover:scale-105 transition-transform duration-[20s]" />
|
||||||
|
<div className="absolute inset-0 bg-stone-900/30 mix-blend-multiply"></div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/90 via-stone-900/40 to-transparent flex flex-col justify-end p-8 md:p-16">
|
||||||
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-serif text-white max-w-3xl leading-tight drop-shadow-lg">Elevando a Odontologia <br/><span className="text-primary-300 drop-shadow-md">ao estado da arte.</span></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
203
Template-02/src/pages/home.tsx
Normal file
203
Template-02/src/pages/home.tsx
Normal file
|
|
@ -0,0 +1,203 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<SEO canonical="/" />
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative min-h-screen pt-24 flex items-center bg-stone-50">
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-12 lg:py-0">
|
||||||
|
<div className="flex flex-col gap-8 z-10">
|
||||||
|
<motion.div initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} className="flex items-center gap-3">
|
||||||
|
<div className="h-[1px] w-12 bg-primary-600"></div>
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600">Odontologia de Alta Performance</span>
|
||||||
|
</motion.div>
|
||||||
|
<motion.h1 initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} transition={{delay:0.1}} className="text-6xl md:text-7xl lg:text-8xl font-serif text-stone-900 leading-[1.05] tracking-tight">
|
||||||
|
Sorrisos <br/> Extraordinários
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} transition={{delay:0.2}} className="text-lg md:text-xl text-stone-600 max-w-md font-light leading-relaxed">
|
||||||
|
A união absoluta da precisão tecnológica com a arte da estética dental, localizada no coração de São Paulo.
|
||||||
|
</motion.p>
|
||||||
|
<motion.div initial={{opacity:0, y:20}} animate={{opacity:1, y:0}} transition={{delay:0.3}} className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||||
|
<Link to="/contato" onClick={() => trackEvent('Schedule', { source: 'Home Hero' })} className="inline-flex justify-between items-center bg-stone-900 text-white px-8 py-5 text-xs uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors">
|
||||||
|
Agendar Avaliação
|
||||||
|
<ArrowRight size={16} className="ml-4" />
|
||||||
|
</Link>
|
||||||
|
<Link to="/diferenciais" className="inline-flex justify-center items-center border border-stone-300 text-stone-900 px-8 py-5 text-xs uppercase tracking-widest font-semibold hover:bg-stone-100 transition-colors">
|
||||||
|
A Clínica
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div initial={{opacity:0, scale:0.95}} animate={{opacity:1, scale:1}} transition={{delay:0.2, duration:0.8}} className="relative h-[50vh] lg:h-[80vh] w-full">
|
||||||
|
<img src="https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=2500&auto=format&fit=crop" alt="Clínica" className="w-full h-full object-cover" />
|
||||||
|
<div className="absolute bottom-0 left-0 bg-white p-6 md:p-8 shadow-2xl max-w-xs -ml-0 lg:-ml-12 mb-0 lg:mb-12">
|
||||||
|
<p className="text-5xl font-serif text-primary-900 mb-2">100%</p>
|
||||||
|
<p className="text-xs uppercase tracking-widest text-stone-500 font-semibold">Planejamento Digital em 3D</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Grid (Strict) */}
|
||||||
|
<section className="border-t border-b border-stone-200">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 divide-y lg:divide-y-0 lg:divide-x divide-stone-200 max-w-[1400px] mx-auto">
|
||||||
|
{[
|
||||||
|
{ title: "Lentes em Resina e Porcelana", desc: "Transformações estéticas minimamente invasivas em poucas sessões. Precisão milimétrica para o sorriso perfeito." },
|
||||||
|
{ title: "Implantes & Reabilitação", desc: "Soluções definitivas para recuperar a função e estética, utilizando tecnologia de cirurgia guiada." },
|
||||||
|
{ title: "Ortodontia Invisível", desc: "Correção dentária sem os fios de antigamente. Discreto, altamente eficiente e com resultados previsíveis." }
|
||||||
|
].map((service, i) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
transition={{ duration: 0.6, delay: i * 0.1 }}
|
||||||
|
key={i}
|
||||||
|
className="p-10 lg:p-14 hover:bg-stone-50 transition-colors flex flex-col group min-h-[350px]"
|
||||||
|
>
|
||||||
|
<div className="text-xs font-semibold text-primary-400 mb-6 uppercase tracking-widest">0{i+1}</div>
|
||||||
|
<h3 className="text-3xl font-serif text-stone-900 mb-6 group-hover:text-primary-700 transition-colors">{service.title}</h3>
|
||||||
|
<p className="text-stone-500 font-light leading-relaxed mb-12 flex-grow">{service.desc}</p>
|
||||||
|
<Link to="/resultados" className="inline-flex items-center text-xs uppercase tracking-widest font-semibold text-stone-900 group-hover:text-primary-600 transition-colors">
|
||||||
|
Saber mais <ArrowRight size={14} className="ml-2 transform group-hover:translate-x-1 transition-transform" />
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Showcase Grid */}
|
||||||
|
<section className="py-24 bg-white border-b border-stone-200">
|
||||||
|
<div className="max-w-[1400px] mx-auto px-6 mb-16">
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-4 block">A Nova Estética</span>
|
||||||
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-serif text-stone-900 leading-tight">Resultados que <br/>falam por si.</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-6 max-w-[1400px] mx-auto">
|
||||||
|
{[{title: "Lentes de Contato", img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=800&auto=format&fit=crop"},
|
||||||
|
{title: "Reabilitação Oral", img: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop"},
|
||||||
|
{title: "Ortodontia Premium", img: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=800&auto=format&fit=crop"}].map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
transition={{ duration: 0.6, delay: i * 0.1 }}
|
||||||
|
key={i}
|
||||||
|
className="group relative aspect-[4/5] md:aspect-[3/4] overflow-hidden rounded-xl shadow-sm"
|
||||||
|
>
|
||||||
|
<img src={item.img} alt={item.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/95 via-stone-900/30 to-transparent flex flex-col justify-end p-8">
|
||||||
|
<p className="text-xs uppercase tracking-widest font-semibold text-primary-300 mb-2 drop-shadow-md">Caso Clínico 0{i+1}</p>
|
||||||
|
<h3 className="text-2xl font-serif text-white drop-shadow-lg">{item.title}</h3>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Tech / About */}
|
||||||
|
<section className="bg-primary-950 text-white py-16 lg:py-24 overflow-hidden relative">
|
||||||
|
<div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center relative z-10">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="lg:col-span-6 relative order-2 lg:order-1"
|
||||||
|
>
|
||||||
|
<div className="relative overflow-hidden shadow-2xl border border-primary-800/40 rounded-xl">
|
||||||
|
<img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=800&auto=format&fit=crop" alt="Precisão clínica" className="w-full aspect-[4/3] object-cover opacity-90" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -bottom-6 -left-6 w-32 h-32 bg-primary-700/30 rounded-full blur-3xl -z-10"></div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="lg:col-span-6 flex flex-col gap-6 lg:pl-6 order-1 lg:order-2"
|
||||||
|
>
|
||||||
|
<span className="uppercase tracking-widest text-[10px] font-semibold text-primary-400">Padrão Ouro</span>
|
||||||
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-serif leading-tight">Precisão Absoluta. <br/>Conforto Incomparável.</h2>
|
||||||
|
<p className="text-primary-100/80 font-light text-base lg:text-lg leading-relaxed">
|
||||||
|
Esqueça a odontologia analógica. Nosso fluxo de trabalho é 100% digital, desde o escaneamento na primeira consulta até a confecção guiada das peças. Procedimentos rápidos, previsíveis e sem moldagens desconfortáveis.
|
||||||
|
</p>
|
||||||
|
<ul className="flex flex-col gap-3 mt-4">
|
||||||
|
{["Escaneamento 3D sem massa", "Guias In-House", "Cirurgias Minimamente Invasivas"].map((item, i) => (
|
||||||
|
<li key={i} className="flex items-center gap-3 text-primary-100 text-sm">
|
||||||
|
<div className="w-1 h-1 bg-primary-400 shrink-0 rounded-full"></div>
|
||||||
|
<span className="font-light">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="mt-6">
|
||||||
|
<Link to="/diferenciais" className="inline-flex justify-between items-center text-white border border-primary-800/60 px-6 py-3 text-xs uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors group">
|
||||||
|
Conheça a Tecnologia
|
||||||
|
<ArrowRight size={14} className="ml-3 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Newsletter Section */}
|
||||||
|
<section className="py-24 bg-stone-50 border-b border-stone-200">
|
||||||
|
<div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
>
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-4 block">Odonto Premium Newsletter</span>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-serif text-stone-900 leading-tight mb-6">Assine nosso <br/>Editorial Premium</h2>
|
||||||
|
<p className="text-stone-600 font-light text-lg mb-8">Receba quinzenalmente artigos exclusivos sobre estética dental, longevidade e os avanços mais recentes na saúde bucal.</p>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="bg-white p-8 md:p-12 shadow-sm rounded-xl border border-stone-100"
|
||||||
|
>
|
||||||
|
<form className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="newsletter-name" className="text-xs uppercase tracking-widest font-semibold text-stone-500">Seu Nome</label>
|
||||||
|
<input type="text" id="newsletter-name" className="w-full bg-stone-50 border border-stone-200 px-6 py-4 outline-none focus:border-primary-500 transition-colors rounded-none" placeholder="Ex: Maria Silva" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label htmlFor="newsletter-email" className="text-xs uppercase tracking-widest font-semibold text-stone-500">Seu E-mail</label>
|
||||||
|
<input type="email" id="newsletter-email" className="w-full bg-stone-50 border border-stone-200 px-6 py-4 outline-none focus:border-primary-500 transition-colors rounded-none" placeholder="maria@exemplo.com" />
|
||||||
|
</div>
|
||||||
|
<button type="submit" onClick={(e) => { e.preventDefault(); trackEvent('Subscribe', { source: 'Home Newsletter Form' }); alert('Inscrição realizada com sucesso!'); }} className="w-full bg-stone-900 text-white px-8 py-5 text-sm uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors flex justify-center items-center gap-4 mt-2">
|
||||||
|
Inscrever-se <ArrowRight size={16} />
|
||||||
|
</button>
|
||||||
|
<p className="text-xs text-stone-400 font-light text-center">Prometemos não enviar spam. Você pode cancelar a qualquer momento.</p>
|
||||||
|
</form>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Clean Call to Action */}
|
||||||
|
<section className="py-32 bg-stone-100 border-b border-stone-200">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="max-w-4xl mx-auto px-6 text-center flex flex-col items-center"
|
||||||
|
>
|
||||||
|
<h2 className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight mb-8">O próximo passo para a sua autoestima.</h2>
|
||||||
|
<p className="text-xl text-stone-500 font-light mb-12">Agende uma avaliação minuciosa e descubra todas as possibilidades para transformar seu sorriso.</p>
|
||||||
|
<Link to="/contato" onClick={() => trackEvent('Schedule', { source: 'Home Footer CTA' })} className="inline-flex justify-between items-center bg-stone-900 text-white px-10 py-6 text-sm uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors">
|
||||||
|
Quero agendar
|
||||||
|
<ArrowRight size={18} className="ml-4" />
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
Template-02/src/pages/not-found.tsx
Normal file
24
Template-02/src/pages/not-found.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { ArrowLeft } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-[80vh] flex flex-col items-center justify-center text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex flex-col items-center gap-6"
|
||||||
|
>
|
||||||
|
<span className="text-9xl font-serif text-stone-200">404</span>
|
||||||
|
<h1 className="text-4xl font-serif text-stone-900">Página não encontrada</h1>
|
||||||
|
<p className="text-stone-500 font-light max-w-md">
|
||||||
|
O caminho que você buscou não está mais disponível ou foi movido. Você pode retornar à página inicial e continuar sua jornada.
|
||||||
|
</p>
|
||||||
|
<Link to="/" className="mt-4 flex items-center gap-2 px-8 py-4 bg-primary-900 text-white rounded-full font-medium hover:bg-stone-800 transition-colors active:scale-95 duration-200">
|
||||||
|
<ArrowLeft size={18} /> Voltar ao Início
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
50
Template-02/src/pages/privacy.tsx
Normal file
50
Template-02/src/pages/privacy.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Privacy() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-screen bg-stone-50">
|
||||||
|
<SEO
|
||||||
|
title="Política de Privacidade | Odonto Premium"
|
||||||
|
description="Termos e políticas de privacidade da Odonto Premium."
|
||||||
|
canonical="/privacidade"
|
||||||
|
/>
|
||||||
|
<div className="max-w-[1000px] mx-auto bg-white p-8 md:p-16 shadow-sm border border-stone-100 rounded-xl">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-serif text-stone-900 mb-8">Política de Privacidade</h1>
|
||||||
|
<div className="prose prose-stone max-w-none text-stone-600 font-light leading-relaxed">
|
||||||
|
<p className="font-medium text-stone-900">Última atualização: {new Date().toLocaleDateString('pt-BR')}</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">1. Introdução</h2>
|
||||||
|
<p>A Odonto Premium valoriza a privacidade e a segurança das informações de nossos pacientes e visitantes. Esta Política de Privacidade descreve como coletamos, usamos, armazenamos e protegemos seus dados pessoais ao utilizar nosso site e serviços.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">2. Dados Coletados</h2>
|
||||||
|
<p>Coletamos informações das seguintes maneiras:</p>
|
||||||
|
<ul className="list-disc pl-6 mb-6">
|
||||||
|
<li><strong>Dados fornecidos por você:</strong> Nome, e-mail, telefone e outras informações preenchidas em nossos formulários de contato e agendamento.</li>
|
||||||
|
<li><strong>Dados de navegação:</strong> Coletamos automaticamente dados como endereço IP, tipo de navegador e páginas visitadas através de cookies (ex: Google Analytics e Meta Pixel).</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">3. Uso das Informações</h2>
|
||||||
|
<p>Os dados coletados são utilizados para:</p>
|
||||||
|
<ul className="list-disc pl-6 mb-6">
|
||||||
|
<li>Agendar consultas e retornar contatos;</li>
|
||||||
|
<li>Melhorar a experiência de navegação em nosso site;</li>
|
||||||
|
<li>Envio de comunicações informativas e de marketing, caso tenha consentido (assinatura de newsletter).</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">4. Cookies e Tecnologias de Rastreamento</h2>
|
||||||
|
<p>Utilizamos cookies para personalizar conteúdo, anúncios e analisar nosso tráfego. Você pode configurar ou recusar o uso de cookies através de nosso banner ou nas configurações do seu navegador.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">5. Compartilhamento de Dados</h2>
|
||||||
|
<p>Suas informações pessoais não serão vendidas ou repassadas a terceiros não autorizados. Elas podem ser compartilhadas com plataformas parceiras estritamente para o propósito de prestação de serviços e marketing da Odonto Premium, as quais também seguem a Lei Geral de Proteção de Dados (LGPD).</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">6. Seus Direitos</h2>
|
||||||
|
<p>Você tem o direito de solicitar acesso, correção, atualização ou exclusão de suas informações pessoais. Para exercer esses direitos, entre em contato através de nosso e-mail.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">7. Contato</h2>
|
||||||
|
<p>Se você tiver alguma dúvida sobre esta Política de Privacidade, entre em contato:</p>
|
||||||
|
<p><strong>E-mail: </strong> contato@odontopremium.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
71
Template-02/src/pages/results.tsx
Normal file
71
Template-02/src/pages/results.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Results() {
|
||||||
|
const treatments = [
|
||||||
|
{
|
||||||
|
title: "Lentes de Contato Dental",
|
||||||
|
desc: "Lâminas ultrafinas de porcelana com espessuras que chegam a 0.2mm, desenhadas digitalmente para alterar formato, cor e alinhamento dos dentes sem ou com o mínimo de desgaste dentário. Um sorriso impecável e natural.",
|
||||||
|
img: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&h=800&auto=format&fit=crop"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Implantes & Carga Imediata",
|
||||||
|
desc: "Substituição de raízes perdidas com pinos de titânio de osseointegração rápida. Por meio do planejamento guiado, conseguimos posicionar os implantes com exatidão, entregando dentes fixos no mesmo dia na maioria dos casos.",
|
||||||
|
img: "https://plus.unsplash.com/premium_photo-1663126743387-f8cc02cc72de?q=80&w=1200&h=800&auto=format&fit=crop"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Invisalign® (Alinhadores Invisíveis)",
|
||||||
|
desc: "Tratamento ortodôntico invisível e altamente tecnológico. Corrija o posicionamento dos seus dentes com aparelhos removíveis, confortáveis e sem fios. O escaneamento em 3D permite que você veja o resultado final na primeira consulta.",
|
||||||
|
img: "https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=1200&h=800&auto=format&fit=crop"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-screen bg-stone-50">
|
||||||
|
<SEO
|
||||||
|
title="Casos Clínicos & Especialidades | Odonto Premium"
|
||||||
|
description="Veja a excelência de nossos casos clínicos em implantes, reabilitação oral e lentes de contato em porcelana."
|
||||||
|
canonical="/casos-clinicos"
|
||||||
|
/>
|
||||||
|
<div className="max-w-[1400px] mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="mb-20"
|
||||||
|
>
|
||||||
|
<span className="uppercase tracking-widest text-xs font-semibold text-primary-600 mb-4 block">Portfólio de Soluções</span>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Especialidades
|
||||||
|
</h1>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-12 lg:gap-24">
|
||||||
|
{treatments.map((t, idx) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: "-100px" }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
key={idx}
|
||||||
|
className={`flex flex-col lg:flex-row gap-0 lg:gap-12 items-center bg-white border border-stone-200 overflow-hidden ${idx % 2 !== 0 ? 'lg:flex-row-reverse' : ''}`}
|
||||||
|
>
|
||||||
|
<div className="w-full lg:w-1/2 aspect-[4/3] bg-stone-100 overflow-hidden relative">
|
||||||
|
<img src={t.img} alt={t.title} className="w-full h-full object-cover scale-100 hover:scale-105 transition-transform duration-[10s]" />
|
||||||
|
</div>
|
||||||
|
<div className="w-full lg:w-1/2 flex flex-col gap-6 p-8 lg:p-16">
|
||||||
|
<div className="text-7xl font-serif text-stone-100 mb-4 leading-none">0{idx+1}</div>
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-serif text-stone-900">{t.title}</h2>
|
||||||
|
<p className="text-lg text-stone-500 font-light leading-relaxed">{t.desc}</p>
|
||||||
|
<Link to="/contato" onClick={() => trackEvent('Schedule', { source: 'Results Page', treatment: t.title })} className="self-start mt-6 px-10 py-5 bg-stone-900 text-white text-xs uppercase tracking-widest font-semibold hover:bg-primary-900 transition-colors">
|
||||||
|
Agendar Avaliação
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
91
Template-02/src/pages/services.tsx
Normal file
91
Template-02/src/pages/services.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { Sparkles, Flower2, HeartPulse, Brain, Droplets, ArrowRight } from 'lucide-react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { trackEvent } from '../lib/analytics';
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Services() {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: Sparkles,
|
||||||
|
title: 'Estética Facial',
|
||||||
|
desc: 'Harmonização, toxina botulínica, preenchimentos avançados e fios de sustentação com foco absoluto em naturalidade e rejuvenescimento estrutural.',
|
||||||
|
img: 'https://loremflickr.com/800/800/woman,spa,aesthetic/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Flower2,
|
||||||
|
title: 'Odontologia Premium',
|
||||||
|
desc: 'Lentes de contato em porcelana ultrafina, reabilitação oral 3D e acompanhamento clínico contínuo para um sorriso perfeito e saudável.',
|
||||||
|
img: 'https://loremflickr.com/800/800/dentist,smile,premium/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HeartPulse,
|
||||||
|
title: 'Performance & Longevidade',
|
||||||
|
desc: 'Reposição hormonal, medicina do estilo de vida e protocolos intravenosos para maximizar sua energia, foco e vitalidade.',
|
||||||
|
img: 'https://loremflickr.com/800/800/wellness,yoga,health/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Droplets,
|
||||||
|
title: 'Skincare Clínico',
|
||||||
|
desc: 'Lasers de última geração, peelings profundos e tecnologias híbridas para o tratamento de manchas, cicatrizes e textura de pele.',
|
||||||
|
img: 'https://loremflickr.com/800/800/skincare,laser,clinic/all'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Brain,
|
||||||
|
title: 'Saúde Mental & Wellness',
|
||||||
|
desc: 'Acompanhamento psiquiátrico e psicológico de alto padrão, focado em alta performance, manejo de estresse e inteligência emocional.',
|
||||||
|
img: 'https://loremflickr.com/800/800/therapy,calm,mind/all'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto flex flex-col gap-20">
|
||||||
|
<SEO
|
||||||
|
title="Tratamentos Premium | Odonto Premium"
|
||||||
|
description="Conheça nossos protocolos exclusivos em Odontologia, Estética Facial e Longevidade. Planejamento digital e tecnologia de ponta."
|
||||||
|
canonical="/tratamentos"
|
||||||
|
/>
|
||||||
|
<div className="max-w-3xl flex flex-col gap-6">
|
||||||
|
<motion.span initial={{opacity:0}} animate={{opacity:1}} transition={{duration:1}} className="text-primary-600 font-medium tracking-widest uppercase text-sm">Nossas Especialidades</motion.span>
|
||||||
|
<motion.h1 initial={{opacity:0, y:-10}} animate={{opacity:1, y:0}} transition={{duration:0.8, delay: 0.1}} className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
|
||||||
|
Protocolos <span className="italic text-primary-800">exclusivos</span> para você.
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p initial={{opacity:0, y:10}} animate={{opacity:1, y:0}} transition={{duration:0.8, delay:0.2}} className="text-xl text-stone-500 font-light max-w-2xl leading-relaxed">
|
||||||
|
Cada tratamento é desenhado de forma única, unindo a ciência mais avançada a um olhar artístico e profundamente humano.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-12">
|
||||||
|
{services.map((svc, i) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{opacity: 0, y: 30}}
|
||||||
|
whileInView={{opacity: 1, y: 0}}
|
||||||
|
viewport={{once:true, margin: "-100px"}}
|
||||||
|
transition={{duration: 0.8}}
|
||||||
|
key={i}
|
||||||
|
className="group flex flex-col md:flex-row gap-8 md:gap-16 items-center bg-white p-6 md:p-8 rounded-[40px] shadow-sm border border-stone-100 hover:shadow-xl transition-all duration-500"
|
||||||
|
>
|
||||||
|
<div className="w-full md:w-5/12 h-[300px] md:h-[400px] rounded-[32px] overflow-hidden relative">
|
||||||
|
<div className="absolute inset-0 bg-primary-900/10 group-hover:bg-transparent transition-colors z-10 duration-500" />
|
||||||
|
<img src={svc.img} alt={svc.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-7/12 flex flex-col gap-6 p-4 md:pr-12">
|
||||||
|
<div className="w-14 h-14 rounded-full bg-sand-200 text-primary-800 flex items-center justify-center">
|
||||||
|
<svc.icon size={26} strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-serif text-stone-900">{svc.title}</h2>
|
||||||
|
<p className="text-lg text-stone-500 font-light leading-relaxed">{svc.desc}</p>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-6 border-t border-stone-100">
|
||||||
|
<Link to="/contato" onClick={() => trackEvent('Schedule', { source: 'Services List', service: svc.title })} className="inline-flex items-center gap-3 text-primary-800 font-medium hover:text-primary-600 transition-colors">
|
||||||
|
Agendar avaliação <ArrowRight size={18} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
Template-02/src/pages/team.tsx
Normal file
45
Template-02/src/pages/team.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { Linkedin } from 'lucide-react';
|
||||||
|
|
||||||
|
export function Team() {
|
||||||
|
const team = [
|
||||||
|
{ name: 'Dr. Arthur Vilela', role: 'Diretor Clínico & Estética', cro: 'CRM 12345', img: 'https://i.pravatar.cc/600?img=11' },
|
||||||
|
{ name: 'Dra. Luiza Junqueira', role: 'Dermatologista', cro: 'CRM 54321', img: 'https://i.pravatar.cc/600?img=35' },
|
||||||
|
{ name: 'Dr. Thiago Mendes', role: 'Odontologia Estética', cro: 'CRO 98765', img: 'https://i.pravatar.cc/600?img=12' },
|
||||||
|
{ name: 'Marcela Couto', role: 'Head de Wellness', cro: 'CRN 32189', img: 'https://i.pravatar.cc/600?img=43' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 max-w-7xl mx-auto">
|
||||||
|
<div className="flex flex-col items-center text-center gap-6 mb-20">
|
||||||
|
<span className="text-primary-600 font-medium tracking-widest uppercase text-sm">Corpo Clínico</span>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-serif text-stone-900 leading-tight">
|
||||||
|
Especialistas em <span className="italic text-primary-800">excelência.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-stone-500 font-light max-w-2xl">
|
||||||
|
Nossa equipe foi cuidadosamente selecionada para oferecer um atendimento multidisciplinar focado em resultados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{team.map((member, i) => (
|
||||||
|
<div key={i} className="group flex flex-col gap-4">
|
||||||
|
<div className="aspect-[3/4] bg-stone-200 rounded-[32px] overflow-hidden relative">
|
||||||
|
<img src={member.img} alt={member.name} className="w-full h-full object-cover grayscale-[30%] group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105" />
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||||
|
<button className="bg-white/20 backdrop-blur-md p-3 rounded-full text-white hover:bg-white hover:text-black transition-colors">
|
||||||
|
<Linkedin size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col px-2">
|
||||||
|
<h3 className="text-xl font-serif font-medium">{member.name}</h3>
|
||||||
|
<p className="text-primary-700 text-sm mt-1 mb-2">{member.role}</p>
|
||||||
|
<p className="text-stone-400 text-xs font-mono">{member.cro}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
Template-02/src/pages/terms.tsx
Normal file
41
Template-02/src/pages/terms.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { SEO } from '../components/seo';
|
||||||
|
|
||||||
|
export function Terms() {
|
||||||
|
return (
|
||||||
|
<div className="pt-32 pb-24 px-6 min-h-screen bg-stone-50">
|
||||||
|
<SEO
|
||||||
|
title="Termos de Uso | Odonto Premium"
|
||||||
|
description="Termos de uso do site da Odonto Premium."
|
||||||
|
canonical="/termos"
|
||||||
|
/>
|
||||||
|
<div className="max-w-[1000px] mx-auto bg-white p-8 md:p-16 shadow-sm border border-stone-100 rounded-xl">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-serif text-stone-900 mb-8">Termos de Uso</h1>
|
||||||
|
<div className="prose prose-stone max-w-none text-stone-600 font-light leading-relaxed">
|
||||||
|
<p className="font-medium text-stone-900">Última atualização: {new Date().toLocaleDateString('pt-BR')}</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">1. Aceitação dos Termos</h2>
|
||||||
|
<p>Ao acessar e utilizar o site da Odonto Premium, você concorda em cumprir e estar vinculado a estes Termos de Uso. Se não concordar com alguma parte destes termos, você não deve usar nosso site.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">2. Propriedade Intelectual</h2>
|
||||||
|
<p>Todo o conteúdo deste site, incluindo logotipos, textos, imagens, vídeos e design, é de propriedade exclusiva da Odonto Premium e protegido pelas leis de direitos autorais. O uso não autorizado está estritamente proibido.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">3. Uso do Site</h2>
|
||||||
|
<p>Você concorda em usar nosso site apenas para fins legais e de uma maneira que não infrinja os direitos de, ou restrinja ou iniba o uso e o aproveitamento do site por terceiros.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">4. Informações Médicas e Odontológicas</h2>
|
||||||
|
<p>O conteúdo deste site tem propósito puramente informativo e educativo. Ele <strong>não</strong> substitui de forma alguma o diagnóstico, aconselhamento e tratamento fornecidos por um profissional dentista qualificado durante uma consulta de avaliação presencial.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">5. Limitação de Responsabilidade</h2>
|
||||||
|
<p>A Odonto Premium não se responsabiliza por eventuais danos diretos, indiretos ou consequentes decorrentes do uso ou da impossibilidade de usar nosso site ou sistemas de terceiros interligados a ele.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">6. Modificações dos Termos</h2>
|
||||||
|
<p>Reservamo-nos o direito de alterar estes Termos de Uso a qualquer momento. Alterações entrarão em vigor imediatamente após a publicação no site. O uso contínuo de nossa plataforma constitui aceitação dos novos termos.</p>
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-serif text-stone-900 mt-12 mb-6">7. Contato</h2>
|
||||||
|
<p>Para dúvidas sobre nossos termos, contate-nos:</p>
|
||||||
|
<p><strong>E-mail: </strong> contato@odontopremium.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
Template-02/tsconfig.json
Normal file
26
Template-02/tsconfig.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"useDefineForClassFields": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2022",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
24
Template-02/vite.config.ts
Normal file
24
Template-02/vite.config.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
import {defineConfig, loadEnv} from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig(({mode}) => {
|
||||||
|
const env = loadEnv(mode, '.', '');
|
||||||
|
return {
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
define: {
|
||||||
|
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, '.'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
// HMR is disabled in AI Studio via DISABLE_HMR env var.
|
||||||
|
// Do not modifyâfile watching is disabled to prevent flickering during agent edits.
|
||||||
|
hmr: process.env.DISABLE_HMR !== 'true',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue