page-builder/data.json at main · WIW-Digital/page-builder · GitHub

1
2
3
4
5
6
7
8
{
{
    "skynefh": {
        "slug": "skynefh",
        "title": "Skynefh",
        "content": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n  <title>Skynefh | Modern Landing Page<\/title>\r\n\r\n  <style>\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n      font-family: \"Segoe UI\", sans-serif;\r\n    }\r\n\r\n    body {\r\n      background: #f8fafc;\r\n      color: #1e293b;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    \/* ================= NAVBAR ================= *\/\r\n    header {\r\n      position: sticky;\r\n      top: 0;\r\n      background: rgba(255,255,255,0.9);\r\n      backdrop-filter: blur(10px);\r\n      box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n      z-index: 100;\r\n    }\r\n\r\n    nav {\r\n      max-width: 1200px;\r\n      margin: auto;\r\n      padding: 16px 20px;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    nav .logo {\r\n      font-size: 22px;\r\n      font-weight: bold;\r\n      color: #2563eb;\r\n    }\r\n\r\n    nav ul {\r\n      list-style: none;\r\n      display: flex;\r\n      gap: 24px;\r\n    }\r\n\r\n    nav ul li a {\r\n      text-decoration: none;\r\n      color: #334155;\r\n      font-weight: 500;\r\n      transition: 0.3s;\r\n    }\r\n\r\n    nav ul li a:hover {\r\n      color: #2563eb;\r\n    }\r\n\r\n    \/* ================= HERO ================= *\/\r\n    .hero {\r\n      min-height: 90vh;\r\n      display: flex;\r\n      align-items: center;\r\n      background: linear-gradient(\r\n          rgba(0,0,0,0.5),\r\n          rgba(0,0,0,0.5)\r\n        ),\r\n        url(\"https:\/\/images.unsplash.com\/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80\");\r\n      background-size: cover;\r\n      background-position: center;\r\n      color: white;\r\n    }\r\n\r\n    .hero-content {\r\n      max-width: 1200px;\r\n      margin: auto;\r\n      padding: 0 20px;\r\n    }\r\n\r\n    .hero h1 {\r\n      font-size: 48px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .hero p {\r\n      font-size: 18px;\r\n      max-width: 600px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .btn {\r\n      display: inline-block;\r\n      padding: 14px 28px;\r\n      background: #2563eb;\r\n      color: white;\r\n      text-decoration: none;\r\n      border-radius: 10px;\r\n      font-weight: 600;\r\n      transition: 0.3s;\r\n    }\r\n\r\n    .btn:hover {\r\n      background: #1e40af;\r\n    }\r\n\r\n    \/* ================= SECTION ================= *\/\r\n    section {\r\n      padding: 80px 20px;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1200px;\r\n      margin: auto;\r\n    }\r\n\r\n    .section-title {\r\n      text-align: center;\r\n      margin-bottom: 50px;\r\n    }\r\n\r\n    .section-title h2 {\r\n      font-size: 36px;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .section-title p {\r\n      color: #64748b;\r\n    }\r\n\r\n    \/* ================= CARDS ================= *\/\r\n    .cards {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n      gap: 24px;\r\n    }\r\n\r\n    .card {\r\n      background: white;\r\n      border-radius: 16px;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n      transition: 0.3s;\r\n    }\r\n\r\n    .card:hover {\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    .card img {\r\n      width: 100%;\r\n      height: 180px;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .card-body {\r\n      padding: 20px;\r\n    }\r\n\r\n    .card-body h3 {\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .card-body p {\r\n      color: #64748b;\r\n      font-size: 14px;\r\n    }\r\n\r\n    \/* ================= FOOTER ================= *\/\r\n    footer {\r\n      background: #020617;\r\n      color: #cbd5f5;\r\n      padding: 40px 20px;\r\n    }\r\n\r\n    .footer-content {\r\n      max-width: 1200px;\r\n      margin: auto;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 20px;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    footer h4 {\r\n      margin-bottom: 12px;\r\n      color: white;\r\n    }\r\n\r\n    footer a {\r\n      display: block;\r\n      color: #cbd5f5;\r\n      text-decoration: none;\r\n      margin-bottom: 6px;\r\n      font-size: 14px;\r\n    }\r\n\r\n    footer a:hover {\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .copyright {\r\n      text-align: center;\r\n      margin-top: 30px;\r\n      font-size: 14px;\r\n      color: #94a3b8;\r\n    }\r\n\r\n    \/* ================= RESPONSIVE ================= *\/\r\n    @media (max-width: 768px) {\r\n      .hero h1 {\r\n        font-size: 36px;\r\n      }\r\n\r\n      nav ul {\r\n        display: none;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  \r\n  <header>\r\n    <nav>\r\n      <div class=\"logo\">Skynefh<\/div>\r\n      <ul>\r\n        <li><a href=\"#\">Home<\/a><\/li>\r\n        <li><a href=\"#\">Features<\/a><\/li>\r\n        <li><a href=\"#\">About<\/a><\/li>\r\n        <li><a href=\"#\">Contact<\/a><\/li>\r\n      <\/ul>\r\n    <\/nav>\r\n  <\/header>\r\n\r\n  \r\n  <section class=\"hero\">\r\n    <div class=\"hero-content\">\r\n      <h1>Build Modern Websites at Skynefh<\/h1>\r\n      <p>\r\n        Fast, modern, and responsive landing pages for your projects.\r\n      <\/p>\r\n      <a href=\"https:\/\/skynefh.my.id\" class=\"btn\">Get Started<\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  \r\n  <section>\r\n    <div class=\"container\">\r\n      <div class=\"section-title\">\r\n        <h2>Premium Experience<\/h2>\r\n        <p>Optimized for performance and aesthetics.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cards\">\r\n        <div class=\"card\">\r\n          <img src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80\" alt=\"\">\r\n          <div class=\"card-body\">\r\n            <h3>Modern Design<\/h3>\r\n            <p>Clean and professional UI for modern users.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"card\">\r\n          <img src=\"https:\/\/images.unsplash.com\/photo-1556155092-8707de31f9c4?auto=format&fit=crop&w=800&q=80\" alt=\"\">\r\n          <div class=\"card-body\">\r\n            <h3>Fully Responsive<\/h3>\r\n            <p>Perfect display on mobile, tablet, and desktop.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"card\">\r\n          <img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&q=80\" alt=\"\">\r\n          <div class=\"card-body\">\r\n            <h3>Lightweight<\/h3>\r\n            <p>Optimized for low-resource environments.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  \r\n  <footer>\r\n    <div class=\"footer-content\">\r\n      <div>\r\n        <h4>Skynefh<\/h4>\r\n        <p>Professional landing page solution.<\/p>\r\n      <\/div>\r\n\r\n      <div>\r\n        <h4>Menu<\/h4>\r\n        <a href=\"#\">Home<\/a>\r\n        <a href=\"#\">Features<\/a>\r\n        <a href=\"#\">About<\/a>\r\n        <a href=\"#\">Contact<\/a>\r\n      <\/div>\r\n\r\n      <div>\r\n        <h4>Follow<\/h4>\r\n        <a href=\"https:\/\/instagram.com\/skynefh\">Instagram<\/a>\r\n        <a href=\"https:\/\/x.com\/skynefh\">Twitter<\/a>\r\n        <a href=\"https:\/\/github.com\/skynefh\">GitHub<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"copyright\">\r\n      \u00a9 2025 Skynefh. All rights reserved.\r\n    <\/div>\r\n  <\/footer>\r\n\r\n<\/body>\r\n<\/html>\r\n"
    }
}