create-flexireact 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +97 -40
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -616,7 +616,7 @@ interface LayoutProps {
|
|
|
616
616
|
|
|
617
617
|
export default function RootLayout({ children }: LayoutProps) {
|
|
618
618
|
return (
|
|
619
|
-
<div className="
|
|
619
|
+
<div className="app">
|
|
620
620
|
<Navbar />
|
|
621
621
|
<main>{children}</main>
|
|
622
622
|
<Footer />
|
|
@@ -643,39 +643,45 @@ export default function HomePage() {
|
|
|
643
643
|
// Styles
|
|
644
644
|
// ============================================================================
|
|
645
645
|
|
|
646
|
-
'app/styles/globals.css': () =>
|
|
647
|
-
@tailwind components;
|
|
648
|
-
@tailwind utilities;
|
|
646
|
+
'app/styles/globals.css': () => `/* FlexiReact Default Template Styles */
|
|
649
647
|
|
|
650
648
|
:root {
|
|
651
649
|
--bg: #0a0a0a;
|
|
652
650
|
--fg: #fafafa;
|
|
653
651
|
--primary: #10b981;
|
|
652
|
+
--primary-light: #34d399;
|
|
653
|
+
--accent: #06b6d4;
|
|
654
654
|
--muted: #71717a;
|
|
655
655
|
--border: #27272a;
|
|
656
656
|
--card: #18181b;
|
|
657
657
|
}
|
|
658
658
|
|
|
659
|
-
|
|
659
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
660
|
+
|
|
661
|
+
html { scroll-behavior: smooth; }
|
|
660
662
|
|
|
661
663
|
body {
|
|
662
|
-
font-family: 'Inter', system-ui, sans-serif;
|
|
664
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
663
665
|
background: var(--bg);
|
|
664
666
|
color: var(--fg);
|
|
665
667
|
min-height: 100vh;
|
|
666
668
|
-webkit-font-smoothing: antialiased;
|
|
669
|
+
line-height: 1.6;
|
|
667
670
|
}
|
|
668
671
|
|
|
669
|
-
a { color: inherit; text-decoration: none; }
|
|
672
|
+
a { color: inherit; text-decoration: none; transition: color 0.2s; }
|
|
670
673
|
a:hover { color: var(--primary); }
|
|
671
674
|
|
|
675
|
+
/* Layout */
|
|
676
|
+
.app { min-height: 100vh; }
|
|
677
|
+
|
|
672
678
|
/* Navbar */
|
|
673
679
|
.navbar {
|
|
674
680
|
position: sticky;
|
|
675
681
|
top: 0;
|
|
676
682
|
z-index: 50;
|
|
677
683
|
border-bottom: 1px solid var(--border);
|
|
678
|
-
background: rgba(10,10,10,0.
|
|
684
|
+
background: rgba(10,10,10,0.85);
|
|
679
685
|
backdrop-filter: blur(12px);
|
|
680
686
|
}
|
|
681
687
|
.navbar-inner {
|
|
@@ -690,15 +696,16 @@ a:hover { color: var(--primary); }
|
|
|
690
696
|
.logo-icon {
|
|
691
697
|
width: 32px;
|
|
692
698
|
height: 32px;
|
|
693
|
-
background: linear-gradient(135deg, var(--primary),
|
|
699
|
+
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
694
700
|
border-radius: 8px;
|
|
695
701
|
display: flex;
|
|
696
702
|
align-items: center;
|
|
697
703
|
justify-content: center;
|
|
704
|
+
font-size: 1rem;
|
|
698
705
|
}
|
|
699
706
|
.logo-text { font-weight: 700; font-size: 1.125rem; }
|
|
700
|
-
.nav-links { display: flex; gap:
|
|
701
|
-
.nav-links a { color: var(--muted); font-size: 0.
|
|
707
|
+
.nav-links { display: flex; gap: 2rem; }
|
|
708
|
+
.nav-links a { color: var(--muted); font-size: 0.9375rem; font-weight: 500; }
|
|
702
709
|
.nav-links a:hover { color: var(--fg); }
|
|
703
710
|
|
|
704
711
|
/* Hero */
|
|
@@ -709,48 +716,57 @@ a:hover { color: var(--primary); }
|
|
|
709
716
|
align-items: center;
|
|
710
717
|
justify-content: center;
|
|
711
718
|
overflow: hidden;
|
|
719
|
+
padding: 4rem 1.5rem;
|
|
712
720
|
}
|
|
713
721
|
.hero-glow {
|
|
714
722
|
position: absolute;
|
|
715
723
|
top: 50%;
|
|
716
724
|
left: 50%;
|
|
717
725
|
transform: translate(-50%, -50%);
|
|
718
|
-
width:
|
|
719
|
-
height:
|
|
720
|
-
background: radial-gradient(circle, rgba(16,185,129,0.
|
|
726
|
+
width: 700px;
|
|
727
|
+
height: 700px;
|
|
728
|
+
background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%);
|
|
721
729
|
pointer-events: none;
|
|
722
730
|
}
|
|
723
731
|
.hero-content {
|
|
732
|
+
position: relative;
|
|
733
|
+
z-index: 1;
|
|
724
734
|
text-align: center;
|
|
725
735
|
padding: 2rem;
|
|
726
736
|
max-width: 800px;
|
|
727
737
|
}
|
|
728
738
|
.hero-badge {
|
|
729
|
-
display: inline-
|
|
730
|
-
|
|
739
|
+
display: inline-flex;
|
|
740
|
+
align-items: center;
|
|
741
|
+
gap: 0.5rem;
|
|
742
|
+
padding: 0.5rem 1.25rem;
|
|
731
743
|
background: rgba(16,185,129,0.1);
|
|
732
744
|
border: 1px solid rgba(16,185,129,0.2);
|
|
733
745
|
border-radius: 9999px;
|
|
734
746
|
font-size: 0.875rem;
|
|
747
|
+
font-weight: 500;
|
|
735
748
|
color: var(--primary);
|
|
736
749
|
margin-bottom: 2rem;
|
|
737
750
|
}
|
|
738
751
|
.hero-title {
|
|
739
|
-
font-size: clamp(2.5rem,
|
|
752
|
+
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
|
740
753
|
font-weight: 800;
|
|
741
754
|
line-height: 1.1;
|
|
755
|
+
letter-spacing: -0.02em;
|
|
742
756
|
margin-bottom: 1.5rem;
|
|
743
757
|
}
|
|
744
758
|
.gradient-text {
|
|
745
|
-
background: linear-gradient(
|
|
759
|
+
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
746
760
|
-webkit-background-clip: text;
|
|
747
761
|
-webkit-text-fill-color: transparent;
|
|
762
|
+
background-clip: text;
|
|
748
763
|
}
|
|
749
764
|
.hero-subtitle {
|
|
750
765
|
font-size: 1.125rem;
|
|
751
766
|
color: var(--muted);
|
|
752
767
|
line-height: 1.7;
|
|
753
|
-
|
|
768
|
+
max-width: 600px;
|
|
769
|
+
margin: 0 auto 2.5rem;
|
|
754
770
|
}
|
|
755
771
|
.hero-buttons {
|
|
756
772
|
display: flex;
|
|
@@ -760,21 +776,36 @@ a:hover { color: var(--primary); }
|
|
|
760
776
|
margin-bottom: 3rem;
|
|
761
777
|
}
|
|
762
778
|
.btn-primary {
|
|
779
|
+
display: inline-flex;
|
|
780
|
+
align-items: center;
|
|
781
|
+
gap: 0.5rem;
|
|
763
782
|
padding: 0.875rem 2rem;
|
|
764
|
-
background: var(--primary);
|
|
783
|
+
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
765
784
|
color: #000;
|
|
766
785
|
font-weight: 600;
|
|
767
|
-
border-radius:
|
|
768
|
-
transition:
|
|
786
|
+
border-radius: 10px;
|
|
787
|
+
transition: all 0.2s;
|
|
788
|
+
}
|
|
789
|
+
.btn-primary:hover {
|
|
790
|
+
transform: translateY(-2px);
|
|
791
|
+
box-shadow: 0 10px 30px rgba(16,185,129,0.3);
|
|
792
|
+
color: #000;
|
|
769
793
|
}
|
|
770
|
-
.btn-primary:hover { opacity: 0.9; color: #000; }
|
|
771
794
|
.btn-outline {
|
|
795
|
+
display: inline-flex;
|
|
796
|
+
align-items: center;
|
|
797
|
+
gap: 0.5rem;
|
|
772
798
|
padding: 0.875rem 2rem;
|
|
773
799
|
border: 1px solid var(--border);
|
|
774
|
-
border-radius:
|
|
775
|
-
|
|
800
|
+
border-radius: 10px;
|
|
801
|
+
font-weight: 600;
|
|
802
|
+
transition: all 0.2s;
|
|
803
|
+
}
|
|
804
|
+
.btn-outline:hover {
|
|
805
|
+
border-color: var(--primary);
|
|
806
|
+
background: rgba(16,185,129,0.1);
|
|
807
|
+
color: var(--fg);
|
|
776
808
|
}
|
|
777
|
-
.btn-outline:hover { border-color: var(--primary); color: var(--fg); }
|
|
778
809
|
|
|
779
810
|
/* Terminal */
|
|
780
811
|
.terminal {
|
|
@@ -784,23 +815,24 @@ a:hover { color: var(--primary); }
|
|
|
784
815
|
max-width: 500px;
|
|
785
816
|
margin: 0 auto;
|
|
786
817
|
overflow: hidden;
|
|
818
|
+
text-align: left;
|
|
787
819
|
}
|
|
788
820
|
.terminal-header {
|
|
789
|
-
padding: 0.
|
|
821
|
+
padding: 0.875rem 1rem;
|
|
790
822
|
border-bottom: 1px solid var(--border);
|
|
791
823
|
display: flex;
|
|
792
824
|
gap: 0.5rem;
|
|
825
|
+
background: rgba(255,255,255,0.02);
|
|
793
826
|
}
|
|
794
827
|
.dot { width: 12px; height: 12px; border-radius: 50%; }
|
|
795
828
|
.dot.red { background: #ef4444; }
|
|
796
829
|
.dot.yellow { background: #eab308; }
|
|
797
830
|
.dot.green { background: #22c55e; }
|
|
798
831
|
.terminal-body {
|
|
799
|
-
padding:
|
|
800
|
-
font-family: monospace;
|
|
832
|
+
padding: 1.25rem;
|
|
833
|
+
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
801
834
|
font-size: 0.875rem;
|
|
802
|
-
|
|
803
|
-
line-height: 1.6;
|
|
835
|
+
line-height: 1.8;
|
|
804
836
|
}
|
|
805
837
|
.dim { color: var(--muted); }
|
|
806
838
|
.green { color: var(--primary); }
|
|
@@ -815,34 +847,50 @@ a:hover { color: var(--primary); }
|
|
|
815
847
|
font-size: 2rem;
|
|
816
848
|
font-weight: 700;
|
|
817
849
|
text-align: center;
|
|
818
|
-
margin-bottom:
|
|
850
|
+
margin-bottom: 0.75rem;
|
|
819
851
|
}
|
|
820
852
|
.features-subtitle {
|
|
821
853
|
text-align: center;
|
|
822
854
|
color: var(--muted);
|
|
823
855
|
margin-bottom: 3rem;
|
|
856
|
+
font-size: 1.0625rem;
|
|
824
857
|
}
|
|
825
858
|
.features-grid {
|
|
826
859
|
display: grid;
|
|
827
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
860
|
+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
828
861
|
gap: 1.5rem;
|
|
829
862
|
}
|
|
830
863
|
.feature-card {
|
|
831
864
|
background: var(--card);
|
|
832
865
|
border: 1px solid var(--border);
|
|
866
|
+
border-radius: 16px;
|
|
867
|
+
padding: 1.75rem;
|
|
868
|
+
transition: all 0.3s;
|
|
869
|
+
}
|
|
870
|
+
.feature-card:hover {
|
|
871
|
+
border-color: var(--primary);
|
|
872
|
+
transform: translateY(-4px);
|
|
873
|
+
}
|
|
874
|
+
.feature-icon {
|
|
875
|
+
font-size: 2rem;
|
|
876
|
+
margin-bottom: 1rem;
|
|
877
|
+
display: block;
|
|
878
|
+
width: 48px;
|
|
879
|
+
height: 48px;
|
|
880
|
+
display: flex;
|
|
881
|
+
align-items: center;
|
|
882
|
+
justify-content: center;
|
|
883
|
+
background: rgba(16,185,129,0.1);
|
|
833
884
|
border-radius: 12px;
|
|
834
|
-
padding: 1.5rem;
|
|
835
|
-
transition: border-color 0.2s;
|
|
836
885
|
}
|
|
837
|
-
.feature-
|
|
838
|
-
.feature-
|
|
839
|
-
.feature-title { font-weight: 600; margin-bottom: 0.5rem; }
|
|
840
|
-
.feature-desc { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
|
|
886
|
+
.feature-title { font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.5rem; }
|
|
887
|
+
.feature-desc { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
|
|
841
888
|
|
|
842
889
|
/* Footer */
|
|
843
890
|
.footer {
|
|
844
891
|
border-top: 1px solid var(--border);
|
|
845
892
|
padding: 2rem 1.5rem;
|
|
893
|
+
margin-top: 2rem;
|
|
846
894
|
}
|
|
847
895
|
.footer-inner {
|
|
848
896
|
max-width: 1200px;
|
|
@@ -856,7 +904,16 @@ a:hover { color: var(--primary); }
|
|
|
856
904
|
color: var(--muted);
|
|
857
905
|
}
|
|
858
906
|
.footer-links { display: flex; gap: 1.5rem; }
|
|
859
|
-
.footer-links a:hover { color: var(--
|
|
907
|
+
.footer-links a:hover { color: var(--primary); }
|
|
908
|
+
|
|
909
|
+
/* Responsive */
|
|
910
|
+
@media (max-width: 768px) {
|
|
911
|
+
.nav-links { display: none; }
|
|
912
|
+
.hero { min-height: auto; padding: 6rem 1.5rem 4rem; }
|
|
913
|
+
.hero-buttons { flex-direction: column; align-items: center; }
|
|
914
|
+
.btn-primary, .btn-outline { width: 100%; justify-content: center; }
|
|
915
|
+
.footer-inner { flex-direction: column; text-align: center; }
|
|
916
|
+
}
|
|
860
917
|
`,
|
|
861
918
|
|
|
862
919
|
// ============================================================================
|