@prosophia/lab-techy 0.0.4 → 0.0.5

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 (9) hide show
  1. package/dist/index.d.mts +51 -9
  2. package/dist/index.d.ts +51 -9
  3. package/dist/index.js +72 -56
  4. package/dist/index.mjs +71 -56
  5. package/dist/layouts/index.js +46 -56
  6. package/dist/layouts/index.mjs +46 -56
  7. package/package.json +1 -1
  8. package/dist/index.css +0 -281
  9. package/dist/layouts/index.css +0 -281
package/dist/layouts/index.mjs CHANGED
@@ -6,18 +6,12 @@ import { ThemeProvider, useTheme as useTheme2 } from "next-themes";
6
6
  import Link from "next/link";
7
7
  import { usePathname } from "next/navigation";
8
8
  import { motion as motion2 } from "framer-motion";
9
-
10
- // src/components/Header.module.css
11
- var Header_default = {};
9
+ import styles2 from "./Header.module.css";
12
10
 
13
11
  // src/components/ThemeToggle.tsx
14
12
  import { motion } from "framer-motion";
15
13
  import { useTheme } from "next-themes";
16
-
17
- // src/components/ThemeToggle.module.css
18
- var ThemeToggle_default = {};
19
-
20
- // src/components/ThemeToggle.tsx
14
+ import styles from "./ThemeToggle.module.css";
21
15
  import { jsx } from "react/jsx-runtime";
22
16
  function ThemeToggle() {
23
17
  const { resolvedTheme, setTheme } = useTheme();
@@ -27,7 +21,7 @@ function ThemeToggle() {
27
21
  return /* @__PURE__ */ jsx(
28
22
  motion.button,
29
23
  {
30
- className: ThemeToggle_default.toggle,
24
+ className: styles.toggle,
31
25
  onClick: toggleTheme,
32
26
  whileHover: { scale: 1.05 },
33
27
  whileTap: { scale: 0.95 },
@@ -54,21 +48,21 @@ function Header({ navigationData }) {
54
48
  return /* @__PURE__ */ jsx2(
55
49
  motion2.header,
56
50
  {
57
- className: Header_default.header,
51
+ className: styles2.header,
58
52
  initial: { y: -100, opacity: 0 },
59
53
  animate: { y: 0, opacity: 1 },
60
54
  transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] },
61
- children: /* @__PURE__ */ jsxs("div", { className: Header_default.container, children: [
62
- /* @__PURE__ */ jsxs(Link, { href: "/", className: Header_default.logo, children: [
63
- /* @__PURE__ */ jsx2("div", { className: Header_default.logoIcon, children: /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", children: "science" }) }),
64
- /* @__PURE__ */ jsx2("h1", { className: Header_default.logoText, children: labName })
55
+ children: /* @__PURE__ */ jsxs("div", { className: styles2.container, children: [
56
+ /* @__PURE__ */ jsxs(Link, { href: "/", className: styles2.logo, children: [
57
+ /* @__PURE__ */ jsx2("div", { className: styles2.logoIcon, children: /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", children: "science" }) }),
58
+ /* @__PURE__ */ jsx2("h1", { className: styles2.logoText, children: labName })
65
59
  ] }),
66
- /* @__PURE__ */ jsxs("nav", { className: Header_default.nav, children: [
67
- /* @__PURE__ */ jsx2("div", { className: Header_default.navLinks, children: navItems.map((item) => /* @__PURE__ */ jsx2(
60
+ /* @__PURE__ */ jsxs("nav", { className: styles2.nav, children: [
61
+ /* @__PURE__ */ jsx2("div", { className: styles2.navLinks, children: navItems.map((item) => /* @__PURE__ */ jsx2(
68
62
  Link,
69
63
  {
70
64
  href: item.href,
71
- className: `${Header_default.navLink} ${pathname === item.href ? Header_default.navLinkActive : ""}`,
65
+ className: `${styles2.navLink} ${pathname === item.href ? styles2.navLinkActive : ""}`,
72
66
  children: item.label
73
67
  },
74
68
  item.href
@@ -77,16 +71,16 @@ function Header({ navigationData }) {
77
71
  /* @__PURE__ */ jsx2(Link, { href: "/contact", children: /* @__PURE__ */ jsx2(
78
72
  motion2.button,
79
73
  {
80
- className: Header_default.ctaButton,
74
+ className: styles2.ctaButton,
81
75
  whileHover: { scale: 1.02 },
82
76
  whileTap: { scale: 0.98 },
83
77
  children: "Join the Lab"
84
78
  }
85
79
  ) })
86
80
  ] }),
87
- /* @__PURE__ */ jsxs("div", { className: Header_default.mobileActions, children: [
81
+ /* @__PURE__ */ jsxs("div", { className: styles2.mobileActions, children: [
88
82
  /* @__PURE__ */ jsx2(ThemeToggle, {}),
89
- /* @__PURE__ */ jsx2("button", { className: Header_default.mobileMenuBtn, children: /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", children: "menu" }) })
83
+ /* @__PURE__ */ jsx2("button", { className: styles2.mobileMenuBtn, children: /* @__PURE__ */ jsx2("span", { className: "material-symbols-outlined", children: "menu" }) })
90
84
  ] })
91
85
  ] })
92
86
  }
@@ -96,11 +90,7 @@ function Header({ navigationData }) {
96
90
  // src/components/Footer.tsx
97
91
  import Link2 from "next/link";
98
92
  import { motion as motion3 } from "framer-motion";
99
-
100
- // src/components/Footer.module.css
101
- var Footer_default = {};
102
-
103
- // src/components/Footer.tsx
93
+ import styles3 from "./Footer.module.css";
104
94
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
105
95
  var footerVariants = {
106
96
  hidden: { opacity: 0, y: 20 },
@@ -116,17 +106,17 @@ var footerVariants = {
116
106
  function getSocialIcon(platform) {
117
107
  switch (platform) {
118
108
  case "twitter":
119
- return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: Footer_default.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" }) });
109
+ return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: styles3.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" }) });
120
110
  case "github":
121
- return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: Footer_default.socialIcon, children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }) });
111
+ return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: styles3.socialIcon, children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }) });
122
112
  case "linkedin":
123
- return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: Footer_default.socialIcon, children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" }) });
113
+ return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: styles3.socialIcon, children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" }) });
124
114
  case "youtube":
125
- return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: Footer_default.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) });
115
+ return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: styles3.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) });
126
116
  case "scholar":
127
- return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: Footer_default.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M5.242 13.769L0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977 0-5.548 1.748-6.758 4.269zM12 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14z" }) });
117
+ return /* @__PURE__ */ jsx3("svg", { "aria-hidden": "true", fill: "currentColor", viewBox: "0 0 24 24", className: styles3.socialIcon, children: /* @__PURE__ */ jsx3("path", { d: "M5.242 13.769L0 9.5 12 0l12 9.5-5.242 4.269C17.548 11.249 14.978 9.5 12 9.5c-2.977 0-5.548 1.748-6.758 4.269zM12 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14z" }) });
128
118
  default:
129
- return /* @__PURE__ */ jsxs2("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", className: Footer_default.socialIcon, children: [
119
+ return /* @__PURE__ */ jsxs2("svg", { "aria-hidden": "true", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", className: styles3.socialIcon, children: [
130
120
  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
131
121
  /* @__PURE__ */ jsx3("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
132
122
  /* @__PURE__ */ jsx3("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
@@ -145,24 +135,24 @@ function Footer({ footerData }) {
145
135
  return /* @__PURE__ */ jsx3(
146
136
  motion3.footer,
147
137
  {
148
- className: Footer_default.footer,
138
+ className: styles3.footer,
149
139
  initial: "hidden",
150
140
  whileInView: "visible",
151
141
  viewport: { once: true },
152
142
  variants: footerVariants,
153
- children: /* @__PURE__ */ jsxs2("div", { className: Footer_default.container, children: [
154
- /* @__PURE__ */ jsxs2("div", { className: Footer_default.grid, children: [
155
- /* @__PURE__ */ jsxs2("div", { className: Footer_default.brandSection, children: [
156
- /* @__PURE__ */ jsxs2("div", { className: Footer_default.logo, children: [
157
- /* @__PURE__ */ jsx3("div", { className: Footer_default.logoIcon, children: /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", children: "science" }) }),
158
- /* @__PURE__ */ jsx3("h2", { className: Footer_default.logoText, children: labName })
143
+ children: /* @__PURE__ */ jsxs2("div", { className: styles3.container, children: [
144
+ /* @__PURE__ */ jsxs2("div", { className: styles3.grid, children: [
145
+ /* @__PURE__ */ jsxs2("div", { className: styles3.brandSection, children: [
146
+ /* @__PURE__ */ jsxs2("div", { className: styles3.logo, children: [
147
+ /* @__PURE__ */ jsx3("div", { className: styles3.logoIcon, children: /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", children: "science" }) }),
148
+ /* @__PURE__ */ jsx3("h2", { className: styles3.logoText, children: labName })
159
149
  ] }),
160
- /* @__PURE__ */ jsx3("p", { className: Footer_default.description, children: footerText }),
161
- /* @__PURE__ */ jsx3("div", { className: Footer_default.socialLinks, children: socialLinks.map((social, index) => /* @__PURE__ */ jsx3(
150
+ /* @__PURE__ */ jsx3("p", { className: styles3.description, children: footerText }),
151
+ /* @__PURE__ */ jsx3("div", { className: styles3.socialLinks, children: socialLinks.map((social, index) => /* @__PURE__ */ jsx3(
162
152
  "a",
163
153
  {
164
154
  href: social.url,
165
- className: Footer_default.socialLink,
155
+ className: styles3.socialLink,
166
156
  "aria-label": social.platform,
167
157
  target: "_blank",
168
158
  rel: "noopener noreferrer",
@@ -171,26 +161,26 @@ function Footer({ footerData }) {
171
161
  index
172
162
  )) })
173
163
  ] }),
174
- /* @__PURE__ */ jsxs2("div", { className: Footer_default.linksSection, children: [
175
- /* @__PURE__ */ jsx3("h3", { className: Footer_default.linksSectionTitle, children: "Research" }),
176
- /* @__PURE__ */ jsxs2("ul", { className: Footer_default.linksList, children: [
177
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/research", className: Footer_default.link, children: "Projects" }) }),
178
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: Footer_default.link, children: "Publications" }) }),
179
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: Footer_default.link, children: "Datasets" }) }),
180
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: Footer_default.link, children: "Code" }) })
164
+ /* @__PURE__ */ jsxs2("div", { className: styles3.linksSection, children: [
165
+ /* @__PURE__ */ jsx3("h3", { className: styles3.linksSectionTitle, children: "Research" }),
166
+ /* @__PURE__ */ jsxs2("ul", { className: styles3.linksList, children: [
167
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/research", className: styles3.link, children: "Projects" }) }),
168
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: styles3.link, children: "Publications" }) }),
169
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: styles3.link, children: "Datasets" }) }),
170
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/publications", className: styles3.link, children: "Code" }) })
181
171
  ] })
182
172
  ] }),
183
- /* @__PURE__ */ jsxs2("div", { className: Footer_default.linksSection, children: [
184
- /* @__PURE__ */ jsx3("h3", { className: Footer_default.linksSectionTitle, children: "People" }),
185
- /* @__PURE__ */ jsxs2("ul", { className: Footer_default.linksList, children: [
186
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: Footer_default.link, children: "Faculty" }) }),
187
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: Footer_default.link, children: "Students" }) }),
188
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: Footer_default.link, children: "Alumni" }) }),
189
- /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/contact", className: Footer_default.link, children: "Join Us" }) })
173
+ /* @__PURE__ */ jsxs2("div", { className: styles3.linksSection, children: [
174
+ /* @__PURE__ */ jsx3("h3", { className: styles3.linksSectionTitle, children: "People" }),
175
+ /* @__PURE__ */ jsxs2("ul", { className: styles3.linksList, children: [
176
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: styles3.link, children: "Faculty" }) }),
177
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: styles3.link, children: "Students" }) }),
178
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/team", className: styles3.link, children: "Alumni" }) }),
179
+ /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(Link2, { href: "/contact", className: styles3.link, children: "Join Us" }) })
190
180
  ] })
191
181
  ] })
192
182
  ] }),
193
- /* @__PURE__ */ jsx3("div", { className: Footer_default.bottom, children: /* @__PURE__ */ jsxs2("p", { className: Footer_default.copyright, children: [
183
+ /* @__PURE__ */ jsx3("div", { className: styles3.bottom, children: /* @__PURE__ */ jsxs2("p", { className: styles3.copyright, children: [
194
184
  "\xA9 ",
195
185
  (/* @__PURE__ */ new Date()).getFullYear(),
196
186
  " ",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prosophia/lab-techy",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "description": "Techy lab website template with Sanity CMS for Prosophia",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/dist/index.css DELETED
@@ -1,281 +0,0 @@
1
- /* src/components/Footer.module.css */
2
- .footer {
3
- border-top: 1px solid var(--slate-200);
4
- background-color: var(--white);
5
- padding: 3rem 0;
6
- }
7
- .container {
8
- max-width: var(--container-max);
9
- margin: 0 auto;
10
- padding: 0 1rem;
11
- }
12
- @media (min-width: 640px) {
13
- .container {
14
- padding: 0 1.5rem;
15
- }
16
- }
17
- @media (min-width: 1024px) {
18
- .container {
19
- padding: 0 2rem;
20
- }
21
- }
22
- .grid {
23
- display: grid;
24
- gap: 2rem;
25
- }
26
- @media (min-width: 768px) {
27
- .grid {
28
- grid-template-columns: 2fr 1fr 1fr;
29
- gap: 3rem;
30
- }
31
- }
32
- .brandSection {
33
- grid-column: span 1;
34
- }
35
- @media (min-width: 768px) {
36
- .brandSection {
37
- grid-column: span 1;
38
- }
39
- }
40
- .logo {
41
- display: flex;
42
- align-items: center;
43
- gap: 0.75rem;
44
- }
45
- .logoIcon {
46
- display: flex;
47
- width: 2rem;
48
- height: 2rem;
49
- align-items: center;
50
- justify-content: center;
51
- border-radius: var(--radius-sm);
52
- background-color: var(--primary);
53
- color: var(--white);
54
- }
55
- .logoIcon span {
56
- font-size: 20px;
57
- }
58
- .logoText {
59
- font-size: 1.25rem;
60
- font-weight: 700;
61
- color: var(--slate-900);
62
- }
63
- .description {
64
- margin-top: 1rem;
65
- max-width: 24rem;
66
- font-size: 0.875rem;
67
- color: var(--slate-600);
68
- line-height: 1.6;
69
- }
70
- .socialLinks {
71
- display: flex;
72
- gap: 1rem;
73
- margin-top: 1.5rem;
74
- }
75
- .socialLink {
76
- color: var(--slate-400);
77
- transition: color var(--timing-quick) var(--ease-out-expo);
78
- }
79
- .socialLink:hover {
80
- color: var(--primary);
81
- }
82
- .socialIcon {
83
- width: 1.25rem;
84
- height: 1.25rem;
85
- }
86
- .linksSection {
87
- display: flex;
88
- flex-direction: column;
89
- }
90
- .linksSectionTitle {
91
- font-size: 0.875rem;
92
- font-weight: 600;
93
- text-transform: uppercase;
94
- color: var(--slate-900);
95
- margin-bottom: 1rem;
96
- }
97
- .linksList {
98
- list-style: none;
99
- display: flex;
100
- flex-direction: column;
101
- gap: 0.75rem;
102
- }
103
- .link {
104
- font-size: 0.875rem;
105
- color: var(--slate-600);
106
- transition: color var(--timing-quick) var(--ease-out-expo);
107
- }
108
- .link:hover {
109
- color: var(--primary);
110
- }
111
- .bottom {
112
- margin-top: 3rem;
113
- padding-top: 2rem;
114
- border-top: 1px solid var(--slate-200);
115
- }
116
- .copyright {
117
- text-align: center;
118
- font-size: 0.875rem;
119
- color: var(--slate-500);
120
- }
121
- [data-theme=dark] .logoIcon {
122
- color: var(--slate-900);
123
- }
124
-
125
- /* src/components/Header.module.css */
126
- .header {
127
- position: sticky;
128
- top: 0;
129
- z-index: 50;
130
- width: 100%;
131
- border-bottom: 1px solid var(--slate-200);
132
- background-color: rgba(246, 246, 248, 0.8);
133
- backdrop-filter: blur(12px);
134
- }
135
- .container {
136
- max-width: var(--container-max);
137
- margin: 0 auto;
138
- display: flex;
139
- height: 4rem;
140
- align-items: center;
141
- justify-content: space-between;
142
- padding: 0 1rem;
143
- }
144
- @media (min-width: 640px) {
145
- .container {
146
- padding: 0 1.5rem;
147
- }
148
- }
149
- @media (min-width: 1024px) {
150
- .container {
151
- padding: 0 2rem;
152
- }
153
- }
154
- .logo {
155
- display: flex;
156
- align-items: center;
157
- gap: 1rem;
158
- text-decoration: none;
159
- }
160
- .logoIcon {
161
- display: flex;
162
- width: 2rem;
163
- height: 2rem;
164
- align-items: center;
165
- justify-content: center;
166
- border-radius: var(--radius-sm);
167
- background-color: var(--primary);
168
- color: var(--white);
169
- }
170
- .logoIcon span {
171
- font-size: 20px;
172
- }
173
- .logoText {
174
- font-size: 1.125rem;
175
- font-weight: 700;
176
- letter-spacing: -0.025em;
177
- color: var(--slate-900);
178
- }
179
- .nav {
180
- display: none;
181
- flex: 1;
182
- align-items: center;
183
- justify-content: flex-end;
184
- gap: 2rem;
185
- }
186
- @media (min-width: 768px) {
187
- .nav {
188
- display: flex;
189
- }
190
- }
191
- .navLinks {
192
- display: flex;
193
- align-items: center;
194
- gap: 1.5rem;
195
- }
196
- .navLink {
197
- font-size: 0.875rem;
198
- font-weight: 500;
199
- color: var(--slate-600);
200
- transition: color var(--timing-quick) var(--ease-out-expo);
201
- }
202
- .navLink:hover {
203
- color: var(--primary);
204
- }
205
- .navLinkActive {
206
- color: var(--primary);
207
- font-weight: 600;
208
- }
209
- .ctaButton {
210
- display: inline-flex;
211
- height: 2.25rem;
212
- align-items: center;
213
- justify-content: center;
214
- border-radius: var(--radius-lg);
215
- background-color: var(--primary);
216
- padding: 0 1rem;
217
- font-size: 0.875rem;
218
- font-weight: 700;
219
- color: var(--white);
220
- box-shadow: var(--shadow-sm);
221
- transition: background-color var(--timing-quick) var(--ease-out-expo);
222
- }
223
- .ctaButton:hover {
224
- background-color: var(--primary-dark);
225
- }
226
- .mobileActions {
227
- display: flex;
228
- align-items: center;
229
- gap: 0.5rem;
230
- }
231
- @media (min-width: 768px) {
232
- .mobileActions {
233
- display: none;
234
- }
235
- }
236
- .mobileMenuBtn {
237
- display: block;
238
- padding: 0.5rem;
239
- color: var(--slate-600);
240
- }
241
- [data-theme=dark] .header {
242
- background-color: rgba(15, 23, 42, 0.9);
243
- border-bottom-color: var(--slate-200);
244
- }
245
- [data-theme=dark] .logoIcon {
246
- color: var(--slate-900);
247
- }
248
- [data-theme=dark] .ctaButton {
249
- color: var(--slate-900);
250
- }
251
-
252
- /* src/components/ThemeToggle.module.css */
253
- .toggle {
254
- display: flex;
255
- align-items: center;
256
- justify-content: center;
257
- width: 2.5rem;
258
- height: 2.5rem;
259
- border-radius: var(--radius-full);
260
- background-color: var(--slate-100);
261
- color: var(--slate-600);
262
- border: 1px solid var(--slate-200);
263
- cursor: pointer;
264
- transition: all var(--timing-quick) var(--ease-out-expo);
265
- }
266
- .toggle:hover {
267
- background-color: var(--slate-200);
268
- color: var(--primary);
269
- }
270
- .toggle span {
271
- font-size: 1.25rem;
272
- }
273
- [data-theme=dark] .toggle {
274
- background-color: var(--slate-800);
275
- border-color: var(--slate-700);
276
- color: var(--slate-300);
277
- }
278
- [data-theme=dark] .toggle:hover {
279
- background-color: var(--slate-700);
280
- color: var(--primary);
281
- }