#FEAT-016: template's features overview page (#79)

* Feat: add new link to features page and remove unused * Feat: add features overview with new badge * Doc: features of templates * Chore: update coming soon to new badge * Style: remove new badge
Pet3r1512 · Nov 13, 2024 · a6c45ae · a6c45ae
1 parent 5aaf7d7
commit a6c45ae
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 48 deletions.
diff --git a/src/components/Layouts/Header/Navbar.tsx b/src/components/Layouts/Header/Navbar.tsx
@@ -26,29 +26,6 @@ export const BadgePattern: Record<string, React.ReactNode> = {
   coming: <ComingSoon className={badgeClassName} />,
 };
 
-export const navs = [
-  {
-    name: "Documents",
-    href: "/docs/introduction",
-  },
-  {
-    name: "Contribution",
-    href: "https://github.com/Pet3r1512/DevIniter/issues/new?labels=enhancement&template=feature-request---.md",
-  },
-  {
-    name: "Live Demo",
-    href: "#demo",
-    isHash: true,
-    status: "new",
-  },
-  {
-    name: "Release Notes",
-    href: "#",
-    isHash: true,
-    status: "coming",
-  },
-];
-
 const templates: {
   title: string;
   image: string;
@@ -88,6 +65,12 @@ const explores: {
     isHash: true,
     description: "Explore the powerful technologies behind our templates",
   },
+  {
+    title: "Templates Features",
+    href: "/features",
+    description:
+      "Discover all the built-in features and capabilities of our templates",
+  },
 ];
 
 const triggerClassName = "!bg-transparent dark:text-white lg:text-lg";
@@ -119,9 +102,7 @@ export function Navbar() {
                     href="/"
                   >
                     <Logo />
-                    <div className="mb-2 mt-4 text-lg font-medium flex-1">
-                      DevIniter
-                    </div>
+                    <div className="flex-1" />
                     <p className="text-sm leading-tight text-muted-foreground">
                       Blazing Starter Templates for Developers
                     </p>
@@ -133,7 +114,7 @@ export function Navbar() {
                   "Learn about DevIniter's core concepts, features and the technology stack we use."
                 }
               </ListItem>
-              <ListItem href="/docs/get_started" title="Overview">
+              <ListItem href="/docs/get_started" title="Documents">
                 Step-by-step guide to set up your project and understand the
                 project structure.
               </ListItem>

diff --git a/src/pages/_meta.js b/src/pages/_meta.js
@@ -1,6 +1,16 @@
+import NewBadge from "../components/Layouts/Badges/NewBadge";
+
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   docs: "Documentation",
-  "free-for-devs": "Free For Devs",
+  features: {
+    title: (
+      <div className="flex items-center w-full justify-between relative">
+        <p>Features Overview</p>
+        <NewBadge />
+      </div>
+    ),
+  },
   release: "Release Notes",
+  "free-for-devs": "Free For Devs",
 };
diff --git a/src/pages/docs/_meta.js b/src/pages/docs/_meta.js
@@ -1,16 +1,7 @@
-import NewBadge from "../../components/Layouts/Badges/NewBadge";
-
 /* eslint-disable import/no-anonymous-default-export */
 export default {
   introduction: "Introduction",
   get_started: "Getting Started",
   installation: "Installation",
-  template_structure: {
-    title: (
-      <div className="flex items-center w-full justify-between relative">
-        <p>Template Structure</p>
-        <NewBadge className="md:absolute md:-top-4 md:-right-14" />
-      </div>
-    ),
-  },
+  template_structure: "Template Structure",
 };
diff --git a/src/pages/docs/installation.mdx b/src/pages/docs/installation.mdx
@@ -4,6 +4,7 @@ import TipsBlock from "../../components/Documents/TipsBlock.tsx"
 import ScriptBlock from "../../components/Documents/ScriptBlock.tsx"
 import HighlightedText from "../../components/Documents/HighlightedText.tsx"
 import ComingSoon from "../../components/Layouts/Badges/ComingSoon.tsx"
+import NewBadge from "../../components/Layouts/Badges/NewBadge.tsx"
 import FrameworkGuide from "../../components/Documents/FrameworkGuide.tsx"
 
 # Installation
@@ -47,13 +48,6 @@ After running this command, our CLI will guide you through the setup process:
 
 If you’re new to DevIniter, refer to our <HighlightedText content={{href: "/docs/template_structure", text: "Template Structure"}} /> guide for a comprehensive overview and to enhance your experience with our templates.
 
-### Next Steps
-
-After successful installation:
-1. Review our guide <HighlightedText content={{href: "/docs/getting-started", text: "Getting Started"}} />
-2. Explore the <HighlightedText content={{href: "/docs/template_structure", text: "Template Structure"}} />
-3. Check out our <HighlightedText content={{href: "", text: "Features Overview"}} /> <ComingSoon />
-
 
 ## Installing Dependencies
 
@@ -148,12 +142,12 @@ Error: The engine "node" is incompatible with this module
 - Join our <HighlightedText content={{href: "https://discord.gg/deviniter", text: "Discord community"}} /> <ComingSoon />
 - Open an issue on our <HighlightedText content={{href: "https://github.com/Pet3r1512/DevIniter/issues/new?labels=bug&template=bug-report---.md", text: "GitHub repository"}} />
 
-### Next Steps
+## Next Steps
 
 After successful installation:
-1. Review our <HighlightedText content={{href: "/docs/getting-started", text: "Getting Started"}} /> guide
+1. Review our guide <HighlightedText content={{href: "/docs/getting-started", text: "Getting Started"}} />
 2. Explore the <HighlightedText content={{href: "/docs/template_structure", text: "Template Structure"}} />
-3. Check out our <HighlightedText content={{href: "", text: "Features Overview"}} /> <ComingSoon />
+3. Check out our <HighlightedText content={{href: "/features", text: "Features Overview"}} /> <NewBadge />
 
 ## Templates Structure
 

diff --git a/src/pages/features.mdx b/src/pages/features.mdx
@@ -0,0 +1,39 @@
+# Template Core Features
+
+## Modern Development Stack
+- Built with React.js v19 for optimal performance and SEO
+- TypeScript support for enhanced code quality and type-safe
+- Tailwind and Shadcn for rapid, responsive styling
+
+## Developer Experience
+- Hot reloading for instant feedback
+- Pre-configured ESLint and Prettier
+- Automated testing setup with Vitest
+- Husky with Prettier pre-commit hooks:
+  - Automatic code formatting on commit
+  - Lint checks before commits
+  - Consistent code style enforcement
+  - Prevents commits with formatting issues
+
+## Performance Optimized
+- Automatic image optimization
+- Built-in code splitting
+- Server-side rendering capabilities
+- Optimized production builds
+
+## Built-in Components
+- Responsive navigation
+- Dark/Light mode toggle
+- SEO-friendly metadata handling
+- Loading states and error boundaries
+
+## Deployment Ready
+- Zero-config deployment and CI/CD on Vercel
+- Environment variable management
+- Production build optimization
+
+## Documentation
+- Comprehensive setup guide
+- Component documentation
+- Best practices and conventions
+- Customization examples