WIP: AI Podcast Maker and YouTube Creator Studio integration

frontend/src/components/PodcastMaker/ui/GlassyCard.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Paper, alpha } from "@mui/material";
+
+export const GlassyCard = motion(Paper);
+
+export const glassyCardSx = {
+  borderRadius: 2,
+  border: "1px solid rgba(0,0,0,0.08)",
+  background: "#ffffff",
+  p: 2.5,
+  boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+};
+

frontend/src/components/PodcastMaker/ui/PrimaryButton.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Button, CircularProgress, Tooltip, alpha } from "@mui/material";
+
+interface PrimaryButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  startIcon?: React.ReactNode;
+  tooltip?: string;
+  ariaLabel?: string;
+}
+
+export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  loading = false,
+  startIcon,
+  tooltip,
+  ariaLabel,
+}) => {
+  const button = (
+    <Button
+      variant="contained"
+      onClick={onClick}
+      disabled={disabled || loading}
+      startIcon={loading ? <CircularProgress size={16} /> : startIcon}
+      aria-label={ariaLabel}
+      sx={{
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        color: "white",
+        fontWeight: 600,
+        textTransform: "none",
+        px: 3,
+        py: 1,
+        "&:hover": {
+          background: "linear-gradient(135deg, #764ba2 0%, #667eea 100%)",
+        },
+        "&:disabled": {
+          background: alpha("#9ca3af", 0.3),
+          color: alpha("#fff", 0.5),
+        },
+      }}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip title={tooltip} arrow>
+      <span>{button}</span>
+    </Tooltip>
+  ) : (
+    button
+  );
+};
+

frontend/src/components/PodcastMaker/ui/SecondaryButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Button, Tooltip, alpha } from "@mui/material";
+
+interface SecondaryButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  startIcon?: React.ReactNode;
+  tooltip?: string;
+  ariaLabel?: string;
+}
+
+export const SecondaryButton: React.FC<SecondaryButtonProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  startIcon,
+  tooltip,
+  ariaLabel,
+}) => {
+  const button = (
+    <Button
+      variant="outlined"
+      onClick={onClick}
+      disabled={disabled}
+      startIcon={startIcon}
+      aria-label={ariaLabel}
+      sx={{
+        borderColor: "rgba(255,255,255,0.2)",
+        color: "rgba(255,255,255,0.9)",
+        textTransform: "none",
+        px: 2.5,
+        py: 0.75,
+        "&:hover": {
+          borderColor: "rgba(255,255,255,0.4)",
+          background: alpha("#fff", 0.05),
+        },
+      }}
+    >
+      {children}
+    </Button>
+  );
+
+  return tooltip ? (
+    <Tooltip title={tooltip} arrow>
+      <span>{button}</span>
+    </Tooltip>
+  ) : (
+    button
+  );
+};
+

frontend/src/components/PodcastMaker/ui/index.ts

@@ -0,0 +1,4 @@
+export { GlassyCard, glassyCardSx } from "./GlassyCard";
+export { PrimaryButton } from "./PrimaryButton";
+export { SecondaryButton } from "./SecondaryButton";
+