@react-cupertino-ui/landing-page-template 1.0.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.
Files changed (5) hide show
  1. package/dist/index.css +88 -0
  2. package/dist/index.d.ts +23 -0
  3. package/dist/index.js +22 -0
  4. package/dist/index.scss +102 -0
  5. package/package.json +36 -0
package/dist/index.css ADDED
@@ -0,0 +1,88 @@
1
+ .react-cupertino-ui-landing-page {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 100%;
5
+ min-height: 100vh;
6
+ }
7
+ .react-cupertino-ui-landing-page__container {
8
+ max-width: 1200px;
9
+ margin: 0 auto;
10
+ padding: 0 2rem;
11
+ width: 100%;
12
+ }
13
+ .react-cupertino-ui-landing-page__hero {
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: center;
18
+ text-align: center;
19
+ padding: 8rem 2rem 6rem;
20
+ background: radial-gradient(circle at 50% 0%, rgba(0, 122, 255, 0.15), transparent 60%);
21
+ gap: 1.5rem;
22
+ }
23
+ .react-cupertino-ui-landing-page__hero-title {
24
+ font-size: 3.5rem;
25
+ font-weight: 800;
26
+ letter-spacing: -0.02em;
27
+ line-height: 1.1;
28
+ background: linear-gradient(135deg, #000 0%, #333 100%);
29
+ -webkit-background-clip: text;
30
+ -webkit-text-fill-color: transparent;
31
+ }
32
+ @media (prefers-color-scheme: dark) {
33
+ .react-cupertino-ui-landing-page__hero-title {
34
+ background: linear-gradient(135deg, #fff 0%, #ccc 100%);
35
+ -webkit-background-clip: text;
36
+ -webkit-text-fill-color: transparent;
37
+ }
38
+ }
39
+ .react-cupertino-ui-landing-page__hero-subtitle {
40
+ font-size: 1.25rem;
41
+ color: var(--color-foreground-muted, #666);
42
+ max-width: 600px;
43
+ }
44
+ .react-cupertino-ui-landing-page__hero-actions {
45
+ display: flex;
46
+ gap: 1rem;
47
+ margin-top: 1rem;
48
+ }
49
+ .react-cupertino-ui-landing-page__features {
50
+ padding: 4rem 0;
51
+ }
52
+ .react-cupertino-ui-landing-page__grid {
53
+ display: grid;
54
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
55
+ gap: 2rem;
56
+ }
57
+ .react-cupertino-ui-landing-page__about {
58
+ padding: 6rem 0;
59
+ background: var(--color-background-secondary, rgba(0, 0, 0, 0.03));
60
+ text-align: center;
61
+ }
62
+ .react-cupertino-ui-landing-page__about .react-cupertino-ui-landing-page__section-title {
63
+ font-size: 2.5rem;
64
+ font-weight: 700;
65
+ margin-bottom: 1.5rem;
66
+ }
67
+ .react-cupertino-ui-landing-page__about .react-cupertino-ui-landing-page__section-content {
68
+ font-size: 1.125rem;
69
+ color: var(--color-foreground-muted, #666);
70
+ max-width: 800px;
71
+ margin: 0 auto;
72
+ line-height: 1.6;
73
+ }
74
+ .react-cupertino-ui-landing-page__contact {
75
+ padding: 6rem 0;
76
+ display: flex;
77
+ justify-content: center;
78
+ }
79
+ .react-cupertino-ui-landing-page__contact-card {
80
+ max-width: 500px;
81
+ width: 100%;
82
+ margin: 0 auto;
83
+ }
84
+ .react-cupertino-ui-landing-page__contact-form {
85
+ display: flex;
86
+ flex-direction: column;
87
+ gap: 1rem;
88
+ }
package/dist/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import * as React from "react";
2
+ import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
3
+ import "./index.scss";
4
+ export interface FeatureItem {
5
+ title: string;
6
+ description: string;
7
+ icon?: React.ReactNode;
8
+ }
9
+ export interface LandingPageTemplateProps extends Omit<BaseProps<HTMLDivElement>, "children" | "variant" | "size"> {
10
+ heroTitle?: string;
11
+ heroSubtitle?: string;
12
+ heroCtaText?: string;
13
+ heroSecondaryText?: string;
14
+ onHeroCtaClick?: () => void;
15
+ onHeroSecondaryClick?: () => void;
16
+ features?: FeatureItem[];
17
+ aboutTitle?: string;
18
+ aboutContent?: string;
19
+ contactTitle?: string;
20
+ onContactSubmit?: (data: Record<string, string>) => void;
21
+ }
22
+ declare const LandingPageTemplate: React.ForwardRefExoticComponent<LandingPageTemplateProps & React.RefAttributes<HTMLDivElement>>;
23
+ export { LandingPageTemplate };
package/dist/index.js ADDED
@@ -0,0 +1,22 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cn } from "@react-cupertino-ui/shared/lib/utils";
4
+ import { Button } from "@react-cupertino-ui/button";
5
+ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@react-cupertino-ui/card";
6
+ import { TextField } from "@react-cupertino-ui/text-field";
7
+ import "./index.scss";
8
+ const LandingPageTemplate = React.forwardRef((props, ref) => {
9
+ const { className, heroTitle = "Welcome to Cupertino", heroSubtitle = "A beautiful, native-feeling component library for React.", heroCtaText = "Get Started", heroSecondaryText = "Learn More", onHeroCtaClick, onHeroSecondaryClick, features = [
10
+ { title: "Native Feel", description: "Components that look and feel like iOS." },
11
+ { title: "Accessible", description: "Built with accessibility in mind." },
12
+ { title: "Customizable", description: "Easy to style and adapt to your brand." },
13
+ ], aboutTitle = "About Us", aboutContent = "We are dedicated to building the best UI components for the web, bringing the elegance of native apps to the browser.", contactTitle = "Get in Touch", onContactSubmit, ...rest } = props;
14
+ const [contactForm, setContactForm] = React.useState({ name: "", email: "", message: "" });
15
+ const handleContactSubmit = (e) => {
16
+ e.preventDefault();
17
+ onContactSubmit?.(contactForm);
18
+ };
19
+ return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-landing-page", className), ...rest, children: [_jsxs("section", { className: "react-cupertino-ui-landing-page__hero", children: [_jsx("h1", { className: "react-cupertino-ui-landing-page__hero-title", children: heroTitle }), _jsx("p", { className: "react-cupertino-ui-landing-page__hero-subtitle", children: heroSubtitle }), _jsxs("div", { className: "react-cupertino-ui-landing-page__hero-actions", children: [_jsx(Button, { size: "lg", onClick: onHeroCtaClick, children: heroCtaText }), _jsx(Button, { size: "lg", variant: "secondary", onClick: onHeroSecondaryClick, children: heroSecondaryText })] })] }), _jsx("section", { className: "react-cupertino-ui-landing-page__features", children: _jsx("div", { className: "react-cupertino-ui-landing-page__container", children: _jsx("div", { className: "react-cupertino-ui-landing-page__grid", children: features.map((feature, index) => (_jsxs(Card, { className: "react-cupertino-ui-landing-page__feature-card", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: feature.title }) }), _jsx(CardContent, { children: _jsx(CardDescription, { children: feature.description }) })] }, index))) }) }) }), _jsx("section", { className: "react-cupertino-ui-landing-page__about", children: _jsxs("div", { className: "react-cupertino-ui-landing-page__container", children: [_jsx("h2", { className: "react-cupertino-ui-landing-page__section-title", children: aboutTitle }), _jsx("p", { className: "react-cupertino-ui-landing-page__section-content", children: aboutContent })] }) }), _jsx("section", { className: "react-cupertino-ui-landing-page__contact", children: _jsx("div", { className: "react-cupertino-ui-landing-page__container", children: _jsxs(Card, { className: "react-cupertino-ui-landing-page__contact-card", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: contactTitle }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleContactSubmit, className: "react-cupertino-ui-landing-page__contact-form", children: [_jsx(TextField, { label: "Name", placeholder: "Your Name", value: contactForm.name, onChange: (e) => setContactForm({ ...contactForm, name: e.target.value }) }), _jsx(TextField, { label: "Email", type: "email", placeholder: "john@example.com", value: contactForm.email, onChange: (e) => setContactForm({ ...contactForm, email: e.target.value }) }), _jsx(TextField, { label: "Message", placeholder: "How can we help?", value: contactForm.message, onChange: (e) => setContactForm({ ...contactForm, message: e.target.value }) }), _jsx(Button, { type: "submit", fullWidth: true, children: "Send Message" })] }) })] }) }) })] }));
20
+ });
21
+ LandingPageTemplate.displayName = "LandingPageTemplate";
22
+ export { LandingPageTemplate };
package/dist/index.scss ADDED
@@ -0,0 +1,102 @@
1
+ @use "@/styles/mixins/glass" as glass;
2
+
3
+ .react-cupertino-ui-landing-page {
4
+ display: flex;
5
+ flex-direction: column;
6
+ width: 100%;
7
+ min-height: 100vh;
8
+
9
+ &__container {
10
+ max-width: 1200px;
11
+ margin: 0 auto;
12
+ padding: 0 2rem;
13
+ width: 100%;
14
+ }
15
+
16
+ &__hero {
17
+ display: flex;
18
+ flex-direction: column;
19
+ align-items: center;
20
+ justify-content: center;
21
+ text-align: center;
22
+ padding: 8rem 2rem 6rem;
23
+ background: radial-gradient(circle at 50% 0%, rgba(0, 122, 255, 0.15), transparent 60%);
24
+ gap: 1.5rem;
25
+
26
+ &-title {
27
+ font-size: 3.5rem;
28
+ font-weight: 800;
29
+ letter-spacing: -0.02em;
30
+ line-height: 1.1;
31
+ background: linear-gradient(135deg, #000 0%, #333 100%);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+
35
+ @media (prefers-color-scheme: dark) {
36
+ background: linear-gradient(135deg, #fff 0%, #ccc 100%);
37
+ -webkit-background-clip: text;
38
+ -webkit-text-fill-color: transparent;
39
+ }
40
+ }
41
+
42
+ &-subtitle {
43
+ font-size: 1.25rem;
44
+ color: var(--color-foreground-muted, #666);
45
+ max-width: 600px;
46
+ }
47
+
48
+ &-actions {
49
+ display: flex;
50
+ gap: 1rem;
51
+ margin-top: 1rem;
52
+ }
53
+ }
54
+
55
+ &__features {
56
+ padding: 4rem 0;
57
+ }
58
+
59
+ &__grid {
60
+ display: grid;
61
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
62
+ gap: 2rem;
63
+ }
64
+
65
+ &__about {
66
+ padding: 6rem 0;
67
+ background: var(--color-background-secondary, rgba(0, 0, 0, 0.03));
68
+ text-align: center;
69
+
70
+ .react-cupertino-ui-landing-page__section-title {
71
+ font-size: 2.5rem;
72
+ font-weight: 700;
73
+ margin-bottom: 1.5rem;
74
+ }
75
+
76
+ .react-cupertino-ui-landing-page__section-content {
77
+ font-size: 1.125rem;
78
+ color: var(--color-foreground-muted, #666);
79
+ max-width: 800px;
80
+ margin: 0 auto;
81
+ line-height: 1.6;
82
+ }
83
+ }
84
+
85
+ &__contact {
86
+ padding: 6rem 0;
87
+ display: flex;
88
+ justify-content: center;
89
+
90
+ &-card {
91
+ max-width: 500px;
92
+ width: 100%;
93
+ margin: 0 auto;
94
+ }
95
+
96
+ &-form {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 1rem;
100
+ }
101
+ }
102
+ }
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@react-cupertino-ui/landing-page-template",
3
+ "version": "1.0.1",
4
+ "description": "Landing Page template for React Cupertino UI",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "sideEffects": [
13
+ "./dist/**/*.css",
14
+ "./dist/**/*.scss"
15
+ ],
16
+ "scripts": {
17
+ "build": "tsc -p tsconfig.build.json && npm run build:styles",
18
+ "build:styles": "node ../../../scripts/build-styles.mjs"
19
+ },
20
+ "peerDependencies": {
21
+ "react": "^18.3.1",
22
+ "react-dom": "^18.3.1"
23
+ },
24
+ "dependencies": {
25
+ "@react-cupertino-ui/button": "workspace:*",
26
+ "@react-cupertino-ui/card": "workspace:*",
27
+ "@react-cupertino-ui/text-field": "workspace:*",
28
+ "@react-cupertino-ui/shared": "workspace:*"
29
+ },
30
+ "devDependencies": {
31
+ "typescript": "^5.2.2"
32
+ },
33
+ "publishConfig": {
34
+ "access": "public"
35
+ }
36
+ }