{"id":20683,"date":"2026-09-03T21:22:11","date_gmt":"2026-09-03T21:22:11","guid":{"rendered":"https:\/\/grdigital.tech\/?post_type=projects&#038;p=20683"},"modified":"2026-09-03T21:36:08","modified_gmt":"2026-09-03T21:36:08","slug":"behapi-landing-page-copy","status":"publish","type":"projects","link":"https:\/\/grdigital.tech\/index.php\/projects\/behapi-landing-page-copy\/","title":{"rendered":"Flower-delivery online store Aquarelle"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"20683\" class=\"elementor elementor-20683\" 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-f6bb3cd6 elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f6bb3cd6\" 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-8c51848f\" data-id=\"8c51848f\" 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-11424231 elementor-widget elementor-widget-html\" data-id=\"11424231\" 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\">Aquarelle<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\">France's flower-delivery leader since 1987 \u2014 same-day bouquets nationwide, four-hour delivery in Paris. The site is fundamentally a catalogue, so the entire job was making a thousand bouquets scannable in seconds.<\/p>\n      <div style=\"display:flex;gap:8.4px;flex-wrap:wrap\">\n        <a class=\"btn btn-primary\" href=\"https:\/\/www.aquarelle.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\/aquarelle-hero.webp\" alt=\"Aquarelle, 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\">Aquarelle<\/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, e-commerce UX<\/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\">6 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\">10 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)\">Market<\/div>\n        <div style=\"margin-top:8.4px;font-family:var(--font-heading);font-size:16px\">France \u00b7 since 1987<\/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\">A catalogue that still feels like a florist<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\">Flower orders are almost always occasion-driven and time-pressured \u2014 a birthday tomorrow, a funeral this week. The home page has to sort hundreds of bouquets into that intent before the visitor scrolls once.<\/p>\n        <p style=\"margin:0;font-size:16px;line-height:1.75;color:var(--color-neutral-400);text-wrap:pretty\">An occasion strip does the sorting; everything below is dense, uniform product cards, so the density itself reads as range and freshness rather than clutter.<\/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\">Occasion first, product second<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">Anniversaire, Bouquets de Saison, Roses, Deuil sit as four tiles at the very top \u2014 before any bouquet is shown, the visitor has already told the site why they came.<\/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\">A uniform grid at scale<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">Three-across product cards, same crop, same badge placement, repeated for dozens of bouquets. Consistency is what lets the eye compare price and size at speed rather than re-learning each card.<\/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\">Trust copy, held until after<\/div>\n        <p style=\"margin:11.2px 0 0;font-size:15px;line-height:1.65;color:var(--color-neutral-500);text-wrap:pretty\">Delivery guarantees, florist craftsmanship, freshness promises \u2014 all written out in full below the fold. Shoppers who scroled past the grid without buying get the reassurance next.<\/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\">Blush paper, rose for every call to action<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:#fdf3f0;box-shadow:var(--shadow-sm)\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Blush<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#ffffff\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Card<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#d94f6a\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Rose<\/div>\n          <\/div>\n          <div>\n            <div style=\"height:72px;border-radius:var(--radius-md);background:#7a2331\"><\/div>\n            <div style=\"margin-top:8.4px;font-size:11px;color:var(--color-neutral-500)\">Wordmark<\/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\">A near-white blush replaces pure white as the page ground, warming the whole catalogue. Rose is spent on badges, buttons and the logotype \u2014 never a background, so it stays legible against hundreds of competing bouquet colours.<\/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.01em;line-height:1;margin-top:16.8px;font-style:italic\">Aa<\/div>\n        <div style=\"margin-top:8.4px;font-size:14px;color:var(--color-neutral-400)\">Serif italic \u2014 the wordmark only<\/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)\">Neutral sans \u2014 every product name, price, and paragraph<\/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>Logotype<\/span><span>32 \/ 1 \/ 0<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Product name<\/span><span>14 \/ 1.30 \/ 0<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Price<\/span><span>13 \/ 1.30 \/ 0<\/span><\/div>\n          <div style=\"display:flex;justify-content:space-between;gap:11.2px\"><span>Body<\/span><span>13 \/ 1.60 \/ 0<\/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, aquarelle.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\">aquarelle.com \u2014 full page<\/span>\n        <\/div>\n        <img loading=\"lazy\" src=\"\/wp-content\/uploads\/2026\/09\/aquarelle-desktop.webp\" width=\"1100\" height=\"4997\" loading=\"lazy\" decoding=\"async\" alt=\"aquarelle.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\/aquarelle-mobile.webp\" width=\"400\" height=\"9572\" loading=\"lazy\" decoding=\"async\" alt=\"aquarelle.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":20684,"parent":0,"template":"","projects_cat":[20],"projects_tag":[11,18,19],"class_list":{"0":"post-20683","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\/20683","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":2,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects\/20683\/revisions"}],"predecessor-version":[{"id":20686,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects\/20683\/revisions\/20686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/media\/20684"}],"wp:attachment":[{"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/media?parent=20683"}],"wp:term":[{"taxonomy":"projects_cat","embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects_cat?post=20683"},{"taxonomy":"projects_tag","embeddable":true,"href":"https:\/\/grdigital.tech\/index.php\/wp-json\/wp\/v2\/projects_tag?post=20683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}