Improved layout codebase

src/app/about/page.tsx

@@ -1,4 +1,3 @@
-import { Layout } from "@/components/layout/Layout";
 import {
   Github,
   Linkedin,
@@ -121,7 +120,7 @@ export default function About() {
   ];
 
   return (
-    <Layout>
+    <>
       {/* Hero */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
         <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
@@ -374,6 +373,6 @@ export default function About() {
           </div>
         </div>
       </section>
-    </Layout>
+    </>
   );
 }

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
 
 export const metadata: Metadata = {
   title: "Selimaj.dev",
@@ -13,7 +15,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased bg-black">{children}</body>
+      <body className="antialiased bg-black">
+        <div className="min-h-screen flex flex-col bg-background dark">
+          <Navbar />
+          <main className="flex-1 pt-16">{children}</main>
+          <Footer />
+        </div>
+      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,4 +1,3 @@
-import { Layout } from "@/components/layout/Layout";
 import { HeroSection } from "@/components/home/HeroSection";
 import { ProjectsSection } from "@/components/home/ProjectsSection";
 import { SkillsSection } from "@/components/home/SkillsSection";
@@ -6,11 +5,11 @@ import { CTASection } from "@/components/home/CTASection";
 
 export default function Home() {
   return (
-    <Layout>
+    <>
       <HeroSection />
       <ProjectsSection />
       <SkillsSection />
       <CTASection />
-    </Layout>
+    </>
   );
 }

src/app/pricing/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Layout } from "@/components/layout/Layout";
 import { Check, ArrowRight, Zap, Crown, Rocket } from "lucide-react";
 import { useState } from "react";
+import { motion } from "framer-motion";
 
 const plans = [
   {
@@ -95,11 +95,47 @@ const services = [
   },
 ];
 
+const pageVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      when: "beforeChildren",
+      staggerChildren: 0.08,
+    },
+  },
+};
+
+const sectionVariants = {
+  hidden: { opacity: 0, y: 24 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.22, 1, 0.36, 1], // premium ease
+    },
+  },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 20, scale: 0.98 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.45,
+      ease: "easeOut",
+    },
+  },
+};
+
 export default function Pricing() {
   const [hoveredPlan, setHoveredPlan] = useState<string | null>(null);
 
   return (
-    <Layout>
+    <>
       {/* Hero */}
       <section className="pt-24 pb-16 bg-background relative overflow-hidden">
         <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
@@ -189,17 +225,34 @@ export default function Pricing() {
                   ))}
                 </ul>
 
-                <a
+                <motion.a
                   href="mailto:[email protected]"
-                  className={`mt-auto w-full flex items-center justify-center gap-2 py-3 rounded-xl font-medium transition-all ${
+                  initial="initial"
+                  whileHover="hover"
+                  className={`group mt-auto w-full flex items-center justify-center gap-2 py-3 rounded-xl font-medium transition-all ${
                     plan.popular
                       ? "bg-accent text-accent-foreground hover:bg-accent/90"
                       : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
                   }`}
                 >
                   {plan.cta}
-                  <ArrowRight className="w-4 h-4" />
+
-                </a>
+                  <motion.span
+                    variants={{
+                      initial: { x: 0 },
+                      hover: {
+                        x: 6,
+                        transition: {
+                          type: "spring",
+                          stiffness: 400,
+                          damping: 20,
+                        },
+                      },
+                    }}
+                  >
+                    <ArrowRight className="w-4 h-4" />
+                  </motion.span>
+                </motion.a>
               </div>
             ))}
           </div>
@@ -263,6 +316,6 @@ export default function Pricing() {
           </div>
         </div>
       </section>
-    </Layout>
+    </>
   );
 }

src/components/layout/Layout.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import { Footer } from "./Footer";
-import { Navbar } from "./Navbar";
-
-interface LayoutProps {
-  children: ReactNode;
-}
-
-export function Layout({ children }: LayoutProps) {
-  return (
-    <div className="min-h-screen flex flex-col bg-background dark">
-      <Navbar />
-      <main className="flex-1 pt-16">{children}</main>
-      <Footer />
-    </div>
-  );
-}