{"id":7,"date":"2026-04-07T08:31:40","date_gmt":"2026-04-07T08:31:40","guid":{"rendered":"https:\/\/appliable.gr\/?page_id=7"},"modified":"2026-04-07T08:39:14","modified_gmt":"2026-04-07T08:39:14","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/appliable.gr\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;700&display=swap');\n\n  :root {\n    --page-bg: #081120;\n    --page-bg-soft: #0d1830;\n    --surface: rgba(15, 26, 47, 0.78);\n    --surface-strong: rgba(18, 32, 57, 0.96);\n    --line: rgba(148, 163, 184, 0.18);\n    --line-strong: rgba(59, 130, 246, 0.28);\n    --text: #f8fbff;\n    --muted: #9fb1cb;\n    --accent: #4ea1ff;\n    --accent-soft: rgba(78, 161, 255, 0.12);\n    --glow: rgba(78, 161, 255, 0.18);\n    --success: #8be9c1;\n    --warning: #ffd37a;\n    --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);\n    --radius-xl: 28px;\n    --radius-lg: 22px;\n    --radius-md: 18px;\n    --width: 1180px;\n  }\n\n  .dc-page,\n  .dc-page * {\n    box-sizing: border-box;\n  }\n\n  .dc-page {\n    margin: 0;\n    color: var(--text);\n    font-family: \"Space Grotesk\", sans-serif;\n    background:\n      radial-gradient(circle at top left, rgba(78, 161, 255, 0.18), transparent 30%),\n      radial-gradient(circle at 85% 15%, rgba(139, 233, 193, 0.11), transparent 18%),\n      linear-gradient(180deg, #07101d 0%, #081120 35%, #0a1426 100%);\n    border-radius: 32px;\n    overflow: hidden;\n  }\n\n  .dc-page a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .dc-page img {\n    display: block;\n    max-width: 100%;\n  }\n\n  .dc-shell {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .dc-shell::before,\n  .dc-shell::after {\n    content: \"\";\n    position: absolute;\n    border-radius: 999px;\n    filter: blur(18px);\n    pointer-events: none;\n  }\n\n  .dc-shell::before {\n    top: 110px;\n    right: -80px;\n    width: 220px;\n    height: 220px;\n    background: rgba(78, 161, 255, 0.14);\n  }\n\n  .dc-shell::after {\n    left: -90px;\n    bottom: 160px;\n    width: 240px;\n    height: 240px;\n    background: rgba(139, 233, 193, 0.08);\n  }\n\n  .dc-container {\n    width: min(calc(100% - 32px), var(--width));\n    margin: 0 auto;\n  }\n\n  .dc-nav-wrap {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: blur(14px);\n    background: rgba(8, 17, 32, 0.72);\n    border-bottom: 1px solid rgba(148, 163, 184, 0.08);\n  }\n\n  .dc-nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 24px;\n    padding: 18px 0;\n  }\n\n  .dc-brand {\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n    font-weight: 700;\n    letter-spacing: -0.03em;\n  }\n\n  .dc-brand__mark {\n    width: 44px;\n    height: 44px;\n    display: grid;\n    place-items: center;\n    border-radius: 14px;\n    background: linear-gradient(135deg, var(--accent), #8dd0ff);\n    color: #05101d;\n    box-shadow: 0 12px 28px var(--glow);\n  }\n\n  .dc-brand__text {\n    font-size: 1rem;\n  }\n\n  .dc-nav__links {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n\n  .dc-nav__links a {\n    padding: 10px 14px;\n    border-radius: 999px;\n    color: var(--muted);\n    font-size: 0.95rem;\n    transition: 180ms ease;\n  }\n\n  .dc-nav__links a:hover,\n  .dc-nav__links a:focus-visible {\n    color: var(--text);\n    background: rgba(255, 255, 255, 0.05);\n  }\n\n  .dc-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    min-height: 52px;\n    padding: 0 22px;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    font-weight: 700;\n    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;\n  }\n\n  .dc-button:hover,\n  .dc-button:focus-visible {\n    transform: translateY(-2px);\n  }\n\n  .dc-button--primary {\n    background: linear-gradient(135deg, var(--accent), #7bc1ff);\n    color: #061120;\n    box-shadow: 0 18px 34px var(--glow);\n  }\n\n  .dc-button--secondary {\n    border-color: var(--line);\n    background: rgba(255, 255, 255, 0.03);\n    color: var(--text);\n  }\n\n  .dc-section {\n    padding: 92px 0;\n    position: relative;\n    z-index: 1;\n  }\n\n  .dc-hero {\n    padding-top: 64px;\n  }\n\n  .dc-hero__grid {\n    display: grid;\n    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);\n    gap: 24px;\n    align-items: stretch;\n  }\n\n  .dc-card {\n    background: var(--surface);\n    border: 1px solid var(--line);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow);\n    backdrop-filter: blur(16px);\n  }\n\n  .dc-card--inner {\n    border-radius: var(--radius-lg);\n    background: var(--surface-strong);\n  }\n\n  .dc-hero__copy {\n    padding: 44px;\n  }\n\n  .dc-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 14px;\n    border-radius: 999px;\n    background: var(--accent-soft);\n    border: 1px solid rgba(78, 161, 255, 0.18);\n    color: #8dc9ff;\n    font-size: 0.82rem;\n    font-weight: 700;\n    letter-spacing: 0.03em;\n    text-transform: uppercase;\n  }\n\n  .dc-eyebrow::before {\n    content: \"\";\n    width: 8px;\n    height: 8px;\n    border-radius: 999px;\n    background: var(--accent);\n    box-shadow: 0 0 0 6px rgba(78, 161, 255, 0.1);\n  }\n\n  .dc-hero h1,\n  .dc-section-title {\n    margin: 0;\n    letter-spacing: -0.06em;\n  }\n\n  .dc-hero h1 {\n    margin-top: 24px;\n    font-size: clamp(3rem, 7vw, 6rem);\n    line-height: 0.94;\n    max-width: 9ch;\n  }\n\n  .dc-lead {\n    margin: 22px 0 0;\n    max-width: 58ch;\n    color: var(--muted);\n    font-size: 1.05rem;\n    line-height: 1.8;\n  }\n\n  .dc-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n    margin-top: 30px;\n  }\n\n  .dc-metrics {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 14px;\n    margin-top: 34px;\n  }\n\n  .dc-metric {\n    padding: 18px;\n    border-radius: var(--radius-md);\n    border: 1px solid rgba(148, 163, 184, 0.08);\n    background: rgba(255, 255, 255, 0.03);\n  }\n\n  .dc-metric strong {\n    display: block;\n    margin-bottom: 8px;\n    font-size: 1.05rem;\n  }\n\n  .dc-metric span {\n    color: var(--muted);\n    font-size: 0.92rem;\n    line-height: 1.6;\n  }\n\n  .dc-hero__side {\n    display: grid;\n    gap: 18px;\n    align-content: start;\n  }\n\n  .dc-panel {\n    padding: 26px;\n  }\n\n  .dc-kicker {\n    display: inline-block;\n    margin-bottom: 14px;\n    color: var(--warning);\n    font-size: 0.82rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  .dc-panel h2,\n  .dc-panel h3,\n  .dc-section-title {\n    font-size: clamp(2rem, 4vw, 3.2rem);\n    line-height: 1;\n  }\n\n  .dc-panel h2,\n  .dc-panel h3 {\n    margin: 0 0 14px;\n    font-size: 1.5rem;\n  }\n\n  .dc-panel p,\n  .dc-section-copy,\n  .dc-list li,\n  .dc-project p,\n  .dc-contact p,\n  .dc-step p {\n    color: var(--muted);\n    line-height: 1.75;\n  }\n\n  .dc-list {\n    margin: 18px 0 0;\n    padding: 0;\n    list-style: none;\n    display: grid;\n    gap: 12px;\n  }\n\n  .dc-list li {\n    display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 14px 16px;\n    border-radius: 16px;\n    background: rgba(255, 255, 255, 0.03);\n    border: 1px solid rgba(148, 163, 184, 0.08);\n  }\n\n  .dc-list strong {\n    color: var(--text);\n    font-size: 0.94rem;\n    white-space: nowrap;\n  }\n\n  .dc-heading {\n    max-width: 760px;\n    margin: 0 auto 34px;\n    text-align: center;\n  }\n\n  .dc-section-title {\n    margin-bottom: 14px;\n  }\n\n  .dc-grid-2,\n  .dc-grid-3 {\n    display: grid;\n    gap: 18px;\n  }\n\n  .dc-grid-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .dc-grid-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .dc-info-card,\n  .dc-service,\n  .dc-project,\n  .dc-step,\n  .dc-contact {\n    padding: 28px;\n  }\n\n  .dc-info-card h3,\n  .dc-service h3,\n  .dc-project h3,\n  .dc-step h3,\n  .dc-contact h3 {\n    margin: 0 0 12px;\n    font-size: 1.28rem;\n    letter-spacing: -0.04em;\n  }\n\n  .dc-label {\n    display: inline-block;\n    margin-bottom: 12px;\n    color: #8dc9ff;\n    font-size: 0.82rem;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n\n  .dc-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 18px;\n  }\n\n  .dc-tags span {\n    padding: 8px 12px;\n    border-radius: 999px;\n    background: var(--accent-soft);\n    color: #8dc9ff;\n    font-size: 0.88rem;\n  }\n\n  .dc-contact-grid {\n    display: grid;\n    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);\n    gap: 18px;\n  }\n\n  .dc-contact-list {\n    margin: 18px 0 0;\n    padding: 0;\n    list-style: none;\n    display: grid;\n    gap: 10px;\n  }\n\n  .dc-contact-list li {\n    padding: 14px 16px;\n    border-radius: 16px;\n    border: 1px solid rgba(148, 163, 184, 0.08);\n    background: rgba(255, 255, 255, 0.03);\n    color: var(--muted);\n  }\n\n  .dc-footer {\n    padding: 24px 0 48px;\n    text-align: center;\n    color: var(--muted);\n    font-size: 0.92rem;\n  }\n\n  @media (max-width: 980px) {\n    .dc-hero__grid,\n    .dc-grid-2,\n    .dc-grid-3,\n    .dc-contact-grid,\n    .dc-metrics {\n      grid-template-columns: 1fr;\n    }\n\n    .dc-hero__copy,\n    .dc-panel,\n    .dc-info-card,\n    .dc-service,\n    .dc-project,\n    .dc-step,\n    .dc-contact {\n      padding: 24px;\n    }\n  }\n\n  @media (max-width: 720px) {\n    .dc-page {\n      border-radius: 22px;\n    }\n\n    .dc-nav {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    .dc-nav__links {\n      width: 100%;\n    }\n\n    .dc-actions {\n      flex-direction: column;\n    }\n\n    .dc-button {\n      width: 100%;\n    }\n\n    .dc-section {\n      padding: 72px 0;\n    }\n\n    .dc-hero {\n      padding-top: 34px;\n    }\n  }\n<\/style>\n\n<div class=\"dc-page\">\n  <div class=\"dc-shell\">\n    <div class=\"dc-nav-wrap\">\n      <div class=\"dc-container\">\n        <nav class=\"dc-nav\">\n          <a class=\"dc-brand\" href=\"#home\">\n            <span class=\"dc-brand__mark\">C<\/span>\n            <span class=\"dc-brand__text\">[Company Name]<\/span>\n          <\/a>\n\n          <div class=\"dc-nav__links\">\n            <a href=\"#home\">Home<\/a>\n            <a href=\"#about\">About<\/a>\n            <a href=\"#services\">Services<\/a>\n            <a href=\"#work\">Work<\/a>\n            <a href=\"#contact\">Contact<\/a>\n          <\/div>\n        <\/nav>\n      <\/div>\n    <\/div>\n\n    <section class=\"dc-section dc-hero\" id=\"home\">\n      <div class=\"dc-container\">\n        <div class=\"dc-hero__grid\">\n          <div class=\"dc-card dc-hero__copy\">\n            <span class=\"dc-eyebrow\">Tech company skeleton<\/span>\n            <h1>[Main headline goes here]<\/h1>\n            <p class=\"dc-lead\">\n              [Short company introduction. This should explain what your company does in one or two clear sentences.]\n            <\/p>\n\n            <div class=\"dc-actions\">\n              <a class=\"dc-button dc-button--primary\" href=\"#contact\">Talk To Us<\/a>\n              <a class=\"dc-button dc-button--secondary\" href=\"#services\">Our Services<\/a>\n            <\/div>\n\n            <div class=\"dc-metrics\">\n              <div class=\"dc-metric\">\n                <strong>[Metric \/ Focus]<\/strong>\n                <span>[Short supporting line]<\/span>\n              <\/div>\n              <div class=\"dc-metric\">\n                <strong>[Metric \/ Focus]<\/strong>\n                <span>[Short supporting line]<\/span>\n              <\/div>\n              <div class=\"dc-metric\">\n                <strong>[Metric \/ Focus]<\/strong>\n                <span>[Short supporting line]<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"dc-hero__side\">\n            <div class=\"dc-card dc-panel\">\n              <span class=\"dc-kicker\">Overview<\/span>\n              <h2>[Quick summary block]<\/h2>\n              <p>[Use this area for one stronger positioning statement or a short explanation of your approach.]<\/p>\n              <ul class=\"dc-list\">\n                <li>\n                  <span>[Point one]<\/span>\n                  <strong>[Status]<\/strong>\n                <\/li>\n                <li>\n                  <span>[Point two]<\/span>\n                  <strong>[Status]<\/strong>\n                <\/li>\n                <li>\n                  <span>[Point three]<\/span>\n                  <strong>[Status]<\/strong>\n                <\/li>\n              <\/ul>\n            <\/div>\n\n            <div class=\"dc-card dc-panel dc-card--inner\">\n              <span class=\"dc-kicker\">Highlight<\/span>\n              <h3>[Secondary message]<\/h3>\n              <p>[This smaller card works well for a niche, benefit, or audience focus.]<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"dc-section\" id=\"about\">\n      <div class=\"dc-container\">\n        <div class=\"dc-heading\">\n          <h2 class=\"dc-section-title\">About<\/h2>\n          <p class=\"dc-section-copy\">\n            [A simple two to four sentence company summary. Keep it direct and practical.]\n          <\/p>\n        <\/div>\n\n        <div class=\"dc-grid-2\">\n          <div class=\"dc-card dc-info-card\">\n            <span class=\"dc-label\">Who We Are<\/span>\n            <h3>[About card title]<\/h3>\n            <p>[Short paragraph placeholder.]<\/p>\n          <\/div>\n\n          <div class=\"dc-card dc-info-card\">\n            <span class=\"dc-label\">Why Clients Choose Us<\/span>\n            <h3>[Value card title]<\/h3>\n            <p>[Short paragraph placeholder.]<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"dc-section\" id=\"services\">\n      <div class=\"dc-container\">\n        <div class=\"dc-heading\">\n          <h2 class=\"dc-section-title\">Services<\/h2>\n          <p class=\"dc-section-copy\">\n            [Use this section for your core offers. Three cards work very well here.]\n          <\/p>\n        <\/div>\n\n        <div class=\"dc-grid-3\">\n          <div class=\"dc-card dc-service\">\n            <span class=\"dc-label\">01<\/span>\n            <h3>[Service one]<\/h3>\n            <p>[Short description of service one.]<\/p>\n          <\/div>\n\n          <div class=\"dc-card dc-service\">\n            <span class=\"dc-label\">02<\/span>\n            <h3>[Service two]<\/h3>\n            <p>[Short description of service two.]<\/p>\n          <\/div>\n\n          <div class=\"dc-card dc-service\">\n            <span class=\"dc-label\">03<\/span>\n            <h3>[Service three]<\/h3>\n            <p>[Short description of service three.]<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"dc-section\" id=\"work\">\n      <div class=\"dc-container\">\n        <div class=\"dc-heading\">\n          <h2 class=\"dc-section-title\">Selected Work<\/h2>\n          <p class=\"dc-section-copy\">\n            [This section is inspired by the card layout from the sample site, adapted for company case studies or projects.]\n          <\/p>\n        <\/div>\n\n        <div class=\"dc-grid-3\">\n          <div class=\"dc-card dc-project\">\n            <span class=\"dc-label\">Project 01<\/span>\n            <h3>[Project name]<\/h3>\n            <p>[Short result-focused project summary.]<\/p>\n            <div class=\"dc-tags\">\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"dc-card dc-project\">\n            <span class=\"dc-label\">Project 02<\/span>\n            <h3>[Project name]<\/h3>\n            <p>[Short result-focused project summary.]<\/p>\n            <div class=\"dc-tags\">\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"dc-card dc-project\">\n            <span class=\"dc-label\">Project 03<\/span>\n            <h3>[Project name]<\/h3>\n            <p>[Short result-focused project summary.]<\/p>\n            <div class=\"dc-tags\">\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n              <span>[Tag]<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"dc-section\">\n      <div class=\"dc-container\">\n        <div class=\"dc-heading\">\n          <h2 class=\"dc-section-title\">Process<\/h2>\n          <p class=\"dc-section-copy\">\n            [Optional section. This replaces the personal \u201cexperience\u201d feel from the sample with a company-friendly workflow.]\n          <\/p>\n        <\/div>\n\n        <div class=\"dc-grid-3\">\n          <div class=\"dc-card dc-step\">\n            <span class=\"dc-label\">Step 01<\/span>\n            <h3>[Discovery]<\/h3>\n            <p>[Short description.]<\/p>\n          <\/div>\n\n          <div class=\"dc-card dc-step\">\n            <span class=\"dc-label\">Step 02<\/span>\n            <h3>[Build]<\/h3>\n            <p>[Short description.]<\/p>\n          <\/div>\n\n          <div class=\"dc-card dc-step\">\n            <span class=\"dc-label\">Step 03<\/span>\n            <h3>[Launch \/ Support]<\/h3>\n            <p>[Short description.]<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"dc-section\" id=\"contact\">\n      <div class=\"dc-container\">\n        <div class=\"dc-contact-grid\">\n          <div class=\"dc-card dc-contact\">\n            <span class=\"dc-kicker\">Contact<\/span>\n            <h3>[Ready to work together?]<\/h3>\n            <p>\n              [Use this area for your final call to action. We can later replace this with your real text, email, phone, WhatsApp, form link, or address.]\n            <\/p>\n\n            <div class=\"dc-actions\">\n              <a class=\"dc-button dc-button--primary\" href=\"#\">[Primary action]<\/a>\n              <a class=\"dc-button dc-button--secondary\" href=\"#\">[Secondary action]<\/a>\n            <\/div>\n          <\/div>\n\n          <div class=\"dc-card dc-contact dc-card--inner\">\n            <span class=\"dc-label\">Details<\/span>\n            <h3>[Contact details block]<\/h3>\n            <ul class=\"dc-contact-list\">\n              <li>[Email]<\/li>\n              <li>[Phone]<\/li>\n              <li>[Location]<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <div class=\"dc-container\">\n      <footer class=\"dc-footer\">\n        [Company Name] \u2022 [Optional small footer text]\n      <\/footer>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C [Company Name] Home About Services Work Contact Tech company skeleton [Main headline goes here] [Short company introduction. This should explain what your company does in one or two clear sentences.] Talk To Us Our Services [Metric \/ Focus] [Short supporting line] [Metric \/ Focus] [Short supporting line] [Metric \/ Focus] [Short supporting line] Overview&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"fullwidth.php","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/appliable.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":1,"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/appliable.gr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/appliable.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}