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 · 2026-03-04 06:34:48 +00:00 · 2026-03-04 06:34:47 +00:00
2 changed files with 100 additions and 71 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,53 +1,90 @@
 import type { Metadata } from "next";
-import { Public_Sans } from "next/font/google";
 import { Inter } from "next/font/google";
+import "./styles/variables.css";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";

-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
-  title: "Christian Friis - Web Designer | Professional Design Solutions",  description: "Award-winning web designer creating stunning, responsive websites that convert. Expertise in UI/UX design, web development, and digital strategy. Based in Germany.",  keywords: "web designer, web design, UI design, UX design, website designer, professional web designer, responsive design, digital design",  metadataBase: new URL("https://christianfriis.com"),
-  alternates: {
-    canonical: "https://christianfriis.com"
-  },
-  openGraph: {
-    title: "Christian Friis - Web Designer",    description: "Creating beautiful, functional websites that drive results. Professional web design solutions for businesses of all sizes.",    url: "https://christianfriis.com",    siteName: "Christian Friis",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png",        alt: "Christian Friis - Web Designer Portfolio"
-      }
-    ]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Christian Friis - Web Designer",    description: "Award-winning web design solutions for modern businesses",    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
+  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({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${publicSans.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <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={{
            __html: `
@@ -1415,7 +1452,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,11 +5,9 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import AboutMetric from '@/components/sections/about/AboutMetric';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Sparkles, Briefcase, Zap, Users, TrendingUp, Award, Mail } from 'lucide-react';
+import { Sparkles, Briefcase, Zap, Mail, Code, Rocket, CheckCircle } from 'lucide-react';

 export default function LandingPage() {
  return (
@@ -31,7 +29,7 @@ export default function LandingPage() {
          navItems={[
            { name: "Work", id: "portfolio" },
            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
+            { name: "Deployment", id: "deployment" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Web Designer"
@@ -122,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,
@@ -136,33 +134,28 @@ export default function LandingPage() {
        />
      </div>

-      <div id="about" data-section="about">
-        <AboutMetric
-          title="I'm a passionate web designer dedicated to creating digital experiences that inspire and convert. With expertise in modern web design trends, user experience, and digital strategy, I help brands establish a powerful online presence."
+      <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}
-          metricsAnimation="slide-up"
-          metrics={[
-            { icon: Zap, label: "Projects Completed", value: "50+" },
-            { icon: Users, label: "Happy Clients", value: "30+" },
-            { icon: TrendingUp, label: "Years Experience", value: "5+" },
-            { icon: Award, label: "Design Awards", value: "8" }
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardFifteen
-          testimonial="Christian's web design expertise transformed our online presence. His attention to detail, creative vision, and collaborative approach made the entire process smooth and enjoyable. Our website has become a powerful business asset."
-          rating={5}
-          author="Sarah Mitchell, CEO - TechFlow"
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
-          useInvertedBackground={false}
-          avatars={[
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-busi-1772566666692-7dbdb570.png", alt: "Sarah Mitchell" },
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-crea-1772566668076-76e214eb.png", alt: "John Davis" },
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-fema-1772566667828-5111d03b.png", alt: "Emily Rodriguez" },
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-male-1772566668212-bf31db96.png", alt: "Michael Chen" }
+          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>
@@ -192,7 +185,7 @@ export default function LandingPage() {
              items: [
                { label: "Work", href: "#portfolio" },
                { label: "Services", href: "#services" },
-                { label: "About", href: "#about" }
+                { label: "Deployment", href: "#deployment" }
              ]
            },
            {
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
bender	80f65884c4	Update src/app/page.tsx	2026-03-04 06:34:48 +00:00
bender	8187c80e3d	Update src/app/layout.tsx	2026-03-04 06:34:47 +00:00
bender	32e38fdef6	Merge version_3 into main Merge version_3 into main	2026-03-04 05:23:06 +00:00
bender	81f757faae	Update src/app/page.tsx	2026-03-04 05:23:02 +00:00
bender	eea7f2acdb	Update src/app/layout.tsx	2026-03-04 05:23:01 +00:00
bender	66f8b722d9	Merge version_2 into main Merge version_2 into main	2026-03-04 05:19:30 +00:00
bender	c285b6ad06	Update src/app/page.tsx	2026-03-04 05:19:26 +00:00
bender	ca7ad60846	Update src/app/layout.tsx	2026-03-04 05:19:25 +00:00
bender	5eee5a4d60	Merge version_1 into main Merge version_1 into main	2026-03-03 20:16:20 +00:00
bender	9d96db6387	Merge version_1 into main Merge version_1 into main	2026-03-03 20:04:24 +00:00
bender	6c0093db15	Merge version_1 into main Merge version_1 into main	2026-03-03 19:43:08 +00:00
bender	cb6b54a964	Merge version_1 into main Merge version_1 into main	2026-03-03 19:38:30 +00:00