first commit

src/widgets/profile/index.ts

@@ -0,0 +1,2 @@
+export { ProfileAvatar } from './ui/ProfileAvatar'
+export { ProfileSection } from './ui/ProfileSection'

src/widgets/profile/ui/ProfileAvatar.module.css

@@ -0,0 +1,84 @@
+.col {
+  width: 200px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--grad-edge), var(--grad-center));
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  color: var(--text-secondary);
+}
+
+.avatar svg {
+  width: 54px;
+  height: 54px;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.avatar:hover .overlay {
+  opacity: 1;
+}
+
+.overlay svg {
+  width: 40px;
+  height: 40px;
+}
+
+.col button {
+  width: 100%;
+}
+
+.addPhoto {
+  width: 100%;
+}
+
+@media (max-width: 1023px) {
+  .addPhoto {
+    display: none;
+  }
+}
+
+@media (max-width: 549px) {
+  .col {
+    width: 90px;
+  }
+
+  .avatar {
+    width: 90px;
+    height: 90px;
+  }
+
+  .avatar svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .overlay svg {
+    width: 22px;
+    height: 22px;
+  }
+}

src/widgets/profile/ui/ProfileAvatar.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@shared/ui'
+import styles from './ProfileAvatar.module.css'
+
+export function ProfileAvatar() {
+  return (
+    <div className={styles.col}>
+      <div className={styles.avatar}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="8" r="4" />
+          <path d="M4 20c0-4 4-7 8-7s8 3 8 7" />
+        </svg>
+        <div className={styles.overlay}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" />
+            <circle cx="12" cy="13" r="4" />
+          </svg>
+        </div>
+      </div>
+      <div className={styles.addPhoto}>
+        <Button variant="ghost">ДОБАВИТЬ ФОТО</Button>
+      </div>
+      <Button variant="danger">УДАЛИТЬ ФОТО</Button>
+    </div>
+  )
+}

src/widgets/profile/ui/ProfileSection.module.css

@@ -0,0 +1,36 @@
+.card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  padding: 24px;
+}
+
+.title {
+  font-size: 16px;
+  color: var(--text-secondary);
+  font-variant: all-small-caps;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+@media (max-width: 649px) {
+  .card {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 499px) {
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

src/widgets/profile/ui/ProfileSection.tsx

@@ -0,0 +1,17 @@
+import styles from './ProfileSection.module.css'
+
+interface Props {
+  title: string
+  children: React.ReactNode
+  actions?: React.ReactNode
+}
+
+export function ProfileSection({ title, children, actions }: Props) {
+  return (
+    <div className={styles.card}>
+      <div className={styles.title}>{title}</div>
+      {children}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  )
+}