|
616 | 616 | gap: 3rem; |
617 | 617 | } |
618 | 618 |
|
619 | | - #features h2 { |
| 619 | + #features .gradient-title { |
620 | 620 | font-size: 3.5rem; |
621 | 621 | margin-bottom: 1rem; |
622 | 622 | background: linear-gradient(135deg, #ffffff 0%, #e1e1e1 100%); |
|
749 | 749 | max-width: 500px; |
750 | 750 | } |
751 | 751 |
|
752 | | - .feature-content h2 { |
| 752 | + .feature-content .gradient-title { |
753 | 753 | font-size: 2.5rem; |
754 | 754 | margin-bottom: 1.5rem; |
755 | 755 | background: var(--gradient-primary); |
|
775 | 775 | transform: translateY(-10px); |
776 | 776 | } |
777 | 777 |
|
778 | | - .feature-image img, .feature-image video { |
| 778 | + .feature-image img, |
| 779 | + .feature-image video { |
779 | 780 | width: 100%; |
780 | 781 | object-fit: cover; |
781 | 782 | object-position: left; |
|
787 | 788 | grid-template-columns: 1fr; |
788 | 789 | text-align: center; |
789 | 790 | } |
790 | | - |
| 791 | +
|
791 | 792 | .feature-content { |
792 | 793 | max-width: 100%; |
793 | 794 | } |
|
904 | 905 | background-position: -400% 0; |
905 | 906 | } |
906 | 907 | } |
| 908 | +
|
| 909 | + .dynamic-title { |
| 910 | + font-size: 2.5rem; |
| 911 | + background: linear-gradient(135deg, rgba(231, 131, 211, 0.95) 0%, rgba(221, 22, 22, 0.85) 100%); |
| 912 | + -webkit-background-clip: text; |
| 913 | + background-clip: text; |
| 914 | + color: transparent; |
| 915 | + text-shadow: |
| 916 | + 0 1px 1px rgba(0, 0, 0, 0.2), |
| 917 | + 0 -1px 1px rgba(255, 255, 255, 0.1); |
| 918 | + position: relative; |
| 919 | + } |
907 | 920 | </style> |
908 | 921 | </head> |
909 | 922 |
|
|
974 | 987 | <section class="feature-section"> |
975 | 988 | <div class="container"> |
976 | 989 | <div class="feature-content"> |
977 | | - <h2>More scalable than a spreadsheet</h2> |
978 | | - <p>SQL queries sort, filter, and aggregate millions of rows in milliseconds. No more slow spreadsheet formulas or memory limitations. Your app remains smooth and responsive even as your data grows.</p> |
| 990 | + <h2 class="gradient-title">More scalable than a spreadsheet</h2> |
| 991 | + <p>SQL queries sort, filter, and aggregate millions of rows in milliseconds. No more slow spreadsheet |
| 992 | + formulas or memory limitations. Your app remains smooth and responsive even as your data grows.</p> |
979 | 993 | </div> |
980 | 994 | <div class="feature-image"> |
981 | | - <video src="/assets/screenshots/big_tables.webm" alt="SQLPage displaying large tables" width="600" height="400" autoplay loop muted playsinline></video> |
| 995 | + <video src="/assets/screenshots/big_tables.webm" alt="SQLPage displaying large tables" width="600" |
| 996 | + height="400" autoplay loop muted playsinline></video> |
982 | 997 | </div> |
983 | 998 | </div> |
984 | 999 | </section> |
985 | 1000 |
|
986 | 1001 | <section class="feature-section"> |
987 | 1002 | <div class="container"> |
988 | 1003 | <div class="feature-content"> |
989 | | - <h2>More dynamic than a dashboard</h2> |
990 | | - <p>Build multi-page applications with drill-down capabilities. Navigate from summaries to detailed records. Full CRUD operations support viewing, editing, and analyzing your data.</p> |
| 1004 | + <h2 class="dynamic-title">More dynamic than a dashboard</h2> |
| 1005 | + <p>Build multi-page applications with drill-down capabilities. Navigate from summaries to detailed |
| 1006 | + records. Comment, edit, and dive into your data instead of just looking at static numbers.</p> |
991 | 1007 | </div> |
992 | 1008 | <div class="feature-image"> |
993 | | - <video src="/assets/screenshots/big_tables.webm" alt="Interactive Dashboard" width="600" height="400"></video> |
| 1009 | + <img src="/assets/screenshots/user-creation-form.png" alt="User creation form, illustrating the ability to create, edit, and delete individual data points, to go beyond simple static dashboards." |
| 1010 | + width="600" height="400"> |
994 | 1011 | </div> |
995 | 1012 | </div> |
996 | 1013 | </section> |
997 | 1014 |
|
998 | 1015 | <section class="feature-section"> |
999 | 1016 | <div class="container"> |
1000 | 1017 | <div class="feature-content"> |
1001 | | - <h2>The power of the web, without the complexity</h2> |
1002 | | - <p>Write SQL, get a web app. No need for complex frameworks or multiple languages. Optional HTML/CSS/JS customization available. REST API compatible for integration with external services.</p> |
| 1018 | + <h2 class="gradient-title">The power of the web, without the complexity</h2> |
| 1019 | + <p>Write SQL, get a web app. No need for complex frameworks or multiple languages. Optional HTML/CSS/JS |
| 1020 | + customization available. REST API compatible for integration with external services.</p> |
1003 | 1021 | </div> |
1004 | 1022 | <div class="feature-image"> |
1005 | 1023 | <img src="/assets/feature-simple.webp" alt="Simple Web Development" width="600" height="400"> |
|
0 commit comments