"use strict";
(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([
[3471], {
91284: function(e, t, i) {
i.d(t, {
P4: function() {
return GridItem
},
rO: function() {
return GridCopy
},
tY: function() {
return ExtraCash
}
});
var r = i(97458),
a = i(5244),
n = i(51838),
s = i.n(n),
d = i(95435),
l = i(2639),
o = i(51726),
c = i(2002),
x = i(74431),
p = i(70236);
function ExtraCash() {
let e = (0, l.N)("wf-images/abl-tey-metadata/tey-metadata.json"),
t = (0, l.N)("wf-images/abl-tey-data/tey-data.json"),
{
nationalAverageInterestData: i
} = (0, p.U9)();
return (0, r.jsx)("div", {
className: "bg-gradient-to-br from-eggplant to-blurple from-60% py-10 text-[#E8EBFD] 2xl:py-20",
children: (0, r.jsxs)(a.Z, {
id: "compare",
children: [(0, r.jsx)("div", {
children: (0, r.jsxs)("h2", {
className: "copy-h2-alt text-[42px] xl:text-[60px] max-w-[600px] xl:max-w-[1000px] mx-auto sm:text-center",
children: ["Where should you save your extra cash?", " ", (0, r.jsx)("span", {
className: "copy-h2 text-[42px] xl:text-[60px]",
children: "See your options."
})]
})
}), (0, r.jsxs)("div", {
className: "overflow-x-scroll py-6 xl:overflow-x-auto xl:max-w-[1200px] xl:mx-auto -mr-4 md:-mr-12 flex gap-4 md:gap-12",
children: [(0, r.jsxs)("div", {
className: "grid grid-cols-[repeat(5,_minmax(150px,_1fr))] mx-auto relative",
children: [(0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
height: "h-[100px]",
children: " "
}), (0, r.jsxs)(GridItem, {
height: "h-[100px]",
center: !0,
className: "z-10 relative",
children: [(0, r.jsx)(d.M, {
className: "block z-10",
src: "/next/svg/optimized/logo-surface-dark.svg",
alt: "Wealthfront Logo",
width: 24,
height: 25
}), (0, r.jsx)(GridCopy, {
className: "font-semibold text-center z-10 mt-2 !text-white",
children: "Automated Bond Ladder"
}), (0, r.jsx)("div", {
style: {
background: "var(--tk-gradient-vibrant-twilight)"
},
className: "absolute inset-0 top-[-24px] bottom-[-904px] 2xl:bottom-[-864px] !z-0 rounded-standard"
}), (0, r.jsx)("div", {
className: "absolute left-0 right-0 bottom-0 h-[1px] mb-[-1px] bg-[#E8EBFD] z-10"
})]
}), (0, r.jsx)(GridItem, {
height: "h-[100px]",
center: !0,
className: "border-x border-x-eggplant bg-[#C3CDF41A]",
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-center !text-white",
children: "Savings account"
})
}), (0, r.jsx)(GridItem, {
height: "h-[100px]",
center: !0,
className: "border-x border-x-eggplant bg-[#C3CDF41A]",
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-center !text-white",
children: "Certificate of Deposit"
})
}), (0, r.jsx)(GridItem, {
height: "h-[100px]",
center: !0,
className: "border-x border-x-eggplant bg-[#C3CDF41A]",
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-center !text-white",
children: "Portfolio of corporate bonds"
})
})]
}), (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Yield"
})
}), (0, r.jsxs)(GridItem, {
className: "z-10",
children: [(0, r.jsxs)(GridCopy, {
className: "font-semibold !text-white",
dataMask: !0,
children: [(0, o.rG)(e.threeMonthMinYield), " –", " ", (0, o.rG)(e.threeMonthMaxYield)]
}), (0, r.jsx)(GridCopy, {
className: "!text-white",
children: "Range of current yields on Treasuries in our 3-month ladder, after Fee; yields vary over time"
})]
}), (0, r.jsxs)(GridItem, {
children: [(0, r.jsxs)(GridCopy, {
dataMask: !0,
children: [(0, o.rG)(i.rate), " APY"]
}), (0, r.jsxs)(GridCopy, {
dataMask: !0,
children: ["National avg. per FDIC.gov as of ", i.updateDate]
})]
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Variable depending on duration"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Variable depending on duration and issuer"
})
})]
}), (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Risk of losing principal"
})
}), (0, r.jsxs)(GridItem, {
className: "z-10",
children: [(0, r.jsx)(GridCopy, {
className: "font-semibold !text-white",
children: "Very low if held to maturity:"
}), (0, r.jsx)(GridCopy, {
className: "!text-white",
children: "Treasuries are backed by the full faith and credit of the US government"
})]
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Very low: Subject to FDIC insurance limits"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Very low: Subject to FDIC insurance limits"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Medium: Variable based on issuers credit rating"
})
})]
}), (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Insurance"
})
}), (0, r.jsx)(GridItem, {
className: "z-10",
children: (0, r.jsx)(GridCopy, {
className: "font-semibold !text-white",
children: "SIPC insured up to $500K"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "FDIC insured up to $250K"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Typically FDIC insured up to $250K"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Typically SIPC insured when held in a brokerage account"
})
})]
}), (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Taxes"
})
}), (0, r.jsx)(GridItem, {
className: "z-10",
children: (0, r.jsxs)(GridCopy, {
className: "font-semibold !text-white",
children: ["Exempt from state and local income taxes; ", (0, r.jsx)("span", {
className: "font-normal",
children: "federal income taxes apply"
})]
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Federal, state, and (potentially) local income taxes apply"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Federal, state, and (potentially) local income taxes apply"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Federal, state, and (potentially) local income taxes apply"
})
})]
}), (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Liquidity"
})
}), (0, r.jsx)(GridItem, {
className: "z-10",
children: (0, r.jsxs)(GridCopy, {
className: "!text-white",
children: [(0, r.jsx)("span", {
className: "font-semibold",
children: "No fees for early withdrawals;"
}), " selling before maturity can result in reduced yield"]
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Fully liquid"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "Fees or penalties may apply for early withdrawals"
})
}), (0, r.jsx)(GridItem, {
children: (0, r.jsx)(GridCopy, {
children: "No fees for early withdrawals; selling before maturity can result in reduced yield"
})
})]
}), function() {
let e = t.waiverMonths,
i = (0, o._6)("month", e, {
inclusive: !0
});
return (0, r.jsxs)(r.Fragment, {
children: [(0, r.jsx)(GridItem, {
height: "h-[180px] 2xl:h-[140px]",
children: (0, r.jsx)(GridCopy, {
className: "font-semibold text-[#FFF3D8]",
children: "Fees"
})
}), (0, r.jsxs)(GridItem, {
height: "h-[180px] 2xl:h-[140px]",
className: "z-10",
children: [(0, r.jsxs)(GridCopy, {
className: "font-semibold !text-white",
dataMask: !0,
children: ["Annual ", (0, o.rG)(t.managementFees), " advisory fee"]
}), (0, r.jsxs)(GridCopy, {
className: "!text-white",
dataMask: !0,
children: ["No advisory fee for ", i, " on your first Automated Bond Ladder.", " ", (0, r.jsx)(c.Z, {
href: "https://support.wealthfront.com/hc/en-us/articles/23265024478484-Automated-Bond-Ladders#fee_waiver_terms",
trackingDetails: {
category: x.WD.Hyperlink,
name: "compare-terms-apply"
},
amplitudeClickProperties: {
target_element: "compare-terms-apply",
click_type: "hyperlink"
},
className: "!text-white",
target: "_blank",
children: "Terms apply."
})]
})]
}), (0, r.jsx)(GridItem, {
height: "h-[180px] 2xl:h-[140px]",
children: (0, r.jsx)(GridCopy, {
children: "Service and maintenance fees may apply"
})
}), (0, r.jsx)(GridItem, {
height: "h-[180px] 2xl:h-[140px]",
children: (0, r.jsx)(GridCopy, {
children: "No fees"
})
}), (0, r.jsx)(GridItem, {
height: "h-[180px] 2xl:h-[140px]",
children: (0, r.jsx)(GridCopy, {
children: "Management fees and other fees may apply"
})
})]
})
}()]
}), (0, r.jsx)("div", {})]
})]
})
})
}
function GridItem(e) {
let {
children: t,
height: i,
className: a,
center: n
} = e;
return (0, r.jsx)("div", {
className: s()("flex-shrink-0 border-b-[1px] border-b-[#E8EBFD] leading-[24px]", a, {
"flex flex-col justify-center items-center": n,
"p-3": !n,
"h-[140px]": !i,
[i]: i
}),
children: t
})
}
function GridCopy(e) {
let {
children: t,
className: i,
dataMask: a,
testId: n
} = e;
return (0, r.jsx)("p", {
"data-testid": n,
className: s()("text-[18px] leading-[16px] lg:leading-[22px]", i),
"data-mask": a ? "true" : void 0,
children: t
})
}
},
89298: function(e, t, i) {
var r = i(97458),
a = i(51838),
n = i.n(a),
s = i(92339);
t.Z = e => {
let {
min: t,
max: i,
value: a,
step: d,
onChange: l,
onFinalChange: o,
ariaLabel: c,
surface: x = "light",
testId: p,
trackClassName: h,
trackStyle: m,
thumbClassName: u
} = e;
return (0, r.jsx)(s.Range, {
values: [a],
step: d,
min: t,
max: i,
onChange: l,
onFinalChange: o,
renderTrack: e => {
let {
props: t,
children: i
} = e;
return (0, r.jsx)("div", {
...t,
"data-testid": p,
className: n()("h-1.5 w-full rounded-full", {
"bg-gradient-to-r from-ambient-orange to-lavender": "light" === x,
"bg-white bg-opacity-30": "dark" === x
}, h),
style: m,
children: i
})
},
renderThumb: e => {
let {
props: t
} = e;
return (0, r.jsx)("div", {
...t,
"aria-label": c,
className: n()("h-6 w-6 rounded-full border-[1px] border-eggplant border-opacity-20 bg-white shadow-lg", u),
style: {
...t.style
}
})
}
})
}
},
5244: function(e, t, i) {
var r = i(97458),
a = i(51838),
n = i.n(a),
s = i(52983);
let d = (0, s.forwardRef)((e, t) => {
let {
className: i,
children: a,
id: s,
testId: d
} = e;
return (0, r.jsx)("div", {
id: s,
ref: t,
className: n()("mx-auto flex max-w-[1766px] flex-col gap-y-20 px-4 sm:px-12 xl:px-16", i),
"data-testid": d || "marketing-section",
children: a
})
});
d.displayName = "MarketingSection", t.Z = d
},
78561: function(e, t, i) {
i.d(t, {
K: function() {
return MarketingText
}
});
var r = i(97458),
a = i(51838),
n = i.n(a);
function MarketingText(e) {
let {
children: t,
className: i,
as: a = "p",
color: s,
variant: d = "body",
testId: l
} = e;
return (0, r.jsx)(a, {
className: n()(i, {
"text-[18px] leading-[22px]": "body" === d,
"text-[18px] leading-[22px] font-semibold": "body-semibold" === d,
"text-[14px] leading-xsmall font-tk-normal": "disclosure" === d,
"text-[16px] leading-xxsmall font-tk-semibold tracking-wider uppercase": "caption" === d,
[s]: !!s,
"text-eggplant": !s
}),
"data-testid": l || "marketing-text",
children: t
})
}
},
2639: function(e, t, i) {
i.d(t, {
N: function() {
return useRedirectsToCdnUrl
}
});
var r = i(83528);
function useRedirectsToCdnUrl(e, t) {
let {
prefetched: i = !0,
staleTime: a = 0
} = t || {}, {
data: n
} = (0, r.WE)("redirectsToCdnUrl", [e], {
prefetched: i,
staleTime: a
});
return n
}
},
99645: function(e, t, i) {
i.d(t, {
$A: function() {
return c
},
Ey: function() {
return j
},
GK: function() {
return u
},
K: function() {
return f
},
KQ: function() {
return p
},
Kl: function() {
return y
},
Pz: function() {
return d
},
TG: function() {
return n
},
Vd: function() {
return m
},
Vx: function() {
return x
},
W_: function() {
return s
},
Zb: function() {
return h
},
ac: function() {
return l
},
jr: function() {
return g
},
pg: function() {
return o
},
qx: function() {
return a
}
});
var r = i(44155);
let a = {
initial: {
opacity: 0,
y: 50
},
animate: e => ({
y: 0,
opacity: 1,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .4
})
})
},
n = {
initial: {
opacity: 0,
y: 50
},
animate: e => ({
y: 0,
opacity: 1,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .8
})
})
},
s = {
initial: e => ({
opacity: 0,
y: -25,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .6
})
}),
animate: e => ({
y: 0,
opacity: 1,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .6
})
})
},
d = {
initial: {
opacity: 0,
x: -30,
transition: (0, r.us)({
duration: .2
})
},
animate: {
x: 0,
opacity: 1,
transition: (0, r.us)({
duration: .2
})
},
exit: {
opacity: 0,
x: 30,
transition: (0, r.us)({
duration: .2
})
}
},
l = {
initial: {
opacity: 0,
x: -30,
transition: (0, r.us)({
duration: .2
})
},
animate: e => ({
x: 0,
opacity: 1,
transition: (0, r.us)({
duration: .2,
delay: .3 + (e - 1) * .5
})
})
},
o = {
initial: {
opacity: 0,
y: -30
},
animate: e => ({
y: 0,
opacity: 1,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .4
})
})
},
c = {
initial: {
pathLength: 1,
pathOffset: 1
},
animate: e => ({
pathLength: 1,
pathOffset: 0,
transition: (0, r.us)({
duration: 2,
delay: .3 + (e - 1) * .5
})
})
},
x = {
initial: {
pathLength: 0,
opacity: 0
},
animate: e => {
let t = .3 + (e - 1) * .5;
return {
pathLength: 1,
opacity: 1,
transition: (0, r.us)({
pathLength: {
delay: t,
duration: 1,
ease: "easeInOut"
},
opacity: {
delay: t,
duration: .4
}
})
}
}
},
p = {
initial: {
opacity: 0
},
animate: e => {
let t = .3 + (e - 1) * .5;
return {
rotate: 360,
opacity: 1,
transition: (0, r.us)({
opacity: {
delay: t,
duration: .4
},
rotate: {
delay: t,
duration: 1
}
})
}
}
},
h = {
initial: {
x: -15,
opacity: 0,
transition: (0, r.us)({
duration: .2
})
},
animate: {
x: 0,
opacity: 1,
transition: (0, r.us)({
duration: .2
})
},
exit: {
x: -10,
opacity: 0,
transition: (0, r.us)({
duration: .2
})
}
},
m = {
initial: {
x: 15,
opacity: 0,
transition: (0, r.us)({
duration: .2
})
},
animate: {
x: 0,
opacity: 1,
transition: (0, r.us)({
duration: .2
})
},
exit: {
x: -10,
opacity: 0,
transition: (0, r.us)({
duration: .2
})
}
},
u = {
initial: {
x: "0px"
},
animate: e => {
let {
numberOfCards: t,
cardWidth: i,
cardGap: a
} = e, n = [];
for (let e = 0; e < t; e++) {
let r = "-".concat(e * i + e * a, "px");
0 === e ? n.push("0px", "0px") : e === t - 1 ? n.push(r, r) : n.push(r, r, r)
}
return {
x: n,
transition: (0, r.us)({
repeat: 1 / 0,
repeatType: "reverse",
duration: 4 * t
})
}
}
},
y = {
initial: {
y: 0
},
animate: e => {
let {
order: t,
y: i,
duration: a
} = e;
return {
y: i,
transition: (0, r.us)({
repeat: 1 / 0,
repeatType: "reverse",
delay: .3 + (t - 1) * .5,
duration: a
})
}
}
},
f = {
initial: {
opacity: 0,
x: 100,
scaleY: 0
},
animate: e => ({
x: 0,
opacity: 1,
duration: .5,
scaleY: 1,
transition: (0, r.us)({
delay: .3 + (e - 1) * .5,
duration: .4
})
})
},
j = {
initial: {
opacity: 0
},
animate: () => ({
opacity: 1,
transition: (0, r.us)({
delay: 0,
duration: 3,
ease: "easeOut"
})
})
},
g = {
initial: {
pathLength: 0
},
animate: () => ({
pathLength: 1,
transition: (0, r.us)({
duration: 2,
ease: "easeInOut"
})
})
}
}
}
]);