Skip to content

Commit f3a46cd

Browse files
lovasoalovasoa
committed
update home page
1 parent 83b334a commit f3a46cd

File tree

2 files changed

+101
-62
lines changed

2 files changed

+101
-62
lines changed

‎examples/official-site/assets/screenshots/big_tables.webm‎

2.76 MB
Binary file not shown.

‎examples/official-site/sqlpage/templates/shell-home.handlebars‎

Lines changed: 101 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -613,7 +613,7 @@
613613
614614
#features .container {
615615
flex-direction: column;
616-
gap: 6rem;
616+
gap: 3rem;
617617
}
618618
619619
#features h2 {
@@ -716,52 +716,81 @@
716716
}
717717
}
718718
719-
.feature-comparison {
719+
.feature-section {
720+
min-height: 100vh;
721+
display: flex;
722+
align-items: center;
720723
position: relative;
721-
display: inline;
722-
margin: 1rem 0;
724+
overflow: hidden;
723725
}
724726
725-
.feature-name {
726-
transition: all 0.3s ease;
727+
.feature-section:nth-child(odd) {
728+
background: linear-gradient(135deg,
729+
var(--bg-secondary) 0%,
730+
var(--bg-tertiary) 100%);
731+
}
732+
733+
.feature-section .container {
734+
display: grid;
735+
grid-template-columns: 1fr 1fr;
736+
gap: 4rem;
737+
align-items: center;
738+
}
739+
740+
.feature-section:nth-child(even) .container {
741+
direction: rtl;
742+
}
743+
744+
.feature-section:nth-child(even) .feature-content {
745+
direction: ltr;
746+
}
747+
748+
.feature-content {
749+
max-width: 500px;
750+
}
751+
752+
.feature-content h2 {
753+
font-size: 2.5rem;
754+
margin-bottom: 1.5rem;
755+
background: var(--gradient-primary);
756+
-webkit-background-clip: text;
757+
background-clip: text;
758+
color: transparent;
759+
}
760+
761+
.feature-content p {
762+
font-size: 1.2rem;
763+
margin-bottom: 2rem;
764+
}
765+
766+
.feature-image {
727767
position: relative;
728-
cursor: help;
729-
color: #999;
768+
border-radius: 12px;
769+
overflow: hidden;
770+
box-shadow: var(--shadow-lg);
771+
transition: transform var(--transition-medium);
730772
}
731773
732-
.feature-name:hover {
733-
color: #fff;
774+
.feature-image:hover {
775+
transform: translateY(-10px);
734776
}
735777
736-
.feature-detail {
737-
z-index: 10;
738-
position: absolute;
739-
right: auto;
740-
left: 0;
741-
top: 100%;
742-
transform: translateY(10px);
778+
.feature-image img, .feature-image video {
743779
width: 100%;
744-
margin-top: 0.5rem;
745-
background: rgba(255, 255, 255, 0.15);
746-
padding: 1.5rem;
747-
backdrop-filter: blur(10px);
748-
border: 1px solid rgba(255, 255, 255, 0.2);
749-
border-radius: 8px;
750-
opacity: 0;
751-
visibility: hidden;
752-
transition: all 0.3s ease;
753-
color: rgba(255, 255, 255, 0.95);
754-
font-size: 0.9rem;
755-
line-height: 1.5;
756-
box-shadow:
757-
0 4px 12px rgba(0, 0, 0, 0.2),
758-
0 8px 24px rgba(0, 0, 0, 0.1);
780+
object-fit: cover;
781+
object-position: left;
782+
display: block;
759783
}
760784
761-
.feature-name:hover+.feature-detail {
762-
transform: translateY(0);
763-
opacity: 1;
764-
visibility: visible;
785+
@media (max-width: 968px) {
786+
.feature-section .container {
787+
grid-template-columns: 1fr;
788+
text-align: center;
789+
}
790+
791+
.feature-content {
792+
max-width: 100%;
793+
}
765794
}
766795
767796
/* FOOTER STYLES */
@@ -918,32 +947,6 @@
918947
<div class="text-content">
919948
<h2>Build sophisticated tools, easily</h2>
920949
<p>Turn boring SQL queries into beautiful, dynamic web applications.</p>
921-
<p class="subtitle">
922-
<span class="feature-comparison">
923-
<span class="feature-name">More scalable than a spreadsheet, </span>
924-
<span class="feature-detail">
925-
<strong>SQL queries</strong> handle millions of rows in milliseconds. No more slow
926-
spreadsheet formulas or memory limitations. Your app remains smooth and responsive even as
927-
your data grows.
928-
</span>
929-
</span>
930-
<span class="feature-comparison">
931-
<span class="feature-name">More dynamic than a dashboard: </span>
932-
<span class="feature-detail">
933-
Build multi-page applications with drill-down capabilities. Navigate from summaries to
934-
detailed records. <strong>Full CRUD operations</strong> support viewing, editing, and
935-
analyzing your data.
936-
</span>
937-
</span>
938-
<span class="feature-comparison">
939-
<span class="feature-name">The power of the web, without the complexity.</span>
940-
<span class="feature-detail">
941-
Write SQL, get a web app. No need for complex frameworks or multiple languages. Optional
942-
HTML/CSS/JS customization available. <strong>REST API compatible</strong> for integration
943-
with external services.
944-
</span>
945-
</span>
946-
</p>
947950
</div>
948951
<div class="features-grid">
949952
<div class="feature-card">
@@ -968,6 +971,42 @@
968971
</div>
969972
</section>
970973

974+
<section class="feature-section">
975+
<div class="container">
976+
<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>
979+
</div>
980+
<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>
982+
</div>
983+
</div>
984+
</section>
985+
986+
<section class="feature-section">
987+
<div class="container">
988+
<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>
991+
</div>
992+
<div class="feature-image">
993+
<video src="/assets/screenshots/big_tables.webm" alt="Interactive Dashboard" width="600" height="400"></video>
994+
</div>
995+
</div>
996+
</section>
997+
998+
<section class="feature-section">
999+
<div class="container">
1000+
<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>
1003+
</div>
1004+
<div class="feature-image">
1005+
<img src="/assets/feature-simple.webp" alt="Simple Web Development" width="600" height="400">
1006+
</div>
1007+
</div>
1008+
</section>
1009+
9711010
<footer>
9721011
<div class="container footer-content">
9731012
<div class="footer-links">

0 commit comments

Comments
 (0)