Update src/app/page.tsx

Update src/app/layout.tsx
2026-03-04 06:36:49 +00:00 · 2026-03-04 06:35:38 +00:00 · 2026-03-04 06:35:38 +00:00 · 2026-03-04 06:34:51 +00:00
2 changed files with 107 additions and 27 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,7 +6,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
-  title: "Christian Friis - Web Designer",  description: "Professional web designer creating stunning digital experiences"
+  title: "Christian Friis - Web Designer",  description: "Professional web designer creating stunning digital experiences. Deploy your site easily with Next.js, Vercel, or any Node.js hosting platform."
 };

 export default function RootLayout({
@@ -16,6 +16,74 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
+      <head>
+        <script>
+          {`
+            window.deploymentGuide = {
+              platforms: [
+                {
+                  name: 'Vercel',
+                  steps: [
+                    '1. Push your code to GitHub',
+                    '2. Go to vercel.com and sign up',
+                    '3. Click "New Project" and select your repository',
+                    '4. Vercel auto-detects Next.js and deploys automatically',
+                    '5. Your site is live at vercel.app domain'
+                  ]
+                },
+                {
+                  name: 'Netlify',
+                  steps: [
+                    '1. Push your code to GitHub',
+                    '2. Go to netlify.com and sign up',
+                    '3. Click "New site from Git" and select your repository',
+                    '4. Set build command: npm run build',
+                    '5. Set publish directory: .next/standalone',
+                    '6. Deploy and get your live domain'
+                  ]
+                },
+                {
+                  name: 'Self-Hosted (Node.js)',
+                  steps: [
+                    '1. Get a server (Digital Ocean, AWS, etc)',
+                    '2. Clone your repository on the server',
+                    '3. Run: npm install && npm run build',
+                    '4. Set NODE_ENV=production',
+                    '5. Start with: npm start or use PM2',
+                    '6. Set up nginx/Apache as reverse proxy',
+                    '7. Configure your domain DNS'
+                  ]
+                },
+                {
+                  name: 'Docker Deployment',
+                  steps: [
+                    '1. Create a Dockerfile in your project root',
+                    '2. Build image: docker build -t myapp .',
+                    '3. Run container: docker run -p 3000:3000 myapp',
+                    '4. Push to Docker Hub or container registry',
+                    '5. Deploy to cloud platforms (AWS ECS, GCP, etc)'
+                  ]
+                }
+              ],
+              environmentVariables: [
+                'NODE_ENV=production',
+                'NEXT_PUBLIC_API_URL=your-api-url',
+                'DATABASE_URL=your-database-url'
+              ],
+              postDeploymentChecklist: [
+                'Test all navigation links',
+                'Verify responsive design on mobile',
+                'Check email forms work correctly',
+                'Confirm images load properly',
+                'Test contact forms submission',
+                'Verify SEO meta tags',
+                'Check page load performance',
+                'Set up SSL certificate (HTTPS)'
+              ]
+            };
+          `}
+        </script>
+      </head>
      <body className={inter.className}>{children}
        <script
          dangerouslySetInnerHTML={{
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,25 +7,9 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Sparkles, Briefcase, Zap, Mail } from 'lucide-react';
+import { Sparkles, Briefcase, Zap, Mail, Code, Rocket, CheckCircle } from 'lucide-react';

 export default function LandingPage() {
-  const handleButtonClick = (href: string) => {
-    if (href.startsWith('#')) {
-      // Internal anchor link
-      const element = document.querySelector(href);
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth' });
-      }
-    } else if (href.startsWith('mailto:') || href.startsWith('tel:')) {
-      // Email or phone link
-      window.location.href = href;
-    } else if (href.startsWith('http')) {
-      // External link
-      window.open(href, '_blank');
-    }
-  };
-
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
@@ -45,6 +29,7 @@ export default function LandingPage() {
          navItems={[
            { name: "Work", id: "portfolio" },
            { name: "Services", id: "services" },
+            { name: "Deployment", id: "deployment" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Web Designer"
@@ -61,8 +46,8 @@ export default function LandingPage() {
          tagAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          buttons={[
-            { text: "View My Work", onClick: () => handleButtonClick('#portfolio') },
-            { text: "Get Started", onClick: () => handleButtonClick('#contact') }
+            { text: "View My Work", href: "#portfolio" },
+            { text: "Get Started", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          carouselItems={[
@@ -135,7 +120,7 @@ export default function LandingPage() {
          features={[
            {
              id: 1,
-              tag: "Design",              title: "Web Design",              subtitle: "Beautiful, intuitive interfaces that engage users.",              description: "I create custom web designs that reflect your brand identity and captivate your audience. From concept to execution, every pixel is carefully crafted for optimal user experience and visual impact.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png",              imageAlt: "Web design workspace"
+              tag: "Design",              title: "Web Design",              subtitle: "Beautiful, intuitive interfaces that engage users.",              description: "I create custom web designs that reflect your brand identity and captivate your audience. From concept to execution, every pixel is carefully crafted for optimal user experience and visual impact.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=1",              imageAlt: "Web design workspace"
            },
            {
              id: 2,
@@ -149,6 +134,32 @@ export default function LandingPage() {
        />
      </div>

+      <div id="deployment" data-section="deployment">
+        <FeatureCardNineteen
+          title="How to Deploy Your Site"
+          description="Multiple deployment options to get your website live quickly and reliably."
+          tag="Deployment Guide"
+          tagIcon={Rocket}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              tag: "Recommended",              title: "Deploy on Vercel",              subtitle: "Fastest way to deploy Next.js projects.",              description: "1. Push your code to GitHub\n2. Sign up at vercel.com\n3. Connect your repository\n4. Vercel auto-detects Next.js and deploys automatically\n5. Your site is live instantly with automatic SSL and CDN",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=2",              imageAlt: "Vercel deployment"
+            },
+            {
+              id: 2,
+              tag: "Alternative",              title: "Deploy on Netlify",              subtitle: "Great alternative with easy GitHub integration.",              description: "1. Push code to GitHub\n2. Sign up at netlify.com\n3. Select 'New site from Git'\n4. Build command: npm run build\n5. Publish directory: .next/standalone\n6. Deploy and get your domain",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3",              imageAlt: "Netlify deployment"
+            },
+            {
+              id: 3,
+              tag: "Self-Hosted",              title: "Deploy with Docker",              subtitle: "Deploy anywhere with containerization.",              description: "1. Create Dockerfile in project root\n2. Build image: docker build -t myapp .\n3. Run: docker run -p 3000:3000 myapp\n4. Push to Docker Hub\n5. Deploy to AWS ECS, Google Cloud, or DigitalOcean"
+            }
+          ]}
+        />
+      </div>
+
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Work Together"
@@ -157,8 +168,8 @@ export default function LandingPage() {
          title="Ready to Elevate Your Online Presence?"
          description="Let's collaborate to create a website that not only looks stunning but also drives results. I'm excited to bring your vision to life."
          buttons={[
-            { text: "Contact Me", onClick: () => handleButtonClick('mailto:friischristian35@gmail.com') },
-            { text: "Call: +49 176 61169654", onClick: () => handleButtonClick('tel:+49176611696541') }
+            { text: "Contact Me", href: "mailto:friischristian35@gmail.com" },
+            { text: "Call: +49 176 61169654", href: "tel:+49176611696541" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
@@ -172,14 +183,15 @@ export default function LandingPage() {
          columns={[
            {
              items: [
-                { label: "Work", onClick: () => handleButtonClick('#portfolio') },
-                { label: "Services", onClick: () => handleButtonClick('#services') }
+                { label: "Work", href: "#portfolio" },
+                { label: "Services", href: "#services" },
+                { label: "Deployment", href: "#deployment" }
              ]
            },
            {
              items: [
-                { label: "Email", onClick: () => handleButtonClick('mailto:friischristian35@gmail.com') },
-                { label: "Phone", onClick: () => handleButtonClick('tel:+49176611696541') },
+                { label: "Email", href: "mailto:friischristian35@gmail.com" },
+                { label: "Phone", href: "tel:+49176611696541" },
                { label: "LinkedIn", href: "#" }
              ]
            },
Author	SHA1	Message	Date
bender	d4b95179b5	Update src/app/page.tsx	2026-03-04 06:36:49 +00:00
bender	30cad703bf	Update src/app/page.tsx	2026-03-04 06:35:38 +00:00
bender	cb9544518a	Update src/app/layout.tsx	2026-03-04 06:35:38 +00:00
bender	95a0cf51e3	Merge version_4 into main Merge version_4 into main	2026-03-04 06:34:51 +00:00