{"id":8,"date":"2026-05-20T22:40:24","date_gmt":"2026-05-20T22:40:24","guid":{"rendered":"https:\/\/claudestuff.shstesting.com\/?page_id=8"},"modified":"2026-05-20T22:41:33","modified_gmt":"2026-05-20T22:41:33","slug":"home","status":"publish","type":"page","link":"https:\/\/claudestuff.shstesting.com\/?page_id=8","title":{"rendered":""},"content":{"rendered":"\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n<title>Just Because<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --cream: #F9F6F1;\n    --warm-white: #FDFBF8;\n    --ink: #1A1714;\n    --muted: #6B6560;\n    --accent: #B5844A;\n    --accent-light: #F2E8D9;\n    --border: rgba(26,23,20,0.1);\n    --serif: 'Cormorant Garamond', Georgia, serif;\n    --sans: 'DM Sans', sans-serif;\n  }\n\n  html { scroll-behavior: smooth; }\n\n  body {\n    font-family: var(--sans);\n    background: var(--warm-white);\n    color: var(--ink);\n    font-size: 16px;\n    line-height: 1.6;\n    overflow-x: hidden;\n  }\n\n  \/* NAV *\/\n  nav {\n    position: fixed;\n    top: 0; left: 0; right: 0;\n    z-index: 100;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1.25rem 3rem;\n    background: rgba(253,251,248,0.85);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border);\n  }\n\n  .nav-logo {\n    font-family: var(--serif);\n    font-size: 1.5rem;\n    font-weight: 400;\n    letter-spacing: 0.05em;\n    color: var(--ink);\n    text-decoration: none;\n  }\n\n  .nav-logo em {\n    font-style: italic;\n    color: var(--accent);\n  }\n\n  .nav-links {\n    display: flex;\n    gap: 2.5rem;\n    list-style: none;\n  }\n\n  .nav-links a {\n    font-size: 0.85rem;\n    font-weight: 400;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--muted);\n    text-decoration: none;\n    transition: color 0.2s;\n  }\n\n  .nav-links a:hover { color: var(--ink); }\n\n  .nav-cta {\n    background: var(--ink);\n    color: var(--warm-white) !important;\n    padding: 0.5rem 1.4rem;\n    border-radius: 100px;\n    font-size: 0.82rem !important;\n    letter-spacing: 0.06em;\n    transition: background 0.2s, transform 0.15s !important;\n  }\n\n  .nav-cta:hover {\n    background: var(--accent) !important;\n    color: var(--warm-white) !important;\n    transform: translateY(-1px);\n  }\n\n  \/* HERO *\/\n  .hero {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    padding: 7rem 3rem 4rem;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .hero::before {\n    content: '';\n    position: absolute;\n    top: -10%;\n    right: -5%;\n    width: 55%;\n    height: 110%;\n    background: var(--accent-light);\n    border-radius: 0 0 0 60% \/ 0 0 0 30%;\n    z-index: 0;\n  }\n\n  .hero-content {\n    position: relative;\n    z-index: 1;\n    max-width: 640px;\n  }\n\n  .hero-tag {\n    display: inline-block;\n    font-size: 0.75rem;\n    font-weight: 500;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--accent);\n    border: 1px solid var(--accent);\n    padding: 0.35rem 1rem;\n    border-radius: 100px;\n    margin-bottom: 2rem;\n    animation: fadeUp 0.6s ease both;\n  }\n\n  .hero h1 {\n    font-family: var(--serif);\n    font-size: clamp(3.5rem, 7vw, 6rem);\n    font-weight: 300;\n    line-height: 1.05;\n    letter-spacing: -0.01em;\n    margin-bottom: 1.5rem;\n    animation: fadeUp 0.7s 0.1s ease both;\n  }\n\n  .hero h1 em {\n    font-style: italic;\n    color: var(--accent);\n  }\n\n  .hero-sub {\n    font-size: 1.1rem;\n    font-weight: 300;\n    color: var(--muted);\n    line-height: 1.75;\n    max-width: 480px;\n    margin-bottom: 2.5rem;\n    animation: fadeUp 0.7s 0.2s ease both;\n  }\n\n  .hero-actions {\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    animation: fadeUp 0.7s 0.3s ease both;\n  }\n\n  .btn-primary {\n    background: var(--ink);\n    color: var(--warm-white);\n    font-family: var(--sans);\n    font-size: 0.9rem;\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    padding: 0.85rem 2rem;\n    border-radius: 100px;\n    text-decoration: none;\n    transition: background 0.2s, transform 0.15s;\n    border: none;\n    cursor: pointer;\n  }\n\n  .btn-primary:hover {\n    background: var(--accent);\n    transform: translateY(-2px);\n  }\n\n  .btn-ghost {\n    font-family: var(--sans);\n    font-size: 0.85rem;\n    font-weight: 400;\n    color: var(--muted);\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n    gap: 0.4rem;\n    transition: color 0.2s;\n  }\n\n  .btn-ghost:hover { color: var(--ink); }\n\n  .hero-float {\n    position: absolute;\n    right: 8%;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 1.25rem;\n    animation: fadeUp 0.8s 0.4s ease both;\n  }\n\n  .gift-card {\n    background: white;\n    border-radius: 20px;\n    padding: 1.25rem 1.5rem;\n    box-shadow: 0 8px 40px rgba(0,0,0,0.08);\n    width: 240px;\n    border: 1px solid var(--border);\n  }\n\n  .gift-card-emoji {\n    font-size: 2rem;\n    margin-bottom: 0.5rem;\n  }\n\n  .gift-card-name {\n    font-family: var(--serif);\n    font-size: 1.1rem;\n    font-weight: 400;\n    margin-bottom: 0.2rem;\n  }\n\n  .gift-card-from {\n    font-size: 0.78rem;\n    color: var(--muted);\n  }\n\n  .gift-card-badge {\n    display: inline-block;\n    margin-top: 0.75rem;\n    font-size: 0.72rem;\n    font-weight: 500;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    background: var(--accent-light);\n    color: var(--accent);\n    padding: 0.3rem 0.8rem;\n    border-radius: 100px;\n  }\n\n  .gift-card.alt {\n    transform: translateX(30px);\n  }\n\n  \/* HOW IT WORKS *\/\n  .section {\n    padding: 6rem 3rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  .section-label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--accent);\n    margin-bottom: 1rem;\n  }\n\n  .section-title {\n    font-family: var(--serif);\n    font-size: clamp(2.2rem, 4vw, 3.5rem);\n    font-weight: 300;\n    line-height: 1.15;\n    margin-bottom: 1rem;\n  }\n\n  .section-title em {\n    font-style: italic;\n    color: var(--accent);\n  }\n\n  .section-sub {\n    font-size: 1rem;\n    color: var(--muted);\n    font-weight: 300;\n    max-width: 500px;\n    line-height: 1.7;\n    margin-bottom: 4rem;\n  }\n\n  .steps {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2rem;\n  }\n\n  .step {\n    padding: 2rem;\n    border: 1px solid var(--border);\n    border-radius: 20px;\n    position: relative;\n    background: var(--warm-white);\n    transition: border-color 0.2s, transform 0.2s;\n  }\n\n  .step:hover {\n    border-color: var(--accent);\n    transform: translateY(-4px);\n  }\n\n  .step-num {\n    font-family: var(--serif);\n    font-size: 3.5rem;\n    font-weight: 300;\n    color: var(--accent-light);\n    line-height: 1;\n    margin-bottom: 1rem;\n  }\n\n  .step h3 {\n    font-family: var(--serif);\n    font-size: 1.4rem;\n    font-weight: 400;\n    margin-bottom: 0.75rem;\n  }\n\n  .step p {\n    font-size: 0.9rem;\n    color: var(--muted);\n    line-height: 1.7;\n    font-weight: 300;\n  }\n\n  \/* FEATURES *\/\n  .features-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 1.5rem;\n    margin-top: 3rem;\n  }\n\n  .feature-card {\n    background: var(--cream);\n    border-radius: 20px;\n    padding: 2rem;\n    border: 1px solid transparent;\n    transition: border-color 0.2s, transform 0.2s;\n  }\n\n  .feature-card:hover {\n    border-color: var(--accent);\n    transform: translateY(-3px);\n  }\n\n  .feature-card.wide {\n    grid-column: span 2;\n    display: flex;\n    align-items: center;\n    gap: 3rem;\n    background: var(--ink);\n    color: var(--warm-white);\n  }\n\n  .feature-icon {\n    font-size: 2.2rem;\n    margin-bottom: 1rem;\n  }\n\n  .feature-card h3 {\n    font-family: var(--serif);\n    font-size: 1.3rem;\n    font-weight: 400;\n    margin-bottom: 0.5rem;\n  }\n\n  .feature-card p {\n    font-size: 0.88rem;\n    color: var(--muted);\n    line-height: 1.7;\n    font-weight: 300;\n  }\n\n  .feature-card.wide p { color: rgba(253,251,248,0.65); }\n  .feature-card.wide h3 { color: var(--warm-white); }\n\n  .wide-text { flex: 1; }\n\n  .wide-visual {\n    flex: 0 0 200px;\n    text-align: center;\n    font-family: var(--serif);\n    font-size: 5rem;\n    font-weight: 300;\n    color: var(--accent);\n    font-style: italic;\n  }\n\n  \/* TESTIMONIALS *\/\n  .testimonials-bg {\n    background: var(--cream);\n    padding: 6rem 3rem;\n  }\n\n  .testimonials-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  .testimonials-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1.5rem;\n  }\n\n  .testimonial {\n    background: white;\n    border-radius: 20px;\n    padding: 2rem;\n    border: 1px solid var(--border);\n  }\n\n  .testimonial-stars {\n    color: var(--accent);\n    font-size: 0.9rem;\n    margin-bottom: 1rem;\n    letter-spacing: 0.05em;\n  }\n\n  .testimonial-text {\n    font-family: var(--serif);\n    font-size: 1.05rem;\n    font-weight: 400;\n    line-height: 1.65;\n    font-style: italic;\n    margin-bottom: 1.5rem;\n    color: var(--ink);\n  }\n\n  .testimonial-author {\n    font-size: 0.82rem;\n    font-weight: 500;\n    color: var(--muted);\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n  }\n\n  \/* CTA *\/\n  .cta-section {\n    padding: 8rem 3rem;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .cta-section::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 60%;\n    height: 80%;\n    background: var(--accent-light);\n    border-radius: 50%;\n    filter: blur(60px);\n    z-index: 0;\n  }\n\n  .cta-inner {\n    position: relative;\n    z-index: 1;\n    max-width: 600px;\n    margin: 0 auto;\n  }\n\n  .cta-section h2 {\n    font-family: var(--serif);\n    font-size: clamp(2.5rem, 5vw, 4rem);\n    font-weight: 300;\n    line-height: 1.1;\n    margin-bottom: 1.5rem;\n  }\n\n  .cta-section h2 em {\n    font-style: italic;\n    color: var(--accent);\n  }\n\n  .cta-section p {\n    color: var(--muted);\n    font-weight: 300;\n    font-size: 1rem;\n    margin-bottom: 2.5rem;\n  }\n\n  \/* FOOTER *\/\n  footer {\n    border-top: 1px solid var(--border);\n    padding: 2.5rem 3rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .footer-logo {\n    font-family: var(--serif);\n    font-size: 1.2rem;\n    font-weight: 400;\n    letter-spacing: 0.05em;\n    color: var(--ink);\n  }\n\n  .footer-logo em {\n    font-style: italic;\n    color: var(--accent);\n  }\n\n  footer p {\n    font-size: 0.8rem;\n    color: var(--muted);\n  }\n\n  @keyframes fadeUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n<\/style>\n<\/head>\n<body>\n\n<!-- NAV -->\n<nav>\n  <a href=\"#\" class=\"nav-logo\">Just <em>Because<\/em><\/a>\n  <ul class=\"nav-links\">\n    <li><a href=\"#how\">How it works<\/a><\/li>\n    <li><a href=\"#features\">Features<\/a><\/li>\n    <li><a href=\"#reviews\">Reviews<\/a><\/li>\n    <li><a href=\"#cta\" class=\"nav-cta\">Send a gift<\/a><\/li>\n  <\/ul>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\">\n  <div class=\"hero-content\">\n    <span class=\"hero-tag\">No address needed<\/span>\n    <h1>Gifts that arrive <em>just because.<\/em><\/h1>\n    <p class=\"hero-sub\">Send someone a beautiful gift without knowing their address. They get a magical link, choose their delivery details \u2014 and you take all the credit.<\/p>\n    <div class=\"hero-actions\">\n      <a href=\"#cta\" class=\"btn-primary\">Send a gift now<\/a>\n      <a href=\"#how\" class=\"btn-ghost\">How it works \u2192<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"hero-float\">\n    <div class=\"gift-card\">\n      <div class=\"gift-card-emoji\">\ud83c\udf38<\/div>\n      <div class=\"gift-card-name\">Luxury Flower Box<\/div>\n      <div class=\"gift-card-from\">From: your best friend<\/div>\n      <span class=\"gift-card-badge\">Delivered with love<\/span>\n    <\/div>\n    <div class=\"gift-card alt\">\n      <div class=\"gift-card-emoji\">\ud83c\udf6b<\/div>\n      <div class=\"gift-card-name\">Artisan Chocolate Set<\/div>\n      <div class=\"gift-card-from\">From: Mom<\/div>\n      <span class=\"gift-card-badge\">Just because \u2728<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- HOW IT WORKS -->\n<section class=\"section\" id=\"how\">\n  <p class=\"section-label\">How it works<\/p>\n  <h2 class=\"section-title\">Three steps to <em>delight.<\/em><\/h2>\n  <p class=\"section-sub\">No awkward address-asking. No ruined surprises. Just a beautiful experience for you and whoever's lucky enough to receive it.<\/p>\n\n  <div class=\"steps\">\n    <div class=\"step\">\n      <div class=\"step-num\">01<\/div>\n      <h3>Pick the perfect gift<\/h3>\n      <p>Browse curated gifts \u2014 flowers, chocolates, skincare, experiences and more \u2014 from premium local and national brands.<\/p>\n    <\/div>\n    <div class=\"step\">\n      <div class=\"step-num\">02<\/div>\n      <h3>Send them a link<\/h3>\n      <p>We send your recipient a beautiful, personalised message. They enter their own delivery details \u2014 completely in secret.<\/p>\n    <\/div>\n    <div class=\"step\">\n      <div class=\"step-num\">03<\/div>\n      <h3>They get the surprise<\/h3>\n      <p>Your gift arrives at their door. You get notified the moment they claim it. All you had to do was think of them.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- FEATURES -->\n<section class=\"section\" id=\"features\" style=\"padding-top: 0;\">\n  <p class=\"section-label\">Why Just Because<\/p>\n  <h2 class=\"section-title\">Gifting, <em>reimagined.<\/em><\/h2>\n\n  <div class=\"features-grid\">\n    <div class=\"feature-card\">\n      <div class=\"feature-icon\">\ud83d\udd12<\/div>\n      <h3>Complete privacy<\/h3>\n      <p>The recipient's address is shared directly with the courier \u2014 you never see it. Perfect for acquaintances, colleagues, or early dates.<\/p>\n    <\/div>\n    <div class=\"feature-card\">\n      <div class=\"feature-icon\">\u26a1<\/div>\n      <h3>Same-day delivery<\/h3>\n      <p>We partner with local couriers for same-day and next-day options. Because sometimes you remember at the last minute \u2014 and that's okay.<\/p>\n    <\/div>\n    <div class=\"feature-card wide\">\n      <div class=\"wide-text\">\n        <h3>Curated by occasion<\/h3>\n        <p>Birthdays, breakups, promotions, new babies, or truly just because \u2014 we have gift collections tailored to every moment, every budget, every relationship.<\/p>\n      <\/div>\n      <div class=\"wide-visual\">\"just<br>because\"<\/div>\n    <\/div>\n    <div class=\"feature-card\">\n      <div class=\"feature-icon\">\ud83d\udc8c<\/div>\n      <h3>Personal message<\/h3>\n      <p>Write a heartfelt note and it travels with the gift, beautifully designed and delivered the way your words deserve.<\/p>\n    <\/div>\n    <div class=\"feature-card\">\n      <div class=\"feature-icon\">\ud83d\udccd<\/div>\n      <h3>No address, ever<\/h3>\n      <p>Send to anyone \u2014 a friend in a new city, a client you've never met, someone you want to surprise. All you need is their phone number or email.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- TESTIMONIALS -->\n<div class=\"testimonials-bg\" id=\"reviews\">\n  <div class=\"testimonials-inner\">\n    <p class=\"section-label\">Stories<\/p>\n    <h2 class=\"section-title\" style=\"margin-bottom: 0.75rem;\">They felt <em>seen.<\/em><\/h2>\n    <p class=\"section-sub\" style=\"margin-bottom: 3rem;\">Real moments, real people.<\/p>\n\n    <div class=\"testimonials-grid\">\n      <div class=\"testimonial\">\n        <div class=\"testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-text\">\"I sent my best friend flowers after her terrible week and I didn't even have her new apartment address. She literally cried. This app is a miracle.\"<\/p>\n        <div class=\"testimonial-author\">\u2014 Priya M., London<\/div>\n      <\/div>\n      <div class=\"testimonial\">\n        <div class=\"testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-text\">\"Sent my team gift boxes to celebrate a big launch. No spreadsheet of addresses, no awkward emails. Done in ten minutes. Incredible.\"<\/p>\n        <div class=\"testimonial-author\">\u2014 James T., New York<\/div>\n      <\/div>\n      <div class=\"testimonial\">\n        <div class=\"testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n        <p class=\"testimonial-text\">\"Finally a gifting app that gets it. I've sent my mum something every month since I found Just Because. She thinks I've become a completely different person.\"<\/p>\n        <div class=\"testimonial-author\">\u2014 Sofia R., Miami<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- CTA -->\n<section class=\"cta-section\" id=\"cta\">\n  <div class=\"cta-inner\">\n    <h2>Someone deserves a gift <em>right now.<\/em><\/h2>\n    <p>No occasion needed. No address required. Just a little love, delivered beautifully.<\/p>\n    <a href=\"#\" class=\"btn-primary\" style=\"font-size: 1rem; padding: 1rem 2.5rem;\">Start sending \u2192<\/a>\n  <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n  <div class=\"footer-logo\">Just <em>Because<\/em><\/div>\n  <p>\u00a9 2026 Just Because. All rights reserved.<\/p>\n  <p>Made with love, no address needed.<\/p>\n<\/footer>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":3,"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/claudestuff.shstesting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}