{"id":4658,"date":"2026-01-16T22:23:25","date_gmt":"2026-01-16T22:23:25","guid":{"rendered":"https:\/\/itsabout.io\/?page_id=4658"},"modified":"2026-01-16T23:10:38","modified_gmt":"2026-01-16T23:10:38","slug":"example","status":"publish","type":"page","link":"https:\/\/itsabout.io\/sr\/example\/","title":{"rendered":"Example"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4658\" class=\"elementor elementor-4658\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e09ca3 e-flex e-con-boxed e-con e-parent\" data-id=\"7e09ca3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5174e6a elementor-widget elementor-widget-html\" data-id=\"5174e6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    \r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    fontFamily: {\r\n                        sans: ['Inter', 'sans-serif'],\r\n                    },\r\n                    colors: {\r\n                        summaiOrange: {\r\n                            50: '#FFF5F3',\r\n                            100: '#FFE8E3',\r\n                            200: '#FFD4CA',\r\n                            300: '#FFB2A2',\r\n                            400: '#FF8772',\r\n                            500: '#F8704E', \r\n                            600: '#E05835',\r\n                            700: '#BB3F22',\r\n                            800: '#9B331C',\r\n                            900: '#7D2D1B',\r\n                            950: '#46170D',\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        .custom-scrollbar::-webkit-scrollbar {\r\n            height: 6px;\r\n            width: 6px;\r\n        }\r\n        .custom-scrollbar::-webkit-scrollbar-thumb {\r\n            background-color: #d1d5db;\r\n            border-radius: 9999px;\r\n        }\r\n        .icon-chevron-down::before { content: \"\\f078\"; font-family: \"Font Awesome 6 Free\"; font-weight: 900; font-style: normal; font-size: 12px;}\r\n        .icon-chevron-up::before { content: \"\\f077\"; font-family: \"Font Awesome 6 Free\"; font-weight: 900; font-style: normal; font-size: 12px;}\r\n        .icon-chevron-left::before { content: \"\\f053\"; font-family: \"Font Awesome 6 Free\"; font-weight: 900; font-style: normal; font-size: 12px;}\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-white min-h-screen\">\r\n\r\n    <div class=\"w-full min-h-screen pb-32 animate-in fade-in slide-in-from-bottom-4 duration-700 font-sans text-gray-900\">\r\n\r\n        <div class=\"max-w-[1450px] mx-auto px-4 py-8 space-y-8\">\r\n    \r\n           \r\n    \r\n            <div class=\"space-y-2\">\r\n                <div class=\"flex items-center gap-3\">\r\n                    <h1 class=\"text-3xl font-bold text-gray-900\">Insights Report<\/h1>\r\n                    <span class=\"px-2 py-1 rounded bg-gray-900 text-white text-xs font-bold uppercase tracking-wider\">\r\n                        MARKETING INSIGHTS\r\n                    <\/span>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2 text-gray-500 text-sm\">\r\n                    <span class=\"w-1 h-1 rounded-full bg-gray-300\"><\/span>\r\n                    <span>February 14, 2024<\/span>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <div class=\"bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden transition-all duration-300 print:!border-none print:shadow-none\">\r\n    \r\n                <div class=\"p-5 flex items-center justify-between border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors select-none print:hidden\">\r\n                    <div class=\"flex items-center gap-4\">\r\n                        <div class=\"w-12 h-12 rounded-lg bg-gray-100 overflow-hidden border border-gray-200 relative shadow-sm\">\r\n                            <img decoding=\"async\" src=\"https:\/\/front.itsabout.io\/assets\/img\/mail\/coffeshoplogo.png\" class=\"w-full h-full object-cover\" alt=\"Post thumbnail\" \/>\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"flex items-center gap-2\">\r\n                                <h2 class=\"font-bold text-gray-900 text-lg\">Aroma & Encuentro<\/h2>\r\n                            <\/div>\r\n                            <div class=\"text-xs text-gray-500 font-medium flex items-center gap-2\">\r\n                                <span class=\"capitalize\">Facebook Photo<\/span>\r\n                                <span>\u2022<\/span>\r\n                                <span>14 Feb 2024<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"flex items-center gap-8 mr-2\">\r\n                        <div class=\"hidden sm:flex flex-col items-end\">\r\n                            <span class=\"text-[10px] text-gray-400 uppercase font-bold tracking-wider\">Comments<\/span>\r\n                            <span class=\"text-sm font-bold text-gray-900\">342<\/span>\r\n                        <\/div>\r\n                        <div class=\"hidden sm:flex flex-col items-end\">\r\n                            <span class=\"text-[10px] text-gray-400 uppercase font-bold tracking-wider\">Response Rate<\/span>\r\n                            <span class=\"text-sm font-bold text-blue-600\">98%<\/span>\r\n                        <\/div>\r\n                        <div class=\"hidden sm:flex flex-col items-end\">\r\n                            <span class=\"text-[10px] text-gray-400 uppercase font-bold tracking-wider\">Sentiment<\/span>\r\n                            <span class=\"text-sm font-bold text-green-600\">Positive<\/span>\r\n                        <\/div>\r\n                        <div class=\"text-gray-400\">\r\n                            <i class=\"icon-chevron-up\"><\/i>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"bg-gray-50\/30 border-b border-gray-100 transition-all duration-500 ease-in-out overflow-hidden max-h-[500px] opacity-100\">\r\n    \r\n                    <div class=\"p-6 grid grid-cols-1 md:grid-cols-3 gap-8 print:block print:space-y-4\">\r\n                        <div class=\"h-48 rounded-xl overflow-hidden border border-gray-200 shadow-md relative group print:h-auto print:mb-4\">\r\n                            <img decoding=\"async\" src=\"https:\/\/front.itsabout.io\/assets\/img\/mail\/coffe_shop_post_img.jpg\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 print:w-64\" alt=\"Post full\" \/>\r\n                        <\/div>\r\n    \r\n                        <div class=\"space-y-4 py-2\">\r\n                            <div>\r\n                                <h3 class=\"text-xs font-bold text-gray-400 uppercase tracking-wider mb-2\">Post Text<\/h3>\r\n                                <p class=\"text-sm text-gray-700 leading-relaxed italic border-l-2 border-summaiOrange-200 pl-3\">\r\n                                    \"Looking for the perfect place for that first date or to celebrate an anniversary? \u2764\ufe0f\u2615 At Aroma & Encuentro we create the ideal atmosphere: warm lighting and the best coffee. Tag your favorite person. \ud83d\udc47\"\r\n                                <\/p>\r\n                            <\/div>\r\n                            <div class=\"flex flex-wrap gap-2 print:hidden\">\r\n                                <span class=\"px-2 py-1 bg-blue-50 text-blue-700 rounded-md text-xs font-medium border border-blue-100\">#Facebook<\/span>\r\n                                <span class=\"px-2 py-1 bg-gray-100 text-gray-600 rounded-md text-xs font-medium border border-gray-200\">Couples Campaign<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n    \r\n                        <div class=\"space-y-6 py-2 border-l border-gray-200 pl-8 border-dashed print:!border-none print:pl-0\">\r\n                            <div class=\"grid grid-cols-2 gap-4\">\r\n                                <div>\r\n                                    <div class=\"text-xs text-gray-400 font-medium uppercase mb-1\">Total Comments<\/div>\r\n                                    <div class=\"text-xl font-bold text-gray-900 flex items-center gap-2\">342<\/div>\r\n                                <\/div>\r\n                                <div>\r\n                                    <div class=\"text-xs text-gray-400 font-medium uppercase mb-1\">Analyzed<\/div>\r\n                                    <div class=\"text-xl font-bold text-gray-900 flex items-center gap-2\">342<\/div>\r\n                                <\/div>\r\n                                <div>\r\n                                    <div class=\"text-xs text-gray-400 font-medium uppercase mb-1\">Publication Date<\/div>\r\n                                    <div class=\"text-sm font-bold text-gray-700 flex items-center gap-2\">\r\n                                        <i class=\"fa-regular fa-calendar text-gray-400\"><\/i>\r\n                                        14 Feb, 2024\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div>\r\n                                    <div class=\"text-xs text-gray-400 font-medium uppercase mb-1\">Updated<\/div>\r\n                                    <div class=\"text-sm font-bold text-gray-700 flex items-center gap-2\">\r\n                                        <i class=\"fa-regular fa-clock text-gray-400\"><\/i>\r\n                                        2 hours ago\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"pt-4 border-t border-gray-100 print:hidden\">\r\n                                <div class=\"flex justify-between items-center text-xs text-gray-500\">\r\n                                    <span>Est. Engagement Rate<\/span>\r\n                                    <span class=\"font-bold text-summaiOrange-600\">8.5%<\/span>\r\n                                <\/div>\r\n                                <div class=\"w-full bg-gray-100 rounded-full h-1.5 mt-2\">\r\n                                    <div class=\"bg-summaiOrange-500 h-1.5 rounded-full\" style=\"width: 65%\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <section class=\"bg-white border border-gray-200 rounded-2xl p-8 shadow-sm print:!border-none print:shadow-none\">\r\n                <div class=\"flex flex-col gap-4\">\r\n                    <div class=\"flex items-center gap-3 mb-1\">\r\n                        <h3 class=\"text-xs font-bold text-summaiOrange-500 uppercase tracking-wider\">\r\n                            Executive Summary\r\n                        <\/h3>\r\n                    <\/div>\r\n                    <h2 class=\"text-2xl md:text-3xl font-bold text-gray-900 tracking-tight\">\r\n                        Resounding success in the young couples segment\r\n                    <\/h2>\r\n                    <p class=\"text-gray-700 leading-relaxed\">\r\n                        The \"Coffee Dates\" campaign has resonated strongly with the 18-35 demographic. The combination of warm imagery and a direct call to action (\"Tag your favorite person\") generated a comment volume 40% higher than the monthly average, positioning the brand as an ideal \"third place\" for casual intimacy.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/section>\r\n    \r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 print:block print:space-y-6\">\r\n    \r\n                <div class=\"lg:col-span-1 bg-gray-900 rounded-2xl p-8 text-white shadow-xl flex flex-col justify-between relative overflow-hidden group print:bg-white print:text-gray-900 print:border print:border-gray-200\">\r\n                    <div class=\"relative z-10\">\r\n                        <div class=\"flex items-center gap-3 mb-8\">\r\n                            <h3 class=\"text-sm font-bold text-summaiOrange-100 uppercase tracking-wider print:text-summaiOrange-600\">\r\n                                Behavioral Intelligence\r\n                            <\/h3>\r\n                        <\/div>\r\n    \r\n                        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n                            <div class=\"space-y-4\">\r\n                                <div class=\"flex items-center gap-2 text-summaiOrange-300 print:text-summaiOrange-700\">\r\n                                    <h4 class=\"font-bold text-lg !text-summaiOrange-300\">Audience Persona<\/h4>\r\n                                <\/div>\r\n                                <p class=\"text-gray-300 leading-relaxed text-sm print:text-gray-700\">\r\n                                    \"The Urban Romantic\". Young couples who value aesthetic (\"instagrammable\") experiences and seek social validation of their relationships through shared outings.\r\n                                <\/p>\r\n                            <\/div>\r\n    \r\n                            <div class=\"space-y-4\">\r\n                                <div class=\"flex items-center gap-2 text-summaiOrange-300 print:text-summaiOrange-700\">\r\n                                    <h4 class=\"font-bold text-lg !text-summaiOrange-300\">Hidden Narratives<\/h4>\r\n                                <\/div>\r\n                                <ul class=\"space-y-3\">\r\n                                    <li class=\"flex items-start gap-2 text-gray-300 text-sm print:text-gray-700\">\r\n                                        <span class=\"w-1.5 h-1.5 rounded-full bg-summaiOrange-500 mt-1.5 flex-shrink-0\"><\/span>\r\n                                        <span>Coffee as a modern love language.<\/span>\r\n                                    <\/li>\r\n                                    <li class=\"flex items-start gap-2 text-gray-300 text-sm print:text-gray-700\">\r\n                                        <span class=\"w-1.5 h-1.5 rounded-full bg-summaiOrange-500 mt-1.5 flex-shrink-0\"><\/span>\r\n                                        <span>Search for refuge and public intimacy.<\/span>\r\n                                    <\/li>\r\n                                <\/ul>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"lg:col-span-1 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm relative flex flex-col justify-between overflow-hidden\">\r\n                    <div class=\"relative z-10\">\r\n                        <div class=\"flex items-center justify-between mb-8\">\r\n                            <div class=\"flex items-center gap-2\">\r\n                                <h3 class=\"text-sm font-bold text-gray-900\">\r\n                                    Strategic Hook\r\n                                <\/h3>\r\n                            <\/div>\r\n                            <span class=\"px-2 py-1 rounded bg-summaiOrange-50 text-summaiOrange-600 text-[10px] font-bold uppercase tracking-wider\">\r\n                                Deep Engagement\r\n                            <\/span>\r\n                        <\/div>\r\n    \r\n                        <div class=\"flex-1 flex items-center\">\r\n                            <div class=\"relative\">\r\n                                <blockquote class=\"italic text-gray-700 text-lg leading-relaxed font-medium relative z-10\">\r\n                                    \"The 'instagrammable' atmosphere doesn't just sell coffee, it sells the social validation of the couple's relationship.\"\r\n                                <\/blockquote>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n    \r\n                    <div class=\"mt-6 pt-6 border-t border-gray-100 text-right\">\r\n                        <span class=\"text-xs text-gray-400 font-medium\">\r\n                            AI Recommended Action\r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <section class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 print:grid-cols-2\">\r\n                <div class=\"bg-white border border-gray-200 rounded-2xl p-6 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow\">\r\n                    <h3 class=\"font-bold text-gray-900 mb-4\">Drivers<\/h3>\r\n                    <div class=\"space-y-4 flex-1\">\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-blue-100 pl-3\">Visual aesthetics of the venue<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-blue-100 pl-3\">Soft ambient music<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-blue-100 pl-3\">Latte Art Quality<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-blue-100 pl-3\">Dessert options to share<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"bg-white border border-gray-200 rounded-2xl p-6 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow\">\r\n                    <h3 class=\"font-bold text-gray-900 mb-4\">Opportunities<\/h3>\r\n                    <div class=\"space-y-4 flex-1\">\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-green-100 pl-3\">\"Date Night\" Packages<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-green-100 pl-3\">Couples' Latte Art Workshops<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-green-100 pl-3\">Romantic Merchandising<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"bg-white border border-gray-200 rounded-2xl p-6 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow\">\r\n                    <h3 class=\"font-bold text-gray-900 mb-4\">Risks<\/h3>\r\n                    <div class=\"space-y-4 flex-1\">\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-red-100 pl-3\">Wait times on weekends<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-red-100 pl-3\">Perception of high prices<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"bg-white border border-gray-200 rounded-2xl p-6 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow\">\r\n                    <h3 class=\"font-bold text-gray-900 mb-4\">Actions<\/h3>\r\n                    <div class=\"space-y-4 flex-1\">\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-purple-100 pl-3\">Enable online reservations<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-purple-100 pl-3\">Create content about \"Off-Peak Hours\"<\/p>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed border-l-2 border-purple-100 pl-3\">User Generated Content Campaign<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n    \r\n            <div class=\"border border-gray-200 rounded-2xl overflow-hidden bg-white print:!border-none\">\r\n                <div class=\"p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50 bg-white print:hidden\">\r\n                    <div class=\"flex items-center gap-3\">\r\n                        <h3 class=\"font-bold text-gray-900 text-lg\">Cultural Semiotic Decoding<\/h3>\r\n                    <\/div>\r\n                    <div class=\"flex items-center gap-4\">\r\n                        <span class=\"text-xs font-bold text-gray-400 uppercase tracking-wider hidden sm:block\">Emotional Spectrum<\/span>\r\n                        <i class=\"icon-chevron-up text-gray-400\"><\/i>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"hidden print:block p-4\">\r\n                   <h3 class=\"font-bold text-gray-900 text-lg\">Cultural Semiotic Decoding<\/h3>\r\n                <\/div>\r\n    \r\n                <div class=\"p-8 border-t border-gray-100 animate-in slide-in-from-top-2 print:!border-none print:p-0\">\r\n                    <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 print:block\">\r\n                        <div class=\"flex flex-col items-center justify-center min-h-[300px] print:break-inside-avoid\">\r\n                            <h4 class=\"text-xs font-bold text-gray-400 uppercase tracking-wider mb-6 self-start\">\r\n                                Emotional Intensity Radar\r\n                            <\/h4>\r\n                            <div class=\"w-full flex justify-center h-[300px] relative\">\r\n                                <canvas id=\"emotionalRadarChart\"><\/canvas>\r\n                            <\/div>\r\n                        <\/div>\r\n    \r\n                        <div class=\"space-y-8 print:mt-6\">\r\n                            <div class=\"print:break-inside-avoid\">\r\n                                <div class=\"flex items-center gap-2 mb-4\">\r\n                                    <h4 class=\"font-bold text-gray-900 text-sm uppercase tracking-wide\">\r\n                                        Dominant Semiotic Codes\r\n                                    <\/h4>\r\n                                <\/div>\r\n                                <div class=\"space-y-3\">\r\n                                    <div class=\"flex items-center gap-4 p-3 rounded-xl border border-gray-100 bg-gray-50\/50 print:border-gray-200\">\r\n                                        <span class=\"text-2xl\">\u2615<\/span>\r\n                                        <div>\r\n                                            <div class=\"text-xs font-bold text-green-600\">Positive<\/div>\r\n                                            <div class=\"text-sm text-gray-700 font-medium\">Warmth \/ Home \/ Comfort<\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                    <div class=\"flex items-center gap-4 p-3 rounded-xl border border-gray-100 bg-gray-50\/50 print:border-gray-200\">\r\n                                        <span class=\"text-2xl\">\u2764\ufe0f<\/span>\r\n                                        <div>\r\n                                            <div class=\"text-xs font-bold text-green-600\">Positive<\/div>\r\n                                            <div class=\"text-sm text-gray-700 font-medium\">Love \/ Connection \/ Couple<\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                    <div class=\"flex items-center gap-4 p-3 rounded-xl border border-gray-100 bg-gray-50\/50 print:border-gray-200\">\r\n                                        <span class=\"text-2xl\">\ud83d\udd6f\ufe0f<\/span>\r\n                                        <div>\r\n                                            <div class=\"text-xs font-bold text-gray-600\">Neutral<\/div>\r\n                                            <div class=\"text-sm text-gray-700 font-medium\">Intimacy \/ Privacy<\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n    \r\n                            <div class=\"print:break-inside-avoid\">\r\n                                <div class=\"flex items-center gap-2 mb-2\">\r\n                                    <h4 class=\"font-bold text-gray-900 text-sm uppercase tracking-wide\">\r\n                                        Communication Style\r\n                                    <\/h4>\r\n                                <\/div>\r\n                                <div class=\"p-4 bg-blue-50\/50 rounded-xl border border-blue-100 print:bg-white print:border-gray-200\">\r\n                                    <div class=\"font-bold text-blue-900 text-sm mb-1\">\r\n                                        \"Emotional and Complicit\"\r\n                                    <\/div>\r\n                                    <p class=\"text-sm text-blue-800 leading-relaxed print:text-gray-800\">\r\n                                        Users adopt a tone of complicity, tagging their partners with affectionate messages and emojis, suggesting future plans.\r\n                                    <\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <div class=\"border border-summaiOrange-200 rounded-2xl overflow-hidden bg-white border-t-4 border-t-summaiOrange-500 print:!border-none print:break-before-page\">\r\n                <div class=\"p-4 flex items-center justify-between cursor-pointer bg-white hover:bg-gray-50 print:hidden\">\r\n                    <div class=\"flex items-center gap-3\">\r\n                        <h3 class=\"font-bold text-gray-900 text-lg\">\r\n                            Future Content Architect\r\n                        <\/h3>\r\n                    <\/div>\r\n                    <i class=\"icon-chevron-up text-gray-400\"><\/i>\r\n                <\/div>\r\n    \r\n                <div class=\"hidden print:block p-4\">\r\n                    <h3 class=\"font-bold text-gray-900 text-lg\">Future Content Architect<\/h3>\r\n                <\/div>\r\n    \r\n                <div class=\"p-8 border-t border-gray-100 animate-in slide-in-from-top-2 print:!border-none print:p-0\">\r\n                    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8 print:block print:space-y-6\">\r\n    \r\n                        <div class=\"lg:col-span-1 space-y-8 print:break-inside-avoid\">\r\n                            <div class=\"bg-summaiOrange-50\/50 p-6 rounded-xl border border-summaiOrange-100 print:bg-white print:border-gray-200\">\r\n                                <div class=\"flex items-center gap-2 mb-4\">\r\n                                    <h4 class=\"font-bold text-summaiOrange-900 text-sm uppercase tracking-wide\">\r\n                                        Tone Shift\r\n                                    <\/h4>\r\n                                <\/div>\r\n                                <div class=\"text-lg font-medium text-summaiOrange-900 leading-snug print:text-gray-900\">\r\n                                    From \"Cozy and Casual\" to \"Magical and Exclusive\"\r\n                                <\/div>\r\n                                <p class=\"text-xs text-summaiOrange-500 mt-2\">Adjust voice to resonate better<\/p>\r\n                            <\/div>\r\n    \r\n                            <div>\r\n                                <div class=\"flex items-center gap-2 mb-4\">\r\n                                    <h4 class=\"font-bold text-gray-900 text-sm uppercase tracking-wide\">\r\n                                        Psychological Hooks\r\n                                    <\/h4>\r\n                                <\/div>\r\n                                <div class=\"space-y-3\">\r\n                                    <div class=\"bg-white border border-gray-200 p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow\">\r\n                                        <div class=\"text-xs font-bold text-summaiOrange-500 uppercase mb-1\">Scarcity<\/div>\r\n                                        <p class=\"text-sm text-gray-700 font-medium\">Mention \"Limited Tables\" for the weekend.<\/p>\r\n                                    <\/div>\r\n                                    <div class=\"bg-white border border-gray-200 p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow\">\r\n                                        <div class=\"text-xs font-bold text-summaiOrange-500 uppercase mb-1\">Social Proof<\/div>\r\n                                        <p class=\"text-sm text-gray-700 font-medium\">Repost photos of real couples.<\/p>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n    \r\n                        <div class=\"lg:col-span-1 print:break-inside-avoid\">\r\n                            <div class=\"flex items-center gap-2 mb-4\">\r\n                                <h4 class=\"font-bold text-gray-900 text-sm uppercase tracking-wide\">\r\n                                    Semiotic Toolkit\r\n                                <\/h4>\r\n                            <\/div>\r\n                            <div class=\"bg-white border border-gray-200 rounded-xl p-6 shadow-sm\">\r\n                                <p class=\"text-sm text-gray-500 mb-4\">Use these symbols for \"Insider\" status<\/p>\r\n                                <div class=\"flex flex-wrap gap-2\">\r\n                                    <span class=\"px-3 py-1.5 bg-amber-50 text-amber-800 rounded-lg text-sm font-bold border border-amber-100\">\u2728 Magic<\/span>\r\n                                    <span class=\"px-3 py-1.5 bg-amber-50 text-amber-800 rounded-lg text-sm font-bold border border-amber-100\">\ud83e\udd42 Toast<\/span>\r\n                                    <span class=\"px-3 py-1.5 bg-amber-50 text-amber-800 rounded-lg text-sm font-bold border border-amber-100\">\ud83e\udd2b Secret<\/span>\r\n                                    <span class=\"px-3 py-1.5 bg-amber-50 text-amber-800 rounded-lg text-sm font-bold border border-amber-100\">\ud83c\udf39 Romance<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n    \r\n                        <div class=\"lg:col-span-1 print:break-inside-avoid\">\r\n                            <div class=\"flex items-center gap-2 mb-4\">\r\n                                <h4 class=\"font-bold text-gray-900 text-sm uppercase tracking-wide\">\r\n                                    Strategic Avoidance\r\n                                <\/h4>\r\n                            <\/div>\r\n                            <div class=\"bg-red-50\/50 border border-red-100 rounded-xl p-6 print:bg-white print:border-gray-200\">\r\n                                <ul class=\"space-y-3\">\r\n                                    <li class=\"flex items-start gap-2 text-sm text-red-800 print:text-gray-800\">\r\n                                        <span>Avoid images of crowds or visual noise.<\/span>\r\n                                    <\/li>\r\n                                    <li class=\"flex items-start gap-2 text-sm text-red-800 print:text-gray-800\">\r\n                                        <span>Do not use overly juvenile or informal slang (e.g., \"bro\").<\/span>\r\n                                    <\/li>\r\n                                    <li class=\"flex items-start gap-2 text-sm text-red-800 print:text-gray-800\">\r\n                                        <span>Avoid photos with cold or fluorescent lighting.<\/span>\r\n                                    <\/li>\r\n                                <\/ul>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <section class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm print:break-inside-avoid\">\r\n                <div class=\"p-6 border-b border-gray-100 flex items-center justify-between bg-gray-50\/50 print:bg-gray-50\">\r\n                    <div class=\"flex items-center gap-3\">\r\n                        <h3 class=\"font-bold text-gray-900 text-lg\">Strategic Blueprint<\/h3>\r\n                    <\/div>\r\n                    <div class=\"text-xs font-bold text-gray-400 uppercase tracking-wider\">Consultant Grade Analysis<\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-gray-100\">\r\n                    \r\n                    <div class=\"p-6 hover:bg-gray-50 transition-colors\">\r\n                        <div class=\"flex justify-between items-start mb-4\">\r\n                            <span class=\"text-xs font-bold text-gray-400 uppercase tracking-wider\">Virality Score<\/span>\r\n                        <\/div>\r\n                        <div class=\"flex items-baseline gap-1 mb-3\">\r\n                            <span class=\"text-5xl font-bold text-gray-900 tracking-tighter\">85<\/span>\r\n                            <span class=\"text-sm text-gray-400 font-medium\">\/100<\/span>\r\n                        <\/div>\r\n                        <p class=\"text-sm text-gray-500 leading-relaxed\">\r\n                            Based on high share rate and tags among couples.\r\n                        <\/p>\r\n                    <\/div>\r\n    \r\n                    <div class=\"p-6 hover:bg-gray-50 transition-colors\">\r\n                        <div class=\"flex justify-between items-start mb-4\">\r\n                            <span class=\"text-lg font-bold text-gray-400 uppercase tracking-wider\">Psychology<\/span>\r\n                        <\/div>\r\n                        <div class=\"flex flex-wrap gap-2\">\r\n                            <span class=\"px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded font-medium border border-gray-200\">Belonging<\/span>\r\n                            <span class=\"px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded font-medium border border-gray-200\">Aspiration<\/span>\r\n                            <span class=\"px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded font-medium border border-gray-200\">Exclusivity<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n    \r\n                    <div class=\"p-6 hover:bg-gray-50 transition-colors\">\r\n                        <div class=\"flex justify-between items-start mb-4\">\r\n                            <span class=\"text-xs font-bold text-gray-400 uppercase tracking-wider\">Tone Audit<\/span>\r\n                        <\/div>\r\n                        <p class=\"text-sm text-gray-600 leading-relaxed\">\r\n                            Consistent with brand identity, but could benefit from a touch more mystery.\r\n                        <\/p>\r\n                    <\/div>\r\n    \r\n                    <div class=\"p-6 bg-summaiOrange-50\/30 hover:bg-summaiOrange-50\/50 transition-colors relative group print:bg-white\">\r\n                        <div class=\"absolute top-0 right-0 bg-summaiOrange-500 text-white text-[10px] font-bold px-2 py-1 rounded-bl-lg uppercase tracking-wider shadow-sm\">\r\n                            Recommended\r\n                        <\/div>\r\n                        <div class=\"flex justify-between items-start mb-4\">\r\n                            <span class=\"text-xs font-bold text-summaiOrange-600 uppercase tracking-wider\">Campaign<\/span>\r\n                        <\/div>\r\n                        <h4 class=\"font-bold text-gray-900 text-sm mb-2 leading-tight\">\r\n                            \"Extended Love Month\"\r\n                        <\/h4>\r\n                        <p class=\"text-xs text-gray-600 mb-4 line-clamp-3\">\r\n                            Extend the romantic theme all month with special events.\r\n                        <\/p>\r\n                        <div class=\"p-3 bg-white rounded-lg border border-summaiOrange-100 shadow-sm group-hover:border-summaiOrange-200 transition-colors\">\r\n                            <div class=\"text-[10px] font-bold text-summaiOrange-500 uppercase mb-1\">Result<\/div>\r\n                            <p class=\"text-xs text-gray-700 font-medium\">20% increase in average ticket.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n    \r\n            <div class=\"border border-gray-200 rounded-2xl overflow-hidden bg-white print:break-before-page print:!border-none print:shadow-none border-t-4 border-t-summaiOrange-500\">\r\n                <div class=\"p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50 bg-white print:hidden\">\r\n                    <div class=\"flex items-center gap-3\">\r\n                        <i class=\"fa-solid fa-database text-gray-400\"><\/i>\r\n                        <h3 class=\"font-bold text-gray-900 text-lg\">Data Explorer<\/h3>\r\n                    <\/div>\r\n                    <div class=\"flex items-center gap-4\">\r\n                        <i class=\"icon-chevron-up text-gray-400\"><\/i>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"hidden print:block p-6 mb-4\">\r\n                    <h3 class=\"text-2xl font-bold text-gray-900\">Full Data Explorer<\/h3>\r\n                <\/div>\r\n    \r\n                <div class=\"transition-all duration-500 ease-in-out overflow-hidden max-h-[800px] opacity-100\">\r\n                    <div class=\"p-6 space-y-6 print:p-0\">\r\n    \r\n                        <div class=\"flex flex-col md:flex-row gap-4 justify-between items-center bg-gray-50 p-4 rounded-xl border border-gray-200 print:hidden\">\r\n                            <div class=\"relative w-full md:w-96\">\r\n                               \r\n                                <input type=\"text\" placeholder=\"Search...\" class=\"w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-summaiOrange-500\/20 focus:border-summaiOrange-500 transition-all\">\r\n                            <\/div>\r\n                            <div class=\"flex gap-2 w-full md:w-auto overflow-x-auto pb-2 md:pb-0\">\r\n                                <button class=\"px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all whitespace-nowrap bg-summaiOrange-500 text-white shadow-md\">View All<\/button>\r\n                                <button class=\"px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all whitespace-nowrap bg-white text-gray-600 border border-gray-200 hover:bg-gray-100\">Positive<\/button>\r\n                                <button class=\"px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all whitespace-nowrap bg-white text-gray-600 border border-gray-200 hover:bg-gray-100\">Neutral<\/button>\r\n                                <button class=\"px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all whitespace-nowrap bg-white text-gray-600 border border-gray-200 hover:bg-gray-100\">Negative<\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n    \r\n                        <div class=\"bg-white rounded-xl border border-gray-200 shadow-inner overflow-hidden print:!border-none print:shadow-none\">\r\n                            <div class=\"overflow-x-auto custom-scrollbar max-h-[500px] print:max-h-none print:overflow-visible\">\r\n                                <table class=\"w-full text-left border-collapse !display-block\">\r\n                                    <thead class=\"bg-gray-50 border-b border-gray-200 sticky top-0 bg-opacity-100 z-10 print:hidden\">\r\n                                        <tr>\r\n                                            <th class=\"px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap w-[159px]\">User<\/th>\r\n                                            <th class=\"px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider w-3\/4\">Comment<\/th>\r\n                                            <th class=\"px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap\">Sentiment<\/th>\r\n                                        <\/tr>\r\n                                    <\/thead>\r\n                                    <tbody class=\"divide-y divide-gray-100\">\r\n                                        <tr class=\"hover:bg-gray-50 transition-colors group print:border-b print:break-inside-avoid\">\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <div class=\"font-bold text-gray-900 text-sm group-hover:text-summaiOrange-600 transition-colors whitespace-nowrap\">@mariana_lpz<\/div>\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 text-sm text-gray-700 leading-relaxed min-w-[300px] !border-none\">\r\n                                                I love this place! I went with my boyfriend last week and the carrot cake is incredible. We will definitely be back for Valentine's.\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide whitespace-nowrap bg-green-100 text-green-700\">\r\n                                                    <span class=\"w-1.5 h-1.5 rounded-full bg-green-500\"><\/span>\r\n                                                    Positive\r\n                                                <\/span>\r\n                                            <\/td>\r\n                                        <\/tr>\r\n                                        <tr class=\"hover:bg-gray-50 transition-colors group print:border-b print:break-inside-avoid\">\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <div class=\"font-bold text-gray-900 text-sm group-hover:text-summaiOrange-600 transition-colors whitespace-nowrap\">@carlos_ruiz99<\/div>\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 text-sm text-gray-700 leading-relaxed min-w-[300px] !border-none\">\r\n                                                Do you have lactose-free options? I want to take my partner but they are intolerant. The place looks great in the photos.\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide whitespace-nowrap bg-gray-100 text-gray-600\">\r\n                                                    <span class=\"w-1.5 h-1.5 rounded-full bg-gray-500\"><\/span>\r\n                                                    Neutral\r\n                                                <\/span>\r\n                                            <\/td>\r\n                                        <\/tr>\r\n                                        <tr class=\"hover:bg-gray-50 transition-colors group print:border-b print:break-inside-avoid\">\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <div class=\"font-bold text-gray-900 text-sm group-hover:text-summaiOrange-600 transition-colors whitespace-nowrap\">@sofi_amiga<\/div>\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 text-sm text-gray-700 leading-relaxed min-w-[300px] !border-none\">\r\n                                                The best latte in town, hands down. The atmosphere is super romantic. \u2764\ufe0f\r\n                                            <\/td>\r\n                                            <td class=\"px-6 py-4 align-top !border-none\">\r\n                                                <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide whitespace-nowrap bg-green-100 text-green-700\">\r\n                                                    <span class=\"w-1.5 h-1.5 rounded-full bg-green-500\"><\/span>\r\n                                                    Positive\r\n                                                <\/span>\r\n                                            <\/td>\r\n                                        <\/tr>\r\n                                    <\/tbody>\r\n                                <\/table>\r\n                            <\/div>\r\n                            <div class=\"p-4 bg-gray-50 border-t border-gray-200 text-center text-xs text-gray-500 font-medium print:hidden\">\r\n                                Showing 3 results\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const ctx = document.getElementById('emotionalRadarChart').getContext('2d');\r\n        const emotionalRadarChart = new Chart(ctx, {\r\n            type: 'radar',\r\n            data: {\r\n                labels: ['Joy', 'Trust', 'Fear', 'Surprise', 'Sadness', 'Disgust', 'Anger', 'Anticipation'],\r\n                datasets: [{\r\n                    label: 'Emotional Intensity',\r\n                    data: [85, 90, 10, 60, 5, 5, 2, 75],\r\n                    fill: true,\r\n                    backgroundColor: 'rgba(248, 112, 78, 0.2)', \r\n                    borderColor: 'rgb(248, 112, 78)',\r\n                    pointBackgroundColor: 'rgb(248, 112, 78)',\r\n                    pointBorderColor: '#fff',\r\n                    pointHoverBackgroundColor: '#fff',\r\n                    pointHoverBorderColor: 'rgb(248, 112, 78)'\r\n                }]\r\n            },\r\n            options: {\r\n                elements: {\r\n                    line: {\r\n                        borderWidth: 3\r\n                    }\r\n                },\r\n                scales: {\r\n                    r: {\r\n                        angleLines: {\r\n                            display: true\r\n                        },\r\n                        suggestedMin: 0,\r\n                        suggestedMax: 100\r\n                    }\r\n                },\r\n                plugins: {\r\n                    legend: {\r\n                        display: false\r\n                    }\r\n                }\r\n            }\r\n        });\r\n    <\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Insights Report MARKETING INSIGHTS February 14, 2024 Aroma &#038; Encuentro Facebook Photo \u2022 14 Feb 2024 Comments 342 Response Rate 98% Sentiment Positive Post Text &#8220;Looking for the perfect place for that first date or to celebrate an anniversary? \u2764\ufe0f\u2615 At Aroma &#038; Encuentro we create the ideal atmosphere: warm lighting and the best coffee.<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"solace_meta_sidebar":"","solace_meta_container":"","solace_meta_enable_content_width":"","solace_meta_content_width":0,"solace_meta_title_alignment":"","solace_meta_author_avatar":"","solace_post_elements_order":"","solace_meta_disable_header":"","solace_meta_disable_footer":"","solace_meta_disable_title":"","footnotes":""},"class_list":["post-4658","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/pages\/4658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/comments?post=4658"}],"version-history":[{"count":13,"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/pages\/4658\/revisions"}],"predecessor-version":[{"id":4672,"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/pages\/4658\/revisions\/4672"}],"wp:attachment":[{"href":"https:\/\/itsabout.io\/sr\/wp-json\/wp\/v2\/media?parent=4658"}],"curies":[{"name":"\u0412\u041f","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}