Update navigation and add social links component

apps/container/src/app/app.tsx

@@ -1,21 +1,48 @@
 import * as React from 'react';
-import { Link, Route, Routes } from 'react-router-dom';
+import { NavLink, Route, Routes } from 'react-router-dom';
 
+const HomePage = React.lazy(() => import('../pages/home'));
 const Info = React.lazy(() => import('info/InfoContainer'));
 
 export function App() {
   return (
     <React.Suspense fallback={null}>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/info">Info</Link>
-        </li>
-      </ul>
+      <nav
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          gap: '2rem',
+          margin: '1rem',
+        }}
+      >
+        <NavLink
+          style={({ isActive }) => ({
+            backgroundColor: isActive ? 'lightblue' : 'blue',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            textDecoration: 'none',
+            color: 'white',
+          })}
+          to="/"
+        >
+          Home
+        </NavLink>
+        <NavLink
+          style={({ isActive }) => ({
+            backgroundColor: isActive ? 'lightblue' : 'blue',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            textDecoration: 'none',
+            color: 'white',
+          })}
+          to="/info"
+        >
+          Info
+        </NavLink>
+      </nav>
       <Routes>
-        <Route element={<div>Welcome container</div>} path="/" />
+        <Route element={<HomePage />} path="/" />
         <Route element={<Info />} path="/info" />
       </Routes>
     </React.Suspense>

apps/container/src/components/social-links/index.tsx

@@ -0,0 +1,28 @@
+const socialLinks = [
+  {
+    name: 'LinkedIn',
+    url: 'https://www.linkedin.com/in/serifcolakel/',
+  },
+  {
+    name: 'Twitter',
+    url: 'https://twitter.com/ColakelSerif',
+  },
+];
+
+export default function SocialLinks() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      {socialLinks.map(({ name, url }) => (
+        <a
+          href={url}
+          key={name}
+          rel="noreferrer"
+          style={{ display: 'block', margin: '10px' }}
+          target="_blank"
+        >
+          {name}
+        </a>
+      ))}
+    </div>
+  );
+}

apps/container/src/pages/home/index.tsx

@@ -0,0 +1,21 @@
+import SocialLinks from '../../components/social-links';
+
+export default function HomePage() {
+  return (
+    <div
+      style={{
+        height: '90vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f0f0f0',
+      }}
+    >
+      <h1>Welcome to the Container!</h1>
+      <p>This is the container app that consumes the remote app info.</p>
+      <p>It was created with the Nx plugin for Webpack 5.</p>
+      <SocialLinks />
+    </div>
+  );
+}