footer

Author: Dheerajjha451

components/Footer.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Github } from 'lucide-react';
+
+const Footer = () => {
+  const handleFeedbackClick = () => {
+    window.location.href = 'mailto:dheerajjha451@gmail.com?subject=Feedback';
+  };
+
+  return (
+    <footer className="border-t border-gray-200 bg-white p-6">
+      <div className="container mx-auto max-w-6xl flex flex-col md:flex-row justify-between items-center">
+        <p className="text-center md:text-left mb-4 md:mb-0">&copy; {new Date().getFullYear()} All rights reserved.</p>
+        <div className="flex items-center space-x-4">
+          <a
+            href="https://github.com/Dheerajjha451/Design2Code"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-black hover:text-bold"
+          >
+            <Github size={30} />
+          </a>
+          <p
+            className="text-blue-400 hover:text-blue-500 cursor-pointer"
+            onClick={handleFeedbackClick}
+          >
+            Feedback
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/Header.jsx

@@ -15,8 +15,8 @@ const Header = () => {
   }
 
   return (
-    <nav className="border-b border-gray-200 sticky top-0 z-50 bg-white">
-      <div className="flex flex-wrap items-center justify-between mx-auto p-4">
+    <nav className="border-b border-gray-200 sticky top-0 z-50 bg-white ">
+      <div className="flex flex-wrap items-center justify-between mx-auto p-4 max-w-[1440px] mx-auto">
         <Link href={'/'} className='flex items-center space-x-3 text-primary font-bold'>
           <img src='/Designer.png' width={32} height={32} alt="Logo" />
           <span className="self-center text-2xl font-semibold whitespace-nowrap">

components/Hero.jsx

@@ -5,7 +5,7 @@ import { useSession } from 'next-auth/react';
 const Hero = () => {
   const { data: session } = useSession();
   return <>
-    <div className="relative overflow-hidden">
+    <div className="relative overflow-hidden max-w-[1440px] mx-auto">
       <div className="pb-16 pt-20 sm:pt-24 lg:pb-24 lg:pt-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">

components/Templates.jsx

@@ -27,7 +27,7 @@ const Templates = () => {
 
   return (
     <>
-      <header className="border-b mb-3">
+      <header className="border-b mb-3 max-w-[1440px] mx-auto">
         <div className="mx-auto px-4 py-4 sm:px-6 lg:px-8">
           <div className="flex flex-wrap items-center justify-between gap-4 sm:gap-6 lg:gap-8">
             <div className="text-center sm:text-left">
@@ -48,7 +48,7 @@ const Templates = () => {
       </header>
 
       {loading && templates.length === 0 && (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-8 ">
           {[...Array(8)].map((_, index) => (
             <div className="flex flex-col space-y-3" key={index}>
               <Skeleton className="h-[125px] w-full rounded-xl" />
@@ -61,7 +61,7 @@ const Templates = () => {
         </div>
       )}
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 lg:gap-8 max-w-[1440px] mx-auto">
         {filterTemplates.map((template) => (
           <TemplateItem key={template.id} template={template} />
         ))}

components/dashboard/DashboardHeader.jsx

@@ -37,7 +37,7 @@ const DashboardHeader = () => {
         </button>
       </div>
 
-      <aside className={`fixed z-40 w-80 h-full bg-gray-50 transition-transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} sm:translate-x-0`}>
+      <aside className={`fixed z-40 w-80 h-100 bg-gray-50 transition-transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} sm:translate-x-0`}>
         <div className="h-full px-3 py-4 overflow-y-auto relative">
           <button
             className="absolute top-4 right-4 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 rounded-lg p-2 sm:hidden"

data.js

@@ -6,8 +6,18 @@ export const webFrameworkNames = [
   'Python',
   'Angular',
   'Nuxt',
-  'Other'
-
+  'Other',
+  'Gatsby',
+  'Ember.js',
+  'Backbone.js',
+  'Laravel',
+  'Django',
+  'Flask',
+  'Ruby on Rails',
+  'ASP.NET',
+  'Express.js',
+  'Meteor',
+   'Other'
 ];
 
 export const cssPackages = [
@@ -22,7 +32,18 @@ export const cssPackages = [
   'UIKit',
   'Skeleton',
   'Styled Components',
-  'Others'
+  'Others',
+  'LESS',
+  'Sass',
+  'PostCSS',
+  'Tachyons',
+  'Milligram',
+  'Pure CSS',
+  'Stylus',
+  'CSS Modules',
+  'Emotion',
+  'Radium',
+   'Other'
 ];
 
 export const useCases = [
@@ -43,4 +64,15 @@ export const useCases = [
   'Real-time Apps',
   'SaaS',
   'Virtual Events',
+  'Business Websites',
+  'News Websites',
+  'Personal Blogs',
+  'Forums',
+  'Learning Management Systems (LMS)',
+  'Social Media Platforms',
+  'Job Boards',
+  'Q&A Websites',
+  'Crowdfunding Platforms',
+  'Streaming Services',
+  'Other'
 ];

pages/_app.js

@@ -4,15 +4,17 @@ import { SpeedInsights } from '@vercel/speed-insights/next';
 import { SessionProvider } from "next-auth/react"
 import { Analytics } from '@vercel/analytics/react';
 import { Poppins } from "next/font/google";
+import Footer from "@/components/Footer";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"] });
 
 export default function App({ Component, pageProps: { session, ...pageProps } }) {
   return <>
     <SessionProvider>
-      <main className={`${poppins.className} max-w-[1440px] mx-auto`}>
+      <main className={`${poppins.className} `}>
         <Header />
         <Component {...pageProps} />
+        <Footer/>
       </main>
     </SessionProvider>
     <SpeedInsights />

pages/dashboard/index.js

@@ -5,9 +5,11 @@ import React from 'react'
 
 const Dashboard = () => {
   return <>
+  <div className=' max-w-[1440px] mx-auto'>
   <DashboardLayout>
     <DashboardContent />
   </DashboardLayout>
+  </div>
   </>
 }
 

pages/dashboard/projects/edit/[...id].js

@@ -19,11 +19,13 @@ const EditTemplate = () => {
   }, [id]);
 
   return <>
+   <div className=' max-w-[1440px] mx-auto'>
     <DashboardLayout>
       {templateInfo && (
         <TemplateForm {...templateInfo} />
       )}
     </DashboardLayout>
+    </div>
   </>
 }
 

pages/dashboard/projects/new/index.js

@@ -4,9 +4,11 @@ import React from 'react'
 
 const NewTemplate = () => {
   return <>
+   <div className=' max-w-[1440px] mx-auto'>
   <DashboardLayout>
     <TemplateForm />
   </DashboardLayout>
+  </div>
   </>
 }