Dinn Institutional Website
A modern, performance-focused institutional website for Dinn built with Next.js 14, featuring a dark UI theme and comprehensive SEO optimization.
🚀 Tech Stack
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- CMS: Sanity
- Styling: Vanilla CSS with custom design system
- Deployment: Ready for Vercel/Netlify
📁 Project Structure
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with SEO
│ ├── page.tsx # Home page
│ ├── estoque/ # Inventory solution page
│ ├── monitoramento-de-preco/ # Price monitoring page
│ ├── localizacao-de-produtos/ # Product location page
│ ├── estimativa-de-giro/ # Turnover estimation page
│ ├── estudos-e-pesquisas/ # Research page
│ ├── blog/ # Blog listing & posts
│ ├── contato/ # Contact page
│ ├── sitemap.ts # SEO sitemap
│ └── robots.ts # Robots.txt
├── components/ # Reusable components
│ ├── Header.tsx # Fixed header with navigation
│ ├── Footer.tsx # Footer with links & CTA
│ ├── Hero.tsx # Hero section component
│ ├── CTASection.tsx # Call-to-action sections
│ ├── BenefitsCards.tsx # Benefits grid component
│ ├── FAQ.tsx # Accordion FAQ component
│ └── HowItWorks.tsx # Step-by-step component
├── sanity/ # Sanity CMS configuration
│ ├── schemas/post.ts # Blog post schema
│ └── lib/
│ ├── client.ts # Sanity client
│ └── queries.ts # GROQ queries
└── public/ # Static assets
🎨 Design System
The site uses a custom dark theme with the following colors:
- Background Primary:
#1F2328
- Background Secondary:
#2E343B
- Accent/CTA:
#5625F2
- Text Primary:
#FFFFFF
- Text Secondary:
#B8BFC7
🛠️ Setup & Development
Prerequisites
Installation
# Install dependencies
npm install
# Run development server
npm run dev
Open http://localhost:3000 to view the site.
Sanity CMS Setup
- Create a Sanity project at sanity.io
- Add environment variables:
# .env.local
NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET=production
- Deploy Sanity schema:
cd sanity
npm install
npm run deploy
📄 Pages Overview
Core Pages
- Home (
/): Hero, pain points, features, purpose, social proof, FAQ, CTA
- Contact (
/contato): Demo request form
Solution Pages
All solution pages follow the same structure:
- Hero with benefit
- Problem statement
- What we deliver
- How it works (steps)
- Benefits (cards)
- Use cases
- FAQ
- Final CTA
/estoque - Inventory Management/monitoramento-de-preco - Price Monitoring/localizacao-de-produtos - Product Location/estimativa-de-giro - Turnover Estimation (weekly & monthly)/estudos-e-pesquisas - Custom Research (with GLP-1 example)
Blog
/blog - Blog listing with search and category filters/blog/[slug] - Individual blog posts with JSON-LD Article schema
🔍 SEO Features
- ✅ Comprehensive metadata (title, description, OG, Twitter)
- ✅ JSON-LD structured data (Organization, Article)
- ✅ Dynamic sitemap generation
- ✅ Robots.txt configuration
- ✅ Semantic HTML structure
- ✅ Optimized for Core Web Vitals
🚀 Build & Deploy
# Build for production
npm run build
# Start production server
npm start
📝 Content Placeholders
All content currently uses placeholders marked as "(Texto será fornecido)". Replace these with actual copy before launch.
🎯 Performance Targets
- Lighthouse Performance: 95+
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
📞 Support
For questions or issues, contact the DiWE Ventures Studio team.
Built with ❤️ by DiWE Ventures Studio
