diff --git a/src/assets/css/ai-guides.css b/src/assets/css/ai-guides.css
new file mode 100644
index 00000000..59267457
--- /dev/null
+++ b/src/assets/css/ai-guides.css
@@ -0,0 +1,131 @@
+/* Styling for the AI-Powered Guides components */
+
+.rfai-container {
+ background-color: var(--color-background-secondary);
+ border-radius: var(--border-radius-rounded);
+ padding: var(--size-medium);
+ margin: var(--size-large) 0;
+ border: 1px solid var(--color-grey-light);
+}
+
+@media (prefers-color-scheme: dark) {
+ .rfai-container {
+ border-color: var(--color-grey-dark);
+ }
+}
+
+.rfai-container h3 {
+ margin-top: 0;
+ font-size: var(--type-large);
+ color: var(--color-text);
+ text-transform: none; /* Override default h3 uppercase */
+}
+
+.rfai-container > p {
+ margin-bottom: var(--size-medium);
+}
+
+.rfai-prompt {
+ border-top: 1px solid var(--color-grey-light);
+ padding: var(--size-small) 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ .rfai-prompt {
+ border-top-color: var(--color-grey-dark);
+ }
+}
+
+.rfai-prompt:first-of-type {
+ border-top: none;
+ padding-top: 0;
+}
+
+.rfai-prompt:last-of-type {
+ padding-bottom: 0;
+}
+
+.rfai-prompt summary {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ list-style: none;
+}
+
+.rfai-prompt summary::-webkit-details-marker {
+ display: none;
+}
+
+.rfai-prompt-title {
+ font-weight: var(--weight-bold);
+ font-size: var(--type-body);
+ font-family: var(--font-body);
+}
+
+.rfai-prompt-subtitle {
+ margin-top: var(--size-3xsmall);
+ font-size: var(--type-small);
+}
+
+.rfai-copy-button {
+ background-color: var(--color-theme);
+ color: var(--color-black);
+ border: none;
+ padding: var(--size-2xsmall) var(--size-small);
+ border-radius: var(--border-radius-rounded);
+ cursor: pointer;
+ font-weight: var(--weight-semi-bold);
+ font-family: var(--font-title);
+ transition: background-color 0.2s, filter 0.2s;
+ white-space: nowrap;
+ text-transform: uppercase;
+}
+
+.rfai-copy-button:hover {
+ filter: brightness(1.1);
+}
+
+.rfai-copy-button.copied {
+ background-color: var(--color-positive);
+ color: var(--color-white);
+}
+
+.rfai-prompt-content {
+ margin-top: var(--size-small);
+}
+
+.rfai-prompt-content pre {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ background-color: rgba(100, 100, 100, 0.1);
+ padding: var(--size-xsmall);
+ border-radius: var(--border-radius-rounded);
+ max-height: 400px;
+ overflow-y: auto;
+ border: none;
+}
+
+.rfai-loader, .rfai-error {
+ color: var(--color-text);
+ font-style: italic;
+ padding: var(--size-xsmall);
+}
+
+.rfai-error a {
+ color: var(--color-link);
+ text-decoration: underline;
+}
+
+/* Accessibility class */
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
\ No newline at end of file
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 5362f00d..b54f59e1 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -8,6 +8,7 @@
@import 'https://github.com/text.css';
@import 'https://github.com/modifiers.css';
@import 'https://github.com/transitions.css';
+@import 'https://github.com/ai-guides.css';
html, body {
min-height: 100vh;
diff --git a/src/components/AIGuidesContainer.vue b/src/components/AIGuidesContainer.vue
new file mode 100644
index 00000000..c4db8c2f
--- /dev/null
+++ b/src/components/AIGuidesContainer.vue
@@ -0,0 +1,24 @@
+
+ Get a head start with our expert-crafted guides. Just copy a prompt and paste it into your favorite AI chatbot.AI-Powered Guides
+
+
+ {{ promptText }}
+