284 lines
16 KiB
TypeScript
284 lines
16 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { motion, useScroll, useTransform } from "motion/react";
|
|
import { ArrowRight, Clock, User, Tag } from "lucide-react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import SEO from "../components/SEO";
|
|
|
|
export const posts = [
|
|
{
|
|
category: "Treinamento",
|
|
title: "O Fim do Platô: Técnicas Avançadas de Intensidade",
|
|
desc: "Descubra como utilizar Rest-Pause, Drop-Sets e Cluster Sets para forçar seu corpo a construir novos tecidos e quebrar estagnação.",
|
|
img: "https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "8 min"
|
|
},
|
|
{
|
|
category: "Nutrição",
|
|
title: "Ciclo de Carboidratos para Secar Rápido",
|
|
desc: "A estratégia nutricional dos fisiculturistas adaptada para quem quer baixar o BF para menos de 10% sem perder volume muscular.",
|
|
img: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "12 min"
|
|
},
|
|
{
|
|
category: "Mindset",
|
|
title: "A Psicologia da Disciplina Inabalável",
|
|
desc: "Por que você desiste após 3 semanas? O modelo mental necessário para encarar a dieta restrita como uma vitória diária.",
|
|
img: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "5 min"
|
|
},
|
|
{
|
|
category: "Suplementação",
|
|
title: "Guia Definitivo da Creatina",
|
|
desc: "O único suplemento que você realmente precisa. Mitos, verdades e como saturar de forma correta para aumento de força bruta.",
|
|
img: "https://images.unsplash.com/photo-1593095948071-474c5cc2989d?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "6 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Cardio vs. Musculação: A Ordem Importa?",
|
|
desc: "Entenda a sinalização molecular e por que fazer cardio antes do treino pesado pode estar aniquilando seus ganhos de hipertrofia.",
|
|
img: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "7 min"
|
|
},
|
|
{
|
|
category: "Recuperação",
|
|
title: "Dormir é Anabólico: A Importância do Sono REM",
|
|
desc: "Você não cresce na academia, cresce na cama. Estratégias de higiene do sono para maximizar a liberação de GH natural.",
|
|
img: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "9 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Falha Muscular: O Quanto é Suficiente?",
|
|
desc: "Não confunda cansaço com falha. Aprenda a atingir a falha concêntrica verdadeira sem destruir seu sistema nervoso central.",
|
|
img: "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "10 min"
|
|
},
|
|
{
|
|
category: "Nutrição",
|
|
title: "Proteína: Mais Não é Necessariamente Melhor",
|
|
desc: "A ciência real sobre absorção proteica. Você realmente precisa de 3g por kg corporal para construir miócitos em abundância?",
|
|
img: "https://images.unsplash.com/photo-1507398941214-572c25f4b1dc?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "8 min"
|
|
},
|
|
{
|
|
category: "Mindset",
|
|
title: "Sofra o Processo, Aproveite o Resultado",
|
|
desc: "O estoicismo aplicado ao bodybuilding. Como transformar a dor do treino e a restrição da dieta em combustível mental.",
|
|
img: "https://images.unsplash.com/photo-1526506159807-1c00ba4ce19b?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "6 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Biomecânica Básica para Supino Inversamente Proporcional",
|
|
desc: "Dores no ombro? Seu supino provavelmente está errado. Ajustes milimétricos na pegada e na ponte que mudam o recrutamento peitoral.",
|
|
img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "11 min"
|
|
},
|
|
{
|
|
category: "Nutrição",
|
|
title: "Jejum Intermitente Funciona para Hipertrofia?",
|
|
desc: "As vias AMPK e mTOR estão em guerra no seu corpo. Como usar o jejum para otimizar a sensibilidade à insulina e evitar perda muscular.",
|
|
img: "https://images.unsplash.com/photo-1505253758473-96b7015fcd40?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "14 min"
|
|
},
|
|
{
|
|
category: "Suplementação",
|
|
title: "Beta-Alanina: O Fim da Fadiga Muscular",
|
|
desc: "A biologia do ácido lático e como a carnosina gerada pela beta-alanina pode adicionar 2 reps extras na sua série mais pesada.",
|
|
img: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "7 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Treinando Costas em V: Largura vs Espessura",
|
|
desc: "Puxadas vs Remadas. A combinação exata de vetores de força que você precisa para desenvolver o shape em V perfeito.",
|
|
img: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "9 min"
|
|
},
|
|
{
|
|
category: "Recuperação",
|
|
title: "Alongamento: Antes ou Depois do Treino?",
|
|
desc: "A ciência comprova que alongar estático antes do treino reduz sua força em até 8%. O protocolo correto de mobilidade.",
|
|
img: "https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "5 min"
|
|
},
|
|
{
|
|
category: "Mindset",
|
|
title: "Como Lidar com Lesões Sem Perder a Razão",
|
|
desc: "Uma lesão não é o fim do seu planejamento. Estratégias táticas para manter a dieta e treinar no entorno do problema articular.",
|
|
img: "https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "8 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Agachamento Livre: O Rei Incontestável",
|
|
desc: "Um raio X do movimento base da musculação. Como agachar pesado sem destruir a lombar e maximizando o quadríceps.",
|
|
img: "https://images.unsplash.com/photo-1434596922112-19c563067271?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "12 min"
|
|
},
|
|
{
|
|
category: "Nutrição",
|
|
title: "Refeição Lixo: A Ciência do Cheat Meal",
|
|
desc: "Refeed programado não é 'festa no Mcdonalds'. Entenda como restaurar os níveis de leptina do jeito certo para continuar queimando gordura.",
|
|
img: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "10 min"
|
|
},
|
|
{
|
|
category: "Suplementação",
|
|
title: "Whey Protein: Concentrado, Isolado ou Hidrolisado?",
|
|
desc: "O marketing tenta te vender o mais caro. Descubra qual é a real necessidade de cada tipo de Whey de acordo com seu objetivo.",
|
|
img: "https://images.unsplash.com/photo-1579722820308-d74e571900a9?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "4 min"
|
|
},
|
|
{
|
|
category: "Treinamento",
|
|
title: "Panturrilhas: Genética Maldita ou Falta de Treino?",
|
|
desc: "As panturrilhas são músculos de resistência extrema. O método de choque e altas repetições focado na fase excêntrica.",
|
|
img: "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "6 min"
|
|
},
|
|
{
|
|
category: "Recuperação",
|
|
title: "A Verdade Sobre Banho de Gelo e Hipertrofia",
|
|
desc: "Imersão em gelo pós-treino acelera a recuperação, mas bloqueia o estresse oxidativo necessário para hipertrofia. Cuidado.",
|
|
img: "https://images.unsplash.com/photo-1515444744559-7be63e160e1d?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "7 min"
|
|
},
|
|
{
|
|
category: "Mindset",
|
|
title: "A Força da Rotina Matinal Perfeita",
|
|
desc: "Como as primeiras 2 horas do seu dia definem seu sucesso. Água, sol, cardio em jejum e blindagem mental para evitar falhas.",
|
|
img: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=800&auto=format&fit=crop",
|
|
readTime: "10 min"
|
|
}
|
|
];
|
|
|
|
function FeaturedPost() {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ["start end", "end start"]
|
|
});
|
|
const y = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]);
|
|
|
|
return (
|
|
<div ref={ref} className="relative group overflow-hidden border border-white/10 bg-white/5 flex flex-col md:flex-row h-auto md:h-[500px]">
|
|
<div className="w-full md:w-1/2 h-64 md:h-full relative overflow-hidden">
|
|
<motion.div style={{ y }} className="absolute top-[-10%] left-0 w-full h-[120%]">
|
|
<img src="https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop" className="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 origin-center" alt="Featured" />
|
|
</motion.div>
|
|
</div>
|
|
<div className="w-full md:w-1/2 p-8 md:p-16 flex flex-col justify-center">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<span className="bg-black border border-white/10 text-[#FF3E00] text-[10px] font-bold uppercase tracking-widest px-3 py-1 relative z-10">Biomecânica</span>
|
|
<div className="flex items-center gap-1 text-[10px] text-white/40 uppercase tracking-widest font-bold relative z-10">
|
|
<Clock className="w-3 h-3" /> 15 Min Leitura
|
|
</div>
|
|
</div>
|
|
<Link to="/blog/1" state={{ post: { category: "Biomecânica", title: "A Mentira Sobre o Treino Fofo e o Volume Lixo", desc: "A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.", img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop", readTime: "15 min" } }} className="text-[30px] md:text-[50px] font-black italic uppercase tracking-tighter mb-6 hover:text-[#FF3E00] transition-colors cursor-pointer leading-[0.9] block relative z-10">A Mentira Sobre o Treino Fofo e o Volume Lixo</Link>
|
|
<p className="text-white/60 font-light mb-8 line-clamp-3 text-sm relative z-10">
|
|
A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.
|
|
</p>
|
|
<div className="mt-auto relative z-10">
|
|
<Link to="/blog/1" state={{ post: { category: "Biomecânica", title: "A Mentira Sobre o Treino Fofo e o Volume Lixo", desc: "A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.", img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop", readTime: "15 min" } }} className="inline-flex items-center gap-2 text-white font-black uppercase tracking-widest text-[11px] hover:text-[#FF3E00] transition-colors border-b border-white hover:border-[#FF3E00] pb-1 cursor-pointer">
|
|
Ler Artigo Completo <ArrowRight className="w-4 h-4 ml-1" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const PostCard: React.FC<{ post: any, index: number }> = ({ post, index }) => {
|
|
const ref = useRef<HTMLAnchorElement>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ["start end", "end start"]
|
|
});
|
|
const y = useTransform(scrollYProgress, [0, 1], ["-15%", "15%"]);
|
|
|
|
return (
|
|
<Link to={`/blog/${index+2}`} state={{ post }} ref={ref} className="h-full block">
|
|
<motion.article
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: (index % 3) * 0.1 }}
|
|
className="bg-transparent border border-white/10 hover:border-[#FF3E00]/50 transition-all flex flex-col group cursor-pointer overflow-hidden p-6 hover:bg-white/5 h-full"
|
|
>
|
|
<div className="relative h-56 overflow-hidden w-[calc(100%+3rem)] -mx-6 -mt-6 mb-6">
|
|
<motion.div style={{ y }} className="absolute top-[-15%] left-0 w-full h-[130%]">
|
|
<img src={post.img} className="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500 origin-center" alt={post.title} />
|
|
</motion.div>
|
|
<div className="absolute bottom-0 right-0 bg-black text-[#FF3E00] px-3 py-1 text-[10px] font-black uppercase tracking-widest z-10">
|
|
{post.category}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col flex-grow">
|
|
<h3 className="text-[22px] font-black italic uppercase tracking-tighter mb-4 group-hover:text-[#FF3E00] transition-colors line-clamp-2">{post.title}</h3>
|
|
<p className="text-xs text-white/50 font-light mb-6 flex-grow line-clamp-3">{post.desc}</p>
|
|
<div className="flex items-center justify-between mt-auto pt-4 border-t border-white/10">
|
|
<div className="flex items-center gap-2 text-[10px] uppercase tracking-widest font-bold text-white/40">
|
|
<Clock className="w-3 h-3" /> {post.readTime}
|
|
</div>
|
|
<ArrowRight className="w-4 h-4 text-white/40 group-hover:text-[#FF3E00] transition-colors" />
|
|
</div>
|
|
</div>
|
|
</motion.article>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function Blog() {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div className="w-full flex flex-col pt-10">
|
|
<SEO
|
|
title="Intel Briefing: Blog | MacroLojaUK"
|
|
description="Conteúdo tático sobre treinamento, nutrição e mindset. Artigos diretos, sem enrolação e baseados em ciência aplicável."
|
|
/>
|
|
<section className="py-32 lg:py-48 bg-[#050505] relative z-10 border-t border-white/5">
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-7xl text-center">
|
|
<span className="text-[#FF3E00] font-bold tracking-[0.2em] text-xs uppercase block mb-6">Intel Briefing</span>
|
|
<h1 className="text-6xl sm:text-[70px] md:text-[130px] leading-[0.85] font-black tracking-tighter uppercase italic mb-8">
|
|
CONTEÚDO <br/><span className="text-white/40">TÁTICO.</span>
|
|
</h1>
|
|
<p className="text-white/60 text-xl max-w-2xl mx-auto font-light leading-relaxed">
|
|
Artigos diretos, sem enrolação e baseados em ciência aplicável. A teoria por trás dos resultados extremos.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 bg-[#050505] relative z-10">
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-7xl">
|
|
{/* Featured Post (First one) */}
|
|
<div className="mb-20">
|
|
<FeaturedPost />
|
|
</div>
|
|
|
|
{/* Grid Posts */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{posts.map((post, i) => (
|
|
<PostCard post={post} index={i} key={`post-${i}`} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter */}
|
|
<section className="py-24 bg-[#050505] border-t-2 border-[#FF3E00] relative z-10">
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-3xl text-center">
|
|
<h2 className="text-[40px] md:text-[60px] font-black italic tracking-tighter uppercase mb-4">DOSES DIÁRIAS DE <span className="text-white/40">DISCIPLINA</span></h2>
|
|
<p className="text-white/60 mb-8 font-light text-sm max-w-lg mx-auto">Junte-se a mais de 15.000 pessoas que recebem sacadas de treino, nutrição e mentalidade toda segunda-feira de manhã.</p>
|
|
<form className="flex flex-col sm:flex-row gap-2 max-w-lg mx-auto">
|
|
<input type="email" placeholder="SEU MELHOR E-MAIL" className="flex-grow bg-[#050505] border border-white/20 px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:border-[#FF3E00] transition-colors uppercase text-[10px] tracking-widest font-semibold" />
|
|
<button type="button" className="bg-white text-black font-black uppercase tracking-widest hover:bg-[#FF3E00] hover:text-white transition-colors px-10 py-5 text-[11px]">
|
|
Assinar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|