chore(web): refractor

frontend/src/app/features/about/about-page.component.html

@@ -0,0 +1,42 @@
+<section class="about-section">
+  <div class="container split-layout">
+    
+    <!-- Left Column: Content -->
+    <div class="text-content">
+      <p class="eyebrow">{{ 'ABOUT.EYEBROW' | translate }}</p>
+      <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'ABOUT.SUBTITLE' | translate }}</p>
+      
+      <div class="divider"></div>
+
+      <p class="description">{{ 'ABOUT.HOW_TEXT' | translate }}</p>
+
+      <div class="tags-container">
+        <span class="tag">{{ 'ABOUT.PILL_1' | translate }}</span>
+        <span class="tag">{{ 'ABOUT.PILL_2' | translate }}</span>
+        <span class="tag">{{ 'ABOUT.PILL_3' | translate }}</span>
+        <span class="tag">{{ 'ABOUT.SERVICE_1' | translate }}</span>
+        <span class="tag">{{ 'ABOUT.SERVICE_2' | translate }}</span>
+      </div>
+    </div>
+
+    <!-- Right Column: Visuals -->
+    <div class="visual-content">
+      <div class="photo-card card-1">
+        <div class="placeholder-img"></div>
+        <div class="member-info">
+          <span class="member-name">Member 1</span>
+          <span class="member-role">Founder</span>
+        </div>
+      </div>
+      <div class="photo-card card-2">
+        <div class="placeholder-img"></div>
+        <div class="member-info">
+          <span class="member-name">Member 2</span>
+          <span class="member-role">Co-Founder</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>