{"id":20687,"date":"2026-09-03T21:36:33","date_gmt":"2026-09-03T21:36:33","guid":{"rendered":"https:\/\/grdigital.tech\/?post_type=projects&#038;p=20687"},"modified":"2026-09-03T21:45:16","modified_gmt":"2026-09-03T21:45:16","slug":"behapi-landing-page-copy-2","status":"publish","type":"projects","link":"https:\/\/grdigital.tech\/index.php\/projects\/behapi-landing-page-copy-2\/","title":{"rendered":"Sentiment Index \u2014 a calm analytics website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"20687\" class=\"elementor elementor-20687\" data-elementor-post-type=\"projects\">\n\t\t\t\t\t\t<section class=\"wavo-column-gap-no elementor-section elementor-top-section elementor-element elementor-element-e940575a elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"e940575a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c5f4e03\" data-id=\"7c5f4e03\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-daf4f6de elementor-widget elementor-widget-html\" data-id=\"daf4f6de\" 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<div class=\"gr-case\"><div style=\"background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh\">\n  <section id=\"top\" style=\"padding:clamp(56px,11vw,120px) clamp(20px,4vw,44px) 0;max-width:1360px;margin:0 auto\">\n    <div style=\"display:flex;align-items:center;gap:16.8px;margin-bottom:28px\">\n      <span style=\"width:44px;height:2px;background:var(--color-accent);flex:0 0 auto\"><\/span>\n      <span style=\"font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-200)\">Our creative works \u2014 case study<\/span>\n    <\/div>\n    <h1 data-reveal=\"1\" style=\"margin:0;font-family:var(--font-heading);font-weight:500;font-size:clamp(40px,8.4vw,112px);line-height:0.95;letter-spacing:-0.04em;text-transform:uppercase;max-width:15ch;text-wrap:balance\">Sentiment Index<span style=\"color:var(--color-accent)\">.<\/span><\/h1>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;margin-top:32px;align-items:end\">\n      <p data-reveal=\"1\" style=\"margin:0;max-width:52ch;font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--color-neutral-400);text-wrap:pretty\">Real-time sentiment and engagement analytics for creators and brands, powered by a token integration. The site had to sell an AI-analytics product on trust and clarity \u2014 soft light, real numbers, no crypto-hype visual language.<\/p>\n      <div style=\"display:flex;gap:8.4px;flex-wrap:wrap\">\n        <a class=\"btn btn-primary\" href=\"https:\/\/sentimentindex.com\/\" target=\"_blank\" rel=\"noreferrer\">Visit live website<\/a>\n        <a class=\"btn btn-ghost\" href=\"#screens\">See the work<\/a>\n      <\/div>\n    <\/div>\n    <div data-reveal=\"1\" style=\"margin-top:clamp(32px,5vw,56px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:1920\/1000;background:var(--color-surface)\">\n      <img loading=\"lazy\" src=\"\/wp-content\/uploads\/2026\/09\/sentiment-index-hero.webp\" alt=\"Sentiment Index, hero screen\" width=\"1440\" height=\"750\" loading=\"lazy\" decoding=\"async\" style=\"display:block;width:100%;height:100%;object-fit:cover\">\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:1px;background:var(--color-neutral-800);border-radius:var(--radius-md);overflow:hidden;margin-top:clamp(28px,4vw,44px)\">\n      <div style=\"background:var(--color-bg);padding:22.4px\">\n        <div style=\"font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-neutral-600)\">Client<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">SentimentIndex<\/div>\n      <\/div>\n      <div style=\"background:var(--color-bg);padding:22.4px\">\n        <div style=\"font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-neutral-600)\">Services<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">Web development, product design<\/div>\n      <\/div>\n      <div style=\"background:var(--color-bg);padding:22.4px\">\n        <div style=\"font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-neutral-600)\">Team<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">4 specialists<\/div>\n      <\/div>\n      <div style=\"background:var(--color-bg);padding:22.4px\">\n        <div style=\"font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-neutral-600)\">Timeline<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">8 weeks<\/div>\n      <\/div>\n      <div style=\"background:var(--color-bg);padding:22.4px\">\n        <div style=\"font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-neutral-600)\">Category<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">Analytics \u00b7 $ZOOP<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  <hr class=\"rule\" style=\"margin:clamp(56px,9vw,96px) 0\">\n  <section id=\"challenge\" style=\"padding:0 clamp(20px,4vw,44px);max-width:1360px;margin:0 auto\">\n    <div style=\"display:flex;align-items:center;gap:16.8px;margin-bottom:28px\">\n      <span style=\"width:44px;height:2px;background:var(--color-accent);flex:0 0 auto\"><\/span>\n      <span style=\"font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-200)\">The challenge<\/span>\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,4vw,56px);align-items:start\">\n      <h2 data-reveal=\"1\" style=\"margin:0;font-family:var(--font-heading);font-weight:500;font-size:clamp(26px,4.4vw,50px);line-height:1.06;letter-spacing:-0.03em;max-width:22ch;text-wrap:balance\">Analytics that feels calm, not clinical<span style=\"color:var(--color-accent)\">.<\/span><\/h2>\n      <div style=\"display:grid;gap:16.8px\">\n        <p style=\"margin:0;font-size:16px;line-height:1.75;color:var(--color-neutral-400);text-wrap:pretty\">A sentiment tool lives or dies on trust \u2014 creators need to believe the score before they act on it. Most analytics dashboards default to dense, technical chrome that reads as intimidating rather than reassuring.<\/p>\n        <p style=\"margin:0;font-size:16px;line-height:1.75;color:var(--color-neutral-400);text-wrap:pretty\">Sentiment Index answers with soft light instead: pastel gradient blooms behind a near-white canvas, one number stated with confidence, and the actual product screen shown plainly rather than illustrated.<\/p>\n      <\/div>\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--color-neutral-800);border-radius:var(--radius-md);overflow:hidden;margin-top:clamp(32px,5vw,56px)\">\n      <div data-reveal=\"1\" style=\"background:var(--color-bg);padding:clamp(24px,3vw,36px) 28px\">\n        <div style=\"font-family:var(--font-heading);font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-0.04em;color:var(--color-accent-700)\">01<\/div>\n        <div style=\"margin-top:22.4px;font-family:var(--font-heading);font-size:19px;letter-spacing:-0.01em\">Light as the brand device<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">Overlapping pastel-blue and lilac circles glow softly behind the hero and never repeat identically \u2014 the one recurring visual motif on an otherwise plain white canvas.<\/p>\n      <\/div>\n      <div data-reveal=\"1\" style=\"background:var(--color-bg);padding:clamp(24px,3vw,36px) 28px\">\n        <div style=\"font-family:var(--font-heading);font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-0.04em;color:var(--color-accent-700)\">02<\/div>\n        <div style=\"margin-top:22.4px;font-family:var(--font-heading);font-size:19px;letter-spacing:-0.01em\">One number, stated plainly<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">\"1.2M+ social interactions daily\" sits alone in a soft blue tile \u2014 a single credibility metric rather than a wall of stats competing for attention.<\/p>\n      <\/div>\n      <div data-reveal=\"1\" style=\"background:var(--color-bg);padding:clamp(24px,3vw,36px) 28px\">\n        <div style=\"font-family:var(--font-heading);font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-0.04em;color:var(--color-accent-700)\">03<\/div>\n        <div style=\"margin-top:22.4px;font-family:var(--font-heading);font-size:19px;letter-spacing:-0.01em\">Dark band for the pitch<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">The one near-black section on the page holds the four key-benefit icons \u2014 a deliberate tonal break that flags \"this is the sales argument\" before returning to the light canvas.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n  <hr class=\"rule\" style=\"margin:clamp(56px,9vw,96px) 0\">\n  <section id=\"design\" style=\"padding:0 clamp(20px,4vw,44px);max-width:1360px;margin:0 auto\">\n    <div style=\"display:flex;align-items:center;gap:16.8px;margin-bottom:28px\">\n      <span style=\"width:44px;height:2px;background:var(--color-accent);flex:0 0 auto\"><\/span>\n      <span style=\"font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-200)\">Colour &amp; type<\/span>\n    <\/div>\n    <h2 data-reveal=\"1\" style=\"margin:0 0 clamp(28px,4vw,44px);font-family:var(--font-heading);font-weight:500;font-size:clamp(26px,4.4vw,50px);line-height:1.06;letter-spacing:-0.03em;max-width:22ch;text-wrap:balance\">White canvas, one dashboard blue<span style=\"color:var(--color-accent)\">.<\/span><\/h2>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16.8px\">\n      <div class=\"card\">\n        <div class=\"card-kicker\">Palette<\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:11.2px;margin-top:16.8px\">\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#ffffff;box-shadow:var(--shadow-sm)\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Canvas<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#eaf1fd\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Bloom<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#5b8def\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Data blue<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#14141c\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Pitch band<\/div>\n          <\/div>\n        <\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(9,1fr);gap:2.8px;margin-top:16.8px\">\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-100)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-200)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-300)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-400)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-500)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-600)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-700)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-800)\"><\/div>\n          <div style=\"height:24px;border-radius:var(--radius-sm);background:var(--color-accent-900)\"><\/div>\n        <\/div>\n        <p class=\"card-body\" style=\"margin-top:16.8px\">Blue is the only saturated colour and it's reserved for the metric, the search bar and the stat tile. The lilac and mint tones in the background blooms stay decorative, never used for text or UI.<\/p>\n      <\/div>\n      <div class=\"card\">\n        <div class=\"card-kicker\">Type<\/div>\n        <div style=\"font-family:var(--font-heading);font-weight:500;font-size:clamp(44px,6vw,64px);letter-spacing:-0.02em;line-height:1;margin-top:16.8px\">Aa<\/div>\n        <div style=\"margin-top:8.4px;font-size:14px;color:var(--color-neutral-400)\">Rounded sans, bold \u2014 hero, section titles, the metric figure<\/div>\n        <div style=\"height:1px;background:var(--color-divider);margin:22.4px 0\"><\/div>\n        <div style=\"font-family:var(--font-body);font-weight:400;font-size:clamp(32px,4.4vw,44px);letter-spacing:-0.01em;line-height:1\">Aa<\/div>\n        <div style=\"margin-top:8.4px;font-size:14px;color:var(--color-neutral-400)\">Same family, regular \u2014 body copy, chat bubbles, footer<\/div>\n        <div style=\"display:grid;gap:5.6px;margin-top:22.4px;font-size:12px;color:var(--color-neutral-500)\">\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Hero<\/span><span>40 \/ 1.20 \/ -0.01em<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Section<\/span><span>28 \/ 1.20 \/ -0.01em<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Body<\/span><span>14 \/ 1.65 \/ 0<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Metric<\/span><span>52 \/ 1 \/ -0.01em<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  <hr class=\"rule\" style=\"margin:clamp(56px,9vw,96px) 0\">\n  <section id=\"screens\" style=\"padding:0 clamp(20px,4vw,44px);max-width:1360px;margin:0 auto\">\n    <div style=\"display:flex;align-items:center;gap:16.8px;margin-bottom:28px\">\n      <span style=\"width:44px;height:2px;background:var(--color-accent);flex:0 0 auto\"><\/span>\n      <span style=\"font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-200)\">Screens<\/span>\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22.4px;align-items:end;margin-bottom:clamp(28px,4vw,44px)\">\n      <h2 data-reveal=\"1\" style=\"margin:0;font-family:var(--font-heading);font-weight:500;font-size:clamp(26px,4.4vw,50px);line-height:1.06;letter-spacing:-0.03em;max-width:20ch;text-wrap:balance\">The home page, full scroll<span style=\"color:var(--color-accent)\">.<\/span><\/h2>\n      <div style=\"font-size:12px;color:var(--color-neutral-500)\">Desktop 1920 \u00b7 mobile 390 \u00b7 shipped build, sentimentindex.com<\/div>\n    <\/div>\n    <div style=\"position:relative;padding-right:clamp(0px,14vw,200px)\">\n      <div style=\"border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--color-surface)\">\n        <div style=\"display:flex;align-items:center;gap:8.4px;padding:8.4px 11.2px;border-bottom:1px solid var(--color-divider)\">\n          <span style=\"width:8px;height:8px;border-radius:50%;background:var(--color-neutral-700);flex:0 0 auto\"><\/span>\n          <span style=\"width:8px;height:8px;border-radius:50%;background:var(--color-neutral-700);flex:0 0 auto\"><\/span>\n          <span style=\"width:8px;height:8px;border-radius:50%;background:var(--color-neutral-700);flex:0 0 auto\"><\/span>\n          <span style=\"margin-left:8.4px;padding:2.8px 11.2px;border-radius:999px;background:var(--color-bg);font-size:11px;color:var(--color-neutral-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">sentimentindex.com \u2014 full page<\/span>\n        <\/div>\n        <img loading=\"lazy\" src=\"\/wp-content\/uploads\/2026\/09\/sentiment-index-desktop.webp\" width=\"1100\" height=\"3006\" loading=\"lazy\" decoding=\"async\" alt=\"sentimentindex.com full desktop page\" style=\"display:block;width:100%;height:auto\">\n      <\/div>\n      <div style=\"position:absolute;top:64px;right:0;width:clamp(84px,17vw,250px)\">\n        <div style=\"border-radius:18px;overflow:hidden;background:var(--color-surface);padding:6px;box-shadow:var(--shadow-lg)\">\n          <img loading=\"lazy\" src=\"\/wp-content\/uploads\/2026\/09\/sentiment-index-mobile.webp\" width=\"400\" height=\"3970\" loading=\"lazy\" decoding=\"async\" alt=\"sentimentindex.com full mobile page\" style=\"display:block;width:100%;height:auto;border-radius:12px\">\n        <\/div>\n        <div style=\"margin-top:8.4px;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-neutral-600)\">Mobile \u2014 full page<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  <hr class=\"rule\" style=\"margin:clamp(56px,9vw,96px) 0\">\n  <section id=\"contact\" style=\"padding:0 clamp(20px,4vw,44px) clamp(40px,6vw,64px);max-width:1360px;margin:0 auto\">\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px;align-items:end\">\n      <h2 style=\"margin:0;font-family:var(--font-heading);font-weight:500;font-size:clamp(30px,6vw,76px);line-height:1;letter-spacing:-0.04em;text-transform:uppercase;max-width:16ch;text-wrap:balance\">Let's talk about your project<span style=\"color:var(--color-accent)\">.<\/span><\/h2>\n      <div style=\"display:flex;gap:8.4px;flex-wrap:wrap\">\n        <a class=\"btn btn-primary\" href=\"\/#contact\" target=\"_blank\" rel=\"noreferrer\">Get in touch<\/a>\n        <a class=\"btn btn-ghost\" href=\"\/#portfolio\">All case studies<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fox and Rabbit Home introduction We are a Creative Agency &amp; Startup Studio that provides Digital Products and Services turns to focus on client success. We specialize in user interface design, including front-end development which we consider to be an integral part. Client admin Date April 25, 2020 Categories Art , illustration Tags grid, wide&#8230;<\/p>\n","protected":false},"featured_media":20688,"parent":0,"template":"","projects_cat":[20],"projects_tag":[11,18,19],"class_list":{"0":"post-20687","1":"projects","2":"type-projects","3":"status-publish","4":"has-post-thumbnail","5":"hentry","6":"projects_cat-work","7":"projects_tag-grid","8":"projects_tag-wide","9":"projects_tag-work","10":"nt-post-class","11":"","14":"excerpt-none"},"acf":[],"_links":{"self":[{"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects\/20687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects"}],"about":[{"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/types\/projects"}],"version-history":[{"count":1,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects\/20687\/revisions"}],"predecessor-version":[{"id":20689,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects\/20687\/revisions\/20689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/media\/20688"}],"wp:attachment":[{"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/media?parent=20687"}],"wp:term":[{"taxonomy":"projects_cat","embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects_cat?post=20687"},{"taxonomy":"projects_tag","embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects_tag?post=20687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}