phase 6 ,7,9

frontend/src/components/shared/layouts/BlogLayout.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface BlogLayoutProps {
+  header?: ReactNode;
+  sidebar?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+  sidebarPosition?: 'left' | 'right';
+}
+
+export function BlogLayout({ 
+  header, 
+  sidebar, 
+  mainContent,
+  footer,
+  sidebarPosition = 'right'
+}: BlogLayoutProps) {
+  return (
+    <div className={`shared-layout shared-layout--blog shared-layout--sidebar-${sidebarPosition}`}>
+      {header && <header className="shared-layout__header">{header}</header>}
+      <div className="shared-layout__content">
+        {sidebar && sidebarPosition === 'left' && (
+          <aside className="shared-layout__sidebar">{sidebar}</aside>
+        )}
+        <main className="shared-layout__main">{mainContent}</main>
+        {sidebar && sidebarPosition === 'right' && (
+          <aside className="shared-layout__sidebar">{sidebar}</aside>
+        )}
+      </div>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+

frontend/src/components/shared/layouts/CorporateLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface CorporateLayoutProps {
+  header?: ReactNode;
+  navigation?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+  sidebar?: ReactNode;
+}
+
+export function CorporateLayout({ 
+  header, 
+  navigation,
+  mainContent,
+  footer,
+  sidebar
+}: CorporateLayoutProps) {
+  return (
+    <div className="shared-layout shared-layout--corporate">
+      {header && <header className="shared-layout__header">{header}</header>}
+      {navigation && <nav className="shared-layout__navigation">{navigation}</nav>}
+      <div className="shared-layout__content">
+        <main className="shared-layout__main">{mainContent}</main>
+        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
+      </div>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+

frontend/src/components/shared/layouts/EcommerceLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface EcommerceLayoutProps {
+  header?: ReactNode;
+  navigation?: ReactNode;
+  sidebar?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+}
+
+export function EcommerceLayout({ 
+  header, 
+  navigation,
+  sidebar, 
+  mainContent,
+  footer 
+}: EcommerceLayoutProps) {
+  return (
+    <div className="shared-layout shared-layout--ecommerce">
+      {header && <header className="shared-layout__header">{header}</header>}
+      {navigation && <nav className="shared-layout__navigation">{navigation}</nav>}
+      <div className="shared-layout__content">
+        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
+        <main className="shared-layout__main">{mainContent}</main>
+      </div>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+

frontend/src/components/shared/layouts/MagazineLayout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface MagazineLayoutProps {
+  header?: ReactNode;
+  featured?: ReactNode;
+  sidebar?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+}
+
+export function MagazineLayout({ 
+  header, 
+  featured,
+  sidebar, 
+  mainContent,
+  footer 
+}: MagazineLayoutProps) {
+  return (
+    <div className="shared-layout shared-layout--magazine">
+      {header && <header className="shared-layout__header">{header}</header>}
+      {featured && <section className="shared-layout__featured">{featured}</section>}
+      <div className="shared-layout__content">
+        <main className="shared-layout__main">{mainContent}</main>
+        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
+      </div>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+

frontend/src/components/shared/layouts/PortfolioLayout.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import './layouts.css';
+
+export interface PortfolioLayoutProps {
+  header?: ReactNode;
+  mainContent: ReactNode;
+  footer?: ReactNode;
+  fullWidth?: boolean;
+}
+
+export function PortfolioLayout({ 
+  header, 
+  mainContent,
+  footer,
+  fullWidth = false
+}: PortfolioLayoutProps) {
+  return (
+    <div className={`shared-layout shared-layout--portfolio ${fullWidth ? 'shared-layout--fullwidth' : ''}`}>
+      {header && <header className="shared-layout__header">{header}</header>}
+      <main className="shared-layout__main">{mainContent}</main>
+      {footer && <footer className="shared-layout__footer">{footer}</footer>}
+    </div>
+  );
+}
+

frontend/src/components/shared/layouts/index.ts

@@ -2,5 +2,14 @@ export { DefaultLayout } from './DefaultLayout';
 export type { DefaultLayoutProps } from './DefaultLayout';
 export { MinimalLayout } from './MinimalLayout';
 export type { MinimalLayoutProps } from './MinimalLayout';
-
+export { MagazineLayout } from './MagazineLayout';
+export type { MagazineLayoutProps } from './MagazineLayout';
+export { EcommerceLayout } from './EcommerceLayout';
+export type { EcommerceLayoutProps } from './EcommerceLayout';
+export { PortfolioLayout } from './PortfolioLayout';
+export type { PortfolioLayoutProps } from './PortfolioLayout';
+export { BlogLayout } from './BlogLayout';
+export type { BlogLayoutProps } from './BlogLayout';
+export { CorporateLayout } from './CorporateLayout';
+export type { CorporateLayoutProps } from './CorporateLayout';